DevTools দিয়ে HTML-CSS debugging

১ · Debugging মানে অনুমান নয় — ছয় ধাপের পদ্ধতি

রুমানা নারায়ণগঞ্জ থেকে অনলাইনে শাড়ি বিক্রি করেন। নিজের দোকানের ওয়েবসাইট নিজেই বানিয়েছেন। একদিন এক ক্রেতা জানালেন, “আপু, ফোনে আপনার পাতা ডানে-বাঁয়ে নড়ে, লেখা কেটে যায়।” রুমানা AI-কে জিজ্ঞেস করলেন। উত্তর এলো: body-তে overflow-x: hidden দিন। নড়াচড়া থামল। কিন্তু এক সপ্তাহ পরে দেখলেন, ওপরের আটকে থাকা মেনুটি আর আটকে থাকছে না, আর একটি অফার ব্যানারের ডান পাশ কাটা পড়ে আছে — কেউ খেয়ালই করেনি।

আসলে সমস্যাটি সারেনি, শুধু চোখের আড়ালে গেছে। ব্যানারের একটি width ভুল ছিল, সেটিই পাতাকে চওড়া করছিল। এই পর্বের মূল কথা এখানেই: debugging মানে ভুলের আসল কারণ খুঁজে বের করা, আর সেটি হয় একটি পদ্ধতি মেনে — অনুমানে নয়। সেই পদ্ধতির প্রধান হাতিয়ার হলো ব্রাউজারের DevTools, যার সাথে প্রথম পরিচয় হয়েছিল পর্ব ০২-এ (কাজের টুল — VS Code, ব্রাউজার আর DevTools). এবার সেটির গভীরে যাব।

নিচের ডায়াগ্রামে রুমানার বাগটি নিয়েই ছয়টি ধাপ দেখুন। “পরে” চাপুন:

এই কোর্সের প্রিভিউর ভেতরে DevTools

এই পর্বের প্রতিটি লাইভ এডিটরে ইচ্ছে করে একটি করে বাগ রাখা হয়েছে। প্রিভিউটি আসলে পাতার ভেতরে বসানো আলাদা একটি ছোট পাতা (iframe). তবু DevTools সেখানে পুরোপুরি কাজ করে:

1. প্রিভিউর ভেতরে যে জিনিসটি দেখতে চান, তার ওপর right-click করে Inspect (Chrome বা Edge-এ বাংলায় “পরিদর্শন করুন”) চাপুন। Elements প্যানেল সরাসরি সেই element-এ খুলবে — ওপরে দেখবেন <iframe> আর তার ভেতরে #document.
2. Console-এ প্রিভিউর ভেতরের জিনিস নিয়ে কাজ করতে চাইলে Console-এর ওপরের “top” লেখা ড্রপডাউন থেকে iframe-টি বেছে নিন; নইলে আপনার কমান্ড বাইরের লেসন-পাতায় চলবে।
3. এডিটরের কোড বদলালে প্রিভিউ নতুন করে তৈরি হয় — DevTools-এ করা পরীক্ষামূলক বদল তখন মুছে যায়। তাই আগে DevTools-এ খুঁজুন, কারণ বুঝলে তারপর এডিটরে সমাধান লিখুন।

ফোনে পড়ছেন? ফোনের ব্রাউজারে DevTools নেই। সমস্যা নেই — প্রতিটি এডিটরের নিচের ব্যাখ্যায় বাগের সমাধানও লেখা আছে, আর CSS-এর ভেতরে মন্তব্য করে রাখা “debug aid” লাইনগুলো চালু করে কিছুটা DevTools-এর কাজ এডিটরেই করা যায়।

২ · Elements প্যানেল — জীবন্ত HTML, জোর করে আনা state আর “সবকিছুতে outline”

Elements প্যানেলে যা দেখেন, তা আপনার HTML ফাইল নয় — ব্রাউজার ফাইলটি পড়ে যে DOM গাছ বানিয়েছে, সেটির এই মুহূর্তের অবস্থা। তাই এখানে বদলালে পাতাও সাথে সাথে বদলায়, কিন্তু ফাইলে কিছু লেখা হয় না। পর্ব ০২-এ লেখা বদলানো দেখেছেন; debugging-এ আরও কয়েকটি কাজ রোজ লাগে:

Elements গাছে কিছু ট্যাগের পাশে ছোট ব্যাজ দেখবেন — flex, grid, scroll. এগুলোতে চাপলে পাতার ওপর সেই লেআউটের নকশা আঁকা হয় (অংশ ৫)। আর JavaScript কোনো element বদলে দিচ্ছে কি না জানতে, right-click → Break on → subtree modifications দিলে বদলের মুহূর্তে কোড থেমে যায় — DOM আর JavaScript-এর মিলন নিয়ে বিস্তারিত পর্ব ৫২-এ।

যে বাগ শুধু hover-এ দেখা যায় — :hov

সমস্যা: মেনুর ড্রপডাউন বা কার্ডের hover-রং শুধু মাউস ওপরে থাকলে দেখা যায়। কিন্তু মাউস নিয়ে DevTools-এ যেতেই hover চলে যায়, বাগও উধাও। সমাধান হলো state জোর করে আনা — force element state. Styles প্যানের ওপরের :hov বোতামে চাপলে কয়েকটি টিকবক্স আসে: :active, :hover, :focus, :visited, :focus-within, :focus-visible আর :target. টিক দিলে মাউস ছাড়াই element-টি সেই অবস্থায় আটকে থাকে। পাশের .cls বোতাম দিয়ে একটি class যোগ বা বন্ধ করা যায় — JavaScript যে .open বা .active class দেয়, তা হাতে দিয়ে দেখতে।

<style>
  body { font-family: sans-serif; }
  .card { width: 220px; padding: 12px; border: 1px solid #cbd5e1;
          border-radius: 10px; }
  .card h3 { margin: 0 0 4px; font-size: 17px; }
  .card button { font: inherit; padding: 6px 12px; border: 0;
                 border-radius: 6px; background: #2563eb; color: white; }
  .card:hover { background: #eff6ff; }
  .card:hover button { background: white; }   /* বাগ লুকিয়ে আছে এখানে */
</style>

<div class="card">
  <h3>মিনিকেট চাল — ৫ কেজি</h3>
  <p>৳৪২০</p>
  <button type="button">কার্টে নিন</button>
</div>

“সবকিছুতে outline” — চোখে বাক্স দেখার কৌশল

CSS-এ প্রতিটি element আসলে একটি বাক্স (পর্ব ১৯)। কিন্তু বাক্সের সীমানা চোখে দেখা যায় না, তাই কোনটি কতটা জায়গা নিচ্ছে বোঝা কঠিন। পুরোনো, কিন্তু আজও খুব কাজের কৌশল:

/* debug aid — কাজ শেষে অবশ্যই মুছবেন */
* { outline: 1px solid red; }

/* নেস্টিং-এর গভীরতা বোঝার জন্য: যত ভেতরে, তত গাঢ় */
* { background: rgb(255 0 0 / 0.06); }

এখানে border নয়, outline কেন? কারণ border box model-এর অংশ — প্রতিটি বাক্সে ২px করে বাড়লে লেআউট নিজেই বদলে যায়, আর আপনি যে বাগ খুঁজছেন সেটি সরে যেতে পারে। outline কোনো জায়গা নেয় না, শুধু ওপরে আঁকা হয়। নিচের এডিটরে এই কৌশলটি মন্তব্য করে রাখা আছে:

<style>
  body { font-family: sans-serif; }
  .wrap { max-width: 300px; border: 2px dashed #94a3b8; }
  .offer { width: 100%; padding: 16px; border: 4px solid #f59e0b;
           background: #fef3c7; }
  .offer h3 { margin: 0 0 4px; }
  .offer p { margin: 0; }

  /* debug aid — নিচের লাইনের মন্তব্য-চিহ্ন সরিয়ে দেখুন */
  /* * { outline: 1px solid red; } */
</style>

<div class="wrap">
  <div class="offer">
    <h3>পূজার অফার</h3>
    <p>সব শাড়িতে ১৫% ছাড়</p>
  </div>
  <p>ডেলিভারি সারা দেশে।</p>
</div>

৩ · Styles প্যান — কাটা দাগ, হলুদ ত্রিভুজ আর “এর কোনো প্রভাব নেই”

Elements-এ একটি element বাছলে পাশের Styles প্যান সেই element-এ লাগা সব CSS নিয়ম দেখায় — সবচেয়ে শক্তিশালী নিয়ম সবার ওপরে, তারপর ক্রমে দুর্বলগুলো, একদম নিচে উত্তরাধিকারে (inheritance) আসা নিয়ম আর ব্রাউজারের নিজের user agent stylesheet. প্রতিটি নিয়মের ডানে লেখা থাকে কোন ফাইলের কোন লাইন — চাপলে সেখানে নিয়ে যায়। এই প্যানের সংকেতগুলো পড়তে জানলেই অর্ধেক CSS-বাগ ধরা যায়:

#menu a {                    style.css:2
    color: #1e3a8a;
}
.sale {                      style.css:5
    color: white;             ← হেরে গেছে, ওপরের নিয়মের কাছে
    background: #dc2626;
}

.btn {
    margin-left: 8 px;  ⚠      ← Invalid property value
    colr: red;  ⚠              ← Unknown property name
    border-radius: 6px;
}

.box {
    justify-content: center;  ⓘ
}
ⓘ The display: block property prevents
  justify-content from having an effect.
  Try setting display: flex or grid.

.offer {
  ☑ width: 100%;
  ☐ padding: 16px;        ← টিক তুলে দিলে বন্ধ, আবার দিলে চালু
  ☑ border: 4px solid #f59e0b;
  + নতুন লাইন লিখতে বন্ধনীর শেষে ক্লিক
}

color: ■ #94a3b8
┌──────────────────────────────┐
│ Contrast ratio   2.56  ⚠        │
│ AA   4.5   ✘    AAA   7.0   ✘ │
│ ─── এই রেখার ওপারের রং পাস ─── │
└──────────────────────────────┘

margin          –
 ┌ border        4 ────────────┐
 │ ┌ padding    16 ──────────┐ │
 │ │      300 × 58          │ │
 │ └─────────────────────────┘ │
 └─────────────────────────────┘

এবার নিজে খুঁজে দেখুন। নিচের মেনুতে “অফার” বোতামটি লাল পটভূমিতে সাদা লেখা হওয়ার কথা, আর দুই বোতামের মাঝে একটু ফাঁক থাকার কথা। দুটির কোনোটিই ঠিকমতো হচ্ছে না:

body { font-family: sans-serif; }
#menu a { color: #1e3a8a; text-decoration: none; padding: 6px 10px; }
.btn { border: 1px solid #94a3b8; border-radius: 6px; }

/* “অফার” লাল-সাদা হওয়ার কথা */
.sale { color: white; background: #dc2626; }

/* বোতামের মাঝে ফাঁক */
.btn + .btn { margin-left: 8 px; }

এখন inactive CSS. নিচে সবুজ “নতুন” ব্যাজটি 80px চওড়া আর 28px উঁচু হওয়ার কথা, আর ধূসর বাক্সের লেখা মাঝখানে থাকার কথা:

body { font-family: sans-serif; }
.badge { width: 80px; height: 28px; text-align: center;
         background: #16a34a; color: white; border-radius: 99px; }

.box  { justify-content: center; border: 1px solid #cbd5e1;
        padding: 8px; background: #f8fafc; }
.note { z-index: 5; margin: 0; }

৪ · Computed — শেষ পর্যন্ত কোন মান বসল, আর কে বসাল

Styles প্যান দেখায় কী কী লেখা আছে; Computed ট্যাব দেখায় শেষে কী হলো। দশটি নিয়ম মিলে একটি color ঠিক হলে Styles-এ দশটিই পাবেন, Computed-এ একটিই — যেটি সত্যিই পাতায় বসেছে, তার computed value (প্রায়ই px বা rgb()-তে রূপান্তরিত)। বড় প্রজেক্টে নিয়মের ভিড়ে হারিয়ে না গিয়ে উল্টো দিক থেকে খোঁজার পথ এটিই:

Filter [ color      ]   ☐ Show all   ☐ Group
▸ color            rgb(30, 58, 138)
▸ display          inline
▸ padding-top      6px
▸ text-decoration  none

▾ color   rgb(30, 58, 138)
    #1e3a8a        #menu a              style.css:2  ← জিতেছে
    white          .sale                style.css:5
    -webkit-link   a:-webkit-any-link   user agent stylesheet

  font-family      sans-serif      ← body থেকে উত্তরাধিকার
  font-size        16px            ← কেউ লেখেনি, ডিফল্ট
  line-height      normal
  margin-left      0px             ← “8 px” invalid ছিল, তাই 0

Rendered Fonts
  Nirmala UI — Local file (4 glyphs)
← বাংলা অক্ষর এঁকেছে Windows-এর নিজের ফন্ট

Computed-এর ওপরের box model ছবি আর পাতায় element-এর ওপর মাউস রাখলে আসা রঙিন ছায়া (নীল content, সবুজ padding, হলুদ-কমলা margin) মিলিয়ে একটি বিখ্যাত বাগ ধরা যায় — margin collapse. নিচের সবুজ hero অংশের ওপরে একটি সাদা ফাঁক আছে, যা কেউ লেখেনি:

<style>
  body { margin: 0; font-family: sans-serif; background: #f1f5f9; }
  .hero { background: #0f766e; color: white; padding: 0 16px; }
  .hero h1 { margin-top: 40px; font-size: 22px; }
  .hero p { margin-bottom: 0; padding-bottom: 16px; }
</style>

<div class="hero">
  <h1>রাজশাহীর আম — সরাসরি বাগান থেকে</h1>
  <p>অর্ডার নেওয়া হচ্ছে জুন থেকে</p>
</div>
<p style="padding: 0 16px">সবুজ অংশের ওপরের ফাঁকটি কোথা থেকে এলো?</p>

৫ · Layout, Fonts আর Accessibility — overlay, আসল ফন্ট আর accessible name

Layout প্যান — grid আর flex চোখে দেখা

Styles আর Computed-এর পাশেই Layout ট্যাব। সেখানে পাতার সব grid আর flex container-এর তালিকা থাকে, প্রতিটির পাশে টিকবক্স। টিক দিলে পাতার ওপর grid overlay আঁকা হয় — লাইন নম্বর, track-এর মাপ, area-র নাম (এগুলোও আলাদা টিকে চালু করা যায়)। Flex overlay-এ container-এর সীমানা, item-গুলোর জায়গা আর ফাঁকা জায়গা (free space) ডোরাকাটা দাগে দেখা যায়। Elements গাছে grid বা flex ব্যাজে চাপলেও একই কাজ হয়। Styles-এ display: flex-এর পাশের ছোট আইকনে চাপলে একটি flexbox editor খোলে — justify-content, align-items-এর মান ছবিতে চেপে বদলানো যায়।

overlay সবচেয়ে কাজে লাগে যখন কোনো item তার জায়গার চেয়ে বড় হয়ে বাইরে বেরিয়ে যায়। নিচের অর্ডার-সারিতে লম্বা লিংকটি “…” দিয়ে কেটে যাওয়ার কথা, আর দাম ডানে বাক্সের ভেতরে থাকার কথা:

body { font-family: sans-serif; }
.item { display: flex; gap: 10px; align-items: center; width: 300px;
        border: 2px solid #64748b; border-radius: 8px; padding: 8px; }
.pic  { flex: none; width: 40px; height: 40px; border-radius: 50%;
        background: #e0f2fe; display: grid; place-items: center; }
.text { flex: 1; }
.link { margin: 2px 0 0; color: #475569; font-size: 13px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price { flex: none; font-weight: bold; }

Fonts — বাংলা লেখা আসলে কোন ফন্টে আঁকা হলো

পর্ব ১৪ আর ২১-এ দেখেছেন, CSS-এ font-family: "Hind Siliguri", sans-serif লেখা মানে অনুরোধ, নিশ্চয়তা নয়। ফন্ট ফাইল না এলে, বা ফন্টে বাংলা অক্ষর না থাকলে ব্রাউজার চুপচাপ পরের ফন্টে চলে যায় — font fallback. পাতা দেখতে মোটামুটি ঠিকই লাগে, তাই ভুলটা চোখ এড়িয়ে যায়। ধরার উপায় একটাই: বাংলা লেখার একটি element বেছে Computed-এর নিচের Rendered Fonts দেখা।

Rendering ট্যাবের Disable local fonts চালু করলে কম্পিউটারে ইনস্টল করা ফন্টগুলো বাদ পড়ে — দেখা যায় যে ক্রেতার কম্পিউটারে ফন্টটি নেই, তার কাছে পাতা কেমন দেখায়। Firefox-এর Inspector-এ আলাদা একটি Fonts প্যান আছে, যা ব্যবহৃত ফন্ট দেখায় আর variable font-এর axis টেনে বদলাতে দেয়।

Accessibility প্যান — ব্রাউজার screen reader-কে কী বলছে

Elements-এর পাশের Accessibility ট্যাবে বেছে নেওয়া element-এর accessible name, role, আর ARIA attribute দেখায় — অর্থাৎ accessibility tree-তে element-টি কেমন। শুধু আইকন দেওয়া বোতামের name ফাঁকা থাকলে এখানেই ধরা পড়ে; name কোথা থেকে এলো (লেখা, aria-label, alt, label) সেটাও লেখা থাকে। CSS-এর জন্য বিশেষ জরুরি: display: none আর visibility: hidden জিনিস tree থেকে বাদ যায়, আর content দিয়ে বসানো লেখা অনেক সময় name-এ ঢুকে যায় — দুটোই এখানে যাচাই করা যায় (পর্ব ১২, ৪৫)।

৬ · Changes, Rendering আর device toolbar — বদল ধরে রাখা আর ব্রাউজারকে ভান করানো

Changes — DevTools-এ কী কী বদলেছেন

Styles-এ দশটি জিনিস বদলে অবশেষে পাতা ঠিক হলো — কিন্তু কোন দশটি? মনে রাখা কঠিন। Changes প্যানেল (DevTools-এ Ctrl+Shift+P চেপে Command Menu খুলে “Show Changes” লিখুন) সব CSS বদল ফাইল ধরে diff আকারে দেখায় — লাল লাইন মুছেছেন, সবুজ লাইন যোগ করেছেন — আর একটি বোতামে সব কপি করা যায়। Firefox-এর Inspector-এও একই নামে একটি প্যান আছে। নিজের প্রজেক্টে চাইলে আরও এক ধাপ: Sources প্যানেলের Workspace-এ প্রজেক্ট ফোল্ডারটি যোগ করলে DevTools-এর বদল সরাসরি ফাইলে সেভ হয়; আর Local Overrides দিয়ে অন্যের সাইটের CSS ফাইল নিজের কম্পিউটারে বদলে, রিলোডের পরও সেই বদল দেখা যায় — লাইভ সাইটে হাত না দিয়েই সমাধান পরীক্ষা।

Rendering ট্যাব — যা চোখে দেখা যায় না, তা দেখানো

Command Menu-তে “Show Rendering” লিখলে নিচের drawer-এ Rendering ট্যাব খোলে। এখানে দুই ধরনের সুবিধা: ব্রাউজারের আঁকার কাজ চোখে দেখানো, আর ব্যবহারকারীর সেটিং বা পরিস্থিতির ভান করা। এই কোর্সের প্রিভিউর ক্ষেত্রেও খাটে — অনুকরণ পুরো ট্যাবের ওপর কাজ করে, iframe-সহ:

Device toolbar — মাপ, DPR আর স্পর্শ

পর্ব ০২ আর ৩০-এ device toolbar দেখেছেন। debugging-এ এর কয়েকটি লুকানো সুবিধা মনে রাখুন। ওপরের তিন-বিন্দু মেনু থেকে Show media queries চালু করলে প্রস্থের ওপর রঙিন দাগ আসে — প্রতিটি দাগ আপনার CSS-এর একটি media query-র breakpoint; চাপলে ঠিক সেই প্রস্থে চলে যায়। Add device pixel ratio দিয়ে DPR ১, ২ বা ৩ বেছে দেখা যায় srcset কোন ছবি নিচ্ছে (পর্ব ৩২)। device type “Mobile” করলে মাউসের তীর গোল স্পর্শ-বিন্দু হয়ে যায় আর (hover: none), (pointer: coarse) media query সত্য হয়। সাথে Network-এর গতি কমানো যায় (throttling). তবে এগুলো সবই অনুকরণ: আসল ফোনের ব্রাউজার, ফন্ট, প্রসেসরের গতি আর আঙুলের মাপ আলাদা — শেষ পরীক্ষা আসল ফোনে (Android ফোনকে USB দিয়ে যুক্ত করে কম্পিউটারের Chrome-এ chrome://inspect খুললে ফোনের পাতাও DevTools দিয়ে দেখা যায়)।

৭ · Network, Coverage, Performance আর Lighthouse — লোড আর গতির বাগ

কিছু বাগ CSS-এর লেখায় নয়, ফাইল আসার পথে। “আমার কম্পিউটারে তো ঠিক দেখায়!” — এই কথার পেছনে প্রায়ই থাকে না-আসা ফাইল বা পুরোনো ক্যাশ। Network প্যানেল খুলে পাতা রিলোড দিন, তারপর ফিল্টার বোতাম থেকে CSS, Font বা Img বেছে নিন:

• লাল সারি, status 404: ফাইলটি পাওয়া যায়নি (404) — প্রায় সবসময় path বা নামের বানান, বড়-ছোট হাতের অক্ষর (Linux সার্ভারে Style.css আর style.css আলাদা) — পর্ব ০৫। CSS ফাইল না এলে পুরো পাতা সাদামাটা; ফন্ট না এলে নীরবে fallback.
• Initiator কলাম: কোন ফাইল কোন ফাইলকে ডেকেছে। ছবিটি HTML থেকে, না CSS-এর background-image থেকে — ভুল path খুঁজতে কাজে লাগে, কারণ CSS-এর ভেতরের relative path CSS ফাইলের অবস্থান থেকে গোনা হয়, HTML-এর নয়।
• অন্য ডোমেইনের ফন্ট আটকে গেছে: ফন্ট ফাইল অন্য origin থেকে আনতে হলে সার্ভারকে CORS-এর অনুমতি দিতে হয়; না দিলে Console-এ CORS error আর ফন্ট বাদ।
• Size কলামে (memory cache) বা (disk cache): ফাইল সার্ভার থেকে নয়, ব্রাউজারের cache থেকে এসেছে। নতুন CSS আপলোড করেও পুরোনো চেহারা দেখলে এটাই কারণ। DevTools খোলা অবস্থায় Disable cache-এ টিক দিন; সাইটে স্থায়ী সমাধান হলো ফাইলের নামে version, যেমন style.css?v=2 (পর্ব ১৬)।
• render-blocking: <head>-এর CSS ফাইল না আসা পর্যন্ত ব্রাউজার পাতা আঁকে না — তাই বড় বা ধীর CSS মানে দেরিতে প্রথম দৃশ্য (render-blocking). Network-এর waterfall-এ কোন ফাইল আগে এসে বাকিদের আটকে রাখছে, দেখা যায়; Lighthouse আর Performance প্যানেল এগুলো আলাদা করে চিহ্নিত করে।

Coverage — কতটা CSS আসলে ব্যবহার হলো

Command Menu-তে “Show Coverage” লিখে রিলোড বোতাম চাপলে Coverage প্রতিটি CSS আর JS ফাইলের পাশে একটি দাগ দেখায় — কতটা ব্যবহার হয়েছে আর কতটা হয়নি। ফাইলে চাপলে Sources-এ প্রতিটি নিয়মের পাশে সবুজ (ব্যবহৃত) বা লাল (অব্যবহৃত) দাগ। বড় framework পুরোটা এনে দশ ভাগের এক ভাগ ব্যবহার করলে এখানে স্পষ্ট হয়ে যায়। কিন্তু সাবধান: “অব্যবহৃত” মানে এই পাতায়, এই মুহূর্ত পর্যন্ত — hover, খোলা মেনু, অন্য মাপের media query বা অন্য পাতার নিয়মও লাল দেখায়। মুছে ফেলার আগে ভাবনার প্রশ্ন ৩ পড়ুন।

Performance — ঝাঁকুনি কোথা থেকে (পর্ব ৩৮-এর পুনরালোচনা)

অ্যানিমেশন বা স্ক্রল ঝাঁকুনি দিলে Performance প্যানেলে রেকর্ড করুন। পর্ব ৩৮-এ দেখেছিলেন: প্রতিটি ফ্রেমে style হিসাব → layout → paint → composite. রেকর্ডের আগে গিয়ার আইকন থেকে CPU ৪ বা ৬ গুণ ধীর করে দিন — কম দামের ফোনের মতো। রেকর্ডে বেগুনি Layout বা সবুজ Paint প্রতি ফ্রেমে বারবার দেখলে বুঝবেন width বা top-এর মতো property অ্যানিমেট হচ্ছে — transform আর opacity-তে বদলান। লাল কোণ-চিহ্ন দেওয়া লম্বা কাজ (long task) মানে মূল থ্রেড আটকে ছিল। আলাদা একটি সারিতে layout shift-গুলোও চিহ্নিত থাকে।

Lighthouse — এক ক্লিকে পরীক্ষা, কিন্তু শেষ কথা নয়

Lighthouse ট্যাবে Performance, Accessibility, Best Practices আর SEO বেছে “Analyze page load” চাপলে একটি রিপোর্ট আসে — প্রতিটি সমস্যার পাশে কোন element বা ফাইল দায়ী, আর কী করতে হবে। কিন্তু এটি একটি নির্দিষ্ট যন্ত্রে, নির্দিষ্ট গতির একটি পরীক্ষা; স্কোর প্রতিবার একটু ওঠানামা করে, আর যন্ত্র যা মাপতে পারে না (কি-বোর্ডে ব্যবহার, পড়ার ক্রম) তা দেখে না। বিস্তারিত পর্ব ৪৯-এ।

৮ · Firefox-এর বিশেষ টুল — যেখানে অন্যরা অনুসরণ করেছে

পর্ব ০২-এ বলা হয়েছিল, অন্তত দুটি ভিন্ন engine-এ পরীক্ষা করুন। debugging-এর জন্যও Firefox রাখার আলাদা কারণ আছে — CSS লেআউট বোঝার কয়েকটি টুলে Firefox বহুদিন এগিয়ে ছিল, আর কয়েকটি ধারণা Firefox-ই প্রথম এনেছে:

Firefox-এ নাম একটু আলাদা: Elements-এর বদলে Inspector, Styles-এর বদলে Rules, আর Responsive Design Mode খোলে Ctrl+Shift+M দিয়ে। Safari-র Web Inspector-ও grid ও flex overlay দেয়, আর iPhone-এর Safari-তে পাতা debug করার একমাত্র পথ — Mac-এর Safari-তে iPhone যুক্ত করে। বাগ একটি টুলে বোঝা না গেলে অন্যটিতে খুলুন।

৯ · প্রচলিত বাগ — চেনা মুখ, চেনা সমাধান

অভিজ্ঞ ফ্রন্ট-এন্ড ডেভেলপাররা বেশিরভাগ বাগ প্রথম দেখাতেই চেনেন, কারণ একই ছয়-সাতটি কারণ বারবার ফিরে আসে। নিচের টেবিলটি হাতের কাছে রাখুন:

এর মধ্যে সবচেয়ে বেশি সময় নষ্ট করে z-index. পর্ব ২৪-এ দেখেছেন, z-index কাজ করে একই stacking context-এর ভেতরে; ভিন্ন context-এর সদস্যরা পরস্পরের সাথে তুলনাই হয় না — পুরো context একটি দল হিসেবে ওপরে-নিচে যায়। নিচের পাতায় সাদা ড্রপডাউনটি হলুদ ব্যানারের ওপরে থাকার কথা:

<style>
  body { margin: 0; font-family: sans-serif; min-height: 240px; }
  header { position: sticky; top: 0; z-index: 1;
           background: #1e293b; color: white; padding: 10px 16px; }
  .menu { position: relative; display: inline-block; }
  .drop { position: absolute; top: 100%; left: 0; z-index: 9999;
          width: 150px; margin: 6px 0 0; padding: 8px 12px 8px 28px;
          background: white; color: #111; border: 1px solid #94a3b8; }
  .banner { position: relative; z-index: 2; margin: 12px 0 0;
            padding: 24px 16px; background: #fde68a; }
</style>

<header>
  <div class="menu">ক্যাটাগরি ▾
    <ul class="drop"><li>শাড়ি</li><li>পাঞ্জাবি</li><li>থ্রি-পিস</li></ul>
  </div>
</header>
<p class="banner">শীতের অফার — সব চাদরে ২০% ছাড়</p>

Microsoft Edge-এর DevTools-এ 3D View নামে একটি প্যানেল আছে, যার Z-index অংশে পাতার stacking context-গুলো ত্রিমাত্রিক স্তূপের মতো আলাদা করে দেখা যায় — কোন দল কোন দলের ওপরে, এক নজরে।

শেষে একটি ছোট JavaScript “debug aid” — পাতার কোন element ডান দিকে পাতার বাইরে বেরিয়েছে, খুঁজে লাল দাগ দিয়ে দেয়। রুমানার বাগের মতো horizontal scroll-এর অপরাধী খুঁজতে নিজের পাতার Console-এ পেস্ট করেও চালানো যায়:

(function find() {
  if (!document.body.offsetWidth) return setTimeout(find, 50);
  var W = document.documentElement.clientWidth;   // দৃশ্যমান প্রস্থ
  var n = 0;
  document.querySelectorAll('body *').forEach(function (el) {
    var r = el.getBoundingClientRect();
    if (r.right > W + 1) {                          // ডানে বাইরে গেছে
      n++;
      el.style.outline = '2px solid red';
      console.log('বাইরে গেছে: <' + el.tagName.toLowerCase() + '> — ' +
                  Math.round(r.right - W) + 'px বেশি');
    }
  });
  console.log(n ? n + 'টি element পাওয়া গেল' : 'কোনো overflow নেই');
})();

১০ · AI-এর যুগে — AI-কে বাগ দেখানোর আগে নিজে দেখুন

“CSS কাজ করছে না, ঠিক করে দাও” লিখে পুরো ফাইল পেস্ট করলে AI অনুমান করে — কারণ সে আপনার পাতা দেখতে পায় না, Computed মান জানে না, কোন নিয়ম জিতেছে জানে না। ফলে উত্তর আসে লক্ষণ ঢাকার ধাঁচে। অথচ DevTools থেকে দুই লাইনের তথ্য দিলে একই AI প্রায়ই সঠিক কারণ বলে দেয়। নিয়ম তাই: আগে DevTools, তারপর AI — আর AI-এর উত্তরও DevTools-এ যাচাই।

CSS-বাগ সারাতে AI সাধারণত যেসব ভুল করে

AI-এর দেওয়া সমাধান হাতে পেলে — যাচাইয়ের চেকলিস্ট

• সমাধানটি আগে DevTools-এর Styles-এ লিখে দেখেছি — কাজ করলে তবেই ফাইলে নিয়েছি
• AI যে কারণ বলেছে, Computed বা overlay-তে সংখ্যা দিয়ে তা মিলেছে
• সমাধানে !important, বিশাল z-index, ঢালাও overflow: hidden বা অকারণ নতুন div নেই
• নতুন property-র ব্রাউজার সমর্থন MDN বা Can I use-এ দেখেছি; HTML বদলালে validator.w3.org-এ যাচাই করেছি
• ৩৬০px, ৭৬৮px আর ডেস্কটপে, অন্তত দুটি ব্রাউজারে, dark mode আর কি-বোর্ডে দেখেছি; Lighthouse-এ নতুন সতর্কতা আসেনি