Debugging with DevTools & Cross-Browser Basics
DevTools দিয়ে ডিবাগিং ও ক্রস-ব্রাউজার বেসিক্স
1. Every Professional's Real Superpower — DevTools
You've written a lot of HTML and CSS by now — and you've probably already hit moments where something just didn't look right and you weren't sure why. Professional developers don't guess: they open DevTools, the inspector panel built into every modern browser, and look directly at what the browser actually computed. This module turns you from someone who edits code and hopes into someone who edits code and verifies.
Everything below applies almost identically in Chrome, Edge, and Firefox — the panel names differ very slightly, but the concepts (Elements, Styles, box model) are universal.
2. Opening DevTools & the Elements Panel
Press F12, or Ctrl+Shift+I (Cmd+Option+I on Mac), or right-click
any element on the page and choose Inspect. All three open the same panel — the last
one is the most useful habit, because it jumps straight to the element you clicked instead of making
you search for it in a tree.
F12 চাপুন, অথবা Ctrl+Shift+I (ম্যাকে Cmd+Option+I), অথবা পেজের যেকোনো এলিমেন্টে right-click করে Inspect বেছে নিন। তিনটিই একই প্যানেল খোলে — শেষেরটি সবচেয়ে উপকারী অভ্যাস, কারণ এটি সরাসরি আপনার ক্লিক করা এলিমেন্টে চলে যায়, ট্রি-তে খুঁজতে হয় না।
- Step 1 — Right-click the element that looks wrong and choose Inspect.
- Step 2 — The Elements (Chrome/Edge) or Inspector (Firefox) panel opens, showing the live HTML tree with that element highlighted.
- Step 3 — Hovering any node in the tree highlights that exact box on the page — this is how you confirm you found the right element.
- Step 4 — The Styles pane (usually on the right) lists every CSS rule affecting the selected element, in the order the browser applied them, with overridden (struck-through) rules shown too.
3. Live-Editing CSS in the Browser
The single most powerful DevTools habit: click any property value in the Styles pane and type a new one — the page updates instantly, with zero file saving. Click a checkbox next to a rule to toggle it off entirely and see what changes. None of this touches your actual files; refreshing the page discards every experiment, which makes it a completely safe place to try ideas.
- Click a value (e.g.
16px) — it becomes an editable text field. - Use the ↑ / ↓ arrow keys after clicking a number to nudge it up or down instantly.
- Click the
+in the Styles pane (Chrome) to add a brand-new declaration on the fly. - Toggle the small checkbox next to any property to disable just that one line.
Editing CSS directly in the Elements panel is the fastest way to debug — you see the fix work before you ever touch your real files.
4. The Box Model Inspector
At the bottom of the Styles pane (Chrome/Edge call it "Computed" or show it directly in Styles; Firefox has a dedicated "Layout" tab) is a small diagram of nested rectangles labeled content, padding, border, and margin — with the actual computed pixel value for each side. This is the fastest way to answer "why is there a gap here?" or "why is this wider than I expected?" without doing any mental math.
5. Narrated Debugging Session — Finding a Buggy Card
Here's a small, real bug. The card below should have its footer button pinned to the bottom with even spacing, but something's off. Run it, then read the "what DevTools would show you" walkthrough beneath it as if we were debugging it together.
<div class="card">
<h3>Weekly Report</h3>
<p>Everything looks fine so far.</p>
<button>Download</button>
</div>.card {
width: 220px;
height: 120px;
padding: 16px;
border: 2px solid #39b549;
box-sizing: content-box;
}
.card button {
margin-top: 20px;
}- Inspecting
.cardand opening the box model shows the actual rendered box is 256px wide, 156px tall — not the 220×120 written in the CSS. - The Computed panel reveals why:
box-sizing: content-boxmeans padding and border are added on top of the declared width/height, instead of being carved out of it. - Clicking that value and live-editing it to
border-boxinstantly shrinks the card back to the intended 220×120 — confirming the diagnosis before touching any file. - The button overflowing looks like a spacing bug but is really the same root cause — once the box model is fixed, the button sits correctly.
.card ইন্সপেক্ট করে box model খুললে দেখা যায় প্রকৃত রেন্ডার হওয়া বক্স 256px চওড়া, 156px উঁচু — CSS-এ লেখা 220×120 নয়। Computed প্যানেল কারণ দেখায়: box-sizing: content-box-এর মানে হলো padding ও border ঘোষিত width/height-এর ওপরে যোগ হচ্ছে, ভেতর থেকে কেটে নেওয়া হচ্ছে না। এই ভ্যালুতে ক্লিক করে সরাসরি border-box-এ বদলালে কার্ডটি সাথে সাথে সঠিক 220×120-এ ফিরে আসে — কোনো ফাইল স্পর্শ না করেই রোগ নির্ণয় নিশ্চিত হয়।
6. Common Cross-Browser Quirks
Modern browsers agree on far more than they used to, but small differences still bite beginners. Knowing the common ones — and the standard fix — saves hours of confusion.
| Quirk | Cause | Fix |
|---|---|---|
| Default margins differ | Each browser ships its own default margin/padding on body, headings, lists. | Add a small reset: * { margin:0; padding:0; box-sizing:border-box; } |
| Box-sizing surprises | Default is content-box everywhere, but designers expect border-box math. | Set box-sizing: border-box globally, as shown in the debugging demo above. |
| Font rendering differences | Different browsers/OSes use slightly different anti-aliasing and default font stacks. | Always declare an explicit font-family with fallbacks; don't rely on browser defaults. |
appearance on form controls | Buttons/selects/inputs look different per browser by default. | Use appearance: none; plus your own border/background/padding to normalize them. |
| Old Safari flexbox/gap bugs | Some older Safari versions had partial support for gap in flexbox. | Test on real Safari/iOS if targeting those users; use margin-based spacing as a fallback when needed. |
| Scrollbar width differences | Windows and macOS/Linux browsers reserve different amounts of space for scrollbars. | Avoid pixel-perfect assumptions about viewport width; use relative units and test at real widths. |
7. Validating HTML & CSS
Before assuming a bug is a browser quirk, rule out invalid markup. The W3C Markup Validator (validator.w3.org) checks your HTML for unclosed tags, invalid nesting, and missing required attributes; the W3C CSS Validator (jigsaw.w3.org/css-validator) does the same for your stylesheet. Invalid HTML is often the real reason a page renders differently across browsers — each browser guesses how to "fix" broken markup slightly differently.
১) প্রথমে HTML/CSS ভ্যালিডেট করুন। ২) Elements/Styles প্যানেলে প্রকৃত computed ভ্যালু পরীক্ষা করুন। ৩) তারপরই সত্যিকারের ক্রস-ব্রাউজার পার্থক্য সন্দেহ করুন এবং দ্বিতীয় ব্রাউজারে পরীক্ষা করুন।
8. Practice Problems
Every problem has a Show Answer button. Try to solve it yourself first, then compare.
-
Name three ways to open DevTools in Chrome or Edge.Chrome বা Edge-এ DevTools খোলার তিনটি উপায় বলুন।
✨ Show Answer (উত্তর দেখুন)
Answer: Pressing F12, pressing Ctrl+Shift+I, or right-clicking an element and choosing "Inspect."
F12 চাপা, Ctrl+Shift+I চাপা, অথবা কোনো এলিমেন্টে right-click করে "Inspect" বেছে নেওয়া।
-
In the Elements panel's Styles pane, how can you tell that one CSS rule has been overridden by another?Elements প্যানেলের Styles প্যানে কীভাবে বুঝবেন একটি CSS নিয়ম অন্য একটি নিয়ম দ্বারা override হয়েছে?
✨ Show Answer (উত্তর দেখুন)
Answer: The overridden declaration is shown with a strikethrough line through it, and the winning rule (higher specificity or later in source order) appears without one.
override হওয়া declaration-টি কাটা-দাগ (strikethrough) দিয়ে দেখানো হয়, আর জয়ী নিয়মটি (উচ্চতর specificity বা সোর্সে পরে থাকা) কাটা-দাগ ছাড়াই দেখায়।
-
You click a padding value in the Styles pane and change it. Does this save to your actual CSS file? Explain what happens after a page refresh.আপনি Styles প্যানে একটি padding ভ্যালুতে ক্লিক করে বদলান। এটি কি আপনার আসল CSS ফাইলে সেভ হয়? পেজ রিফ্রেশ করলে কী হয় তা ব্যাখ্যা করুন।
✨ Show Answer (উত্তর দেখুন)
Answer: No — live edits in DevTools only affect the currently loaded page in memory, never the source file. Refreshing the page reloads the original CSS file and discards every live edit.
না — DevTools-এর লাইভ পরিবর্তন শুধু বর্তমানে লোড হওয়া পেজের মেমরিতে প্রভাব ফেলে, কখনো সোর্স ফাইলে নয়। পেজ রিফ্রেশ করলে আসল CSS ফাইল আবার লোড হয় এবং সব লাইভ পরিবর্তন মুছে যায়।
-
In the box model diagram (content, padding, border, margin), which layer is closest to the actual text/image content, and which is furthest?বক্স মডেল ডায়াগ্রামে (content, padding, border, margin), কোন স্তরটি প্রকৃত টেক্সট/ইমেজ কনটেন্টের সবচেয়ে কাছে, এবং কোনটি সবচেয়ে দূরে?
✨ Show Answer (উত্তর দেখুন)
Answer: Content is closest (the innermost box). Margin is furthest (the outermost layer, outside the border).
Content সবচেয়ে কাছে (সবচেয়ে ভেতরের বক্স)। Margin সবচেয়ে দূরে (সবচেয়ে বাইরের স্তর, border-এর বাইরে)।
-
Referring to the buggy-card demo above, explain in one sentence why the card rendered larger than its declared width and height.উপরের buggy-card ডেমো দেখে, এক বাক্যে ব্যাখ্যা করুন কেন কার্ডটি তার ঘোষিত width ও height-এর চেয়ে বড় রেন্ডার হয়েছিল।
✨ Show Answer (উত্তর দেখুন)
Answer: Because it used
box-sizing: content-box, so its padding and border were added on top of the declared 220×120 size instead of being included within it.কারণ এটি
box-sizing: content-boxব্যবহার করেছিল, তাই এর padding ও border ঘোষিত 220×120 আকারের ভেতরে অন্তর্ভুক্ত না হয়ে তার ওপরে যোগ হয়েছিল। -
Write the one-line CSS reset rule mentioned in this lesson that fixes both default-margin differences and box-sizing surprises at once.এই লেসনে উল্লেখিত এক-লাইনের CSS reset নিয়মটি লিখুন, যা একইসাথে default-margin পার্থক্য ও box-sizing সমস্যা দুটোই ঠিক করে।
✨ Show Answer (উত্তর দেখুন)
ans6.html<p>This page now uses a global reset.</p>style.css* { margin: 0; padding: 0; box-sizing: border-box; } -
Why might a custom-styled
<select>look inconsistent across browsers by default, and what property helps normalize it?ডিফল্টভাবে কাস্টম-স্টাইল করা<select>কেন ব্রাউজার-ভেদে ভিন্ন দেখাতে পারে, এবং কোন প্রপার্টি এটি স্বাভাবিক করতে সাহায্য করে?✨ Show Answer (উত্তর দেখুন)
Answer: Each browser/OS applies its own native styling to form controls like selects, buttons, and checkboxes by default. Setting
appearance: none;removes that native styling so your own CSS fully controls the appearance.প্রতিটি ব্রাউজার/OS ডিফল্টভাবে select, button, checkbox-এর মতো form control-এ নিজস্ব native স্টাইলিং প্রয়োগ করে।
appearance: none;সেট করলে সেই native স্টাইলিং সরে যায়, তখন নিজের CSS-ই পুরো appearance নিয়ন্ত্রণ করে। -
What is the recommended debugging order when a page looks broken, according to this lesson's callout?একটি পেজ ভাঙা দেখালে, এই লেসনের callout অনুযায়ী প্রস্তাবিত ডিবাগিং ক্রম কী?
✨ Show Answer (উত্তর দেখুন)
Answer: 1) Validate your HTML/CSS, 2) check the Elements/Styles panel for actual computed values, 3) only then suspect a genuine cross-browser difference and test in a second browser.
১) HTML/CSS ভ্যালিডেট করুন, ২) Elements/Styles প্যানেলে প্রকৃত computed ভ্যালু পরীক্ষা করুন, ৩) তারপরই সত্যিকারের ক্রস-ব্রাউজার পার্থক্য সন্দেহ করে দ্বিতীয় ব্রাউজারে পরীক্ষা করুন।
-
Name the two W3C validator tools mentioned in this lesson and what each one checks.এই লেসনে উল্লেখিত দুটি W3C validator টুলের নাম বলুন এবং প্রতিটি কী পরীক্ষা করে তা বলুন।
✨ Show Answer (উত্তর দেখুন)
Answer: The W3C Markup Validator (validator.w3.org) checks HTML for unclosed tags, invalid nesting, and missing required attributes. The W3C CSS Validator (jigsaw.w3.org/css-validator) checks stylesheets for invalid CSS syntax.
W3C Markup Validator (validator.w3.org) HTML-এ বন্ধ না হওয়া ট্যাগ, ভুল nesting, ও অনুপস্থিত প্রয়োজনীয় attribute পরীক্ষা করে। W3C CSS Validator (jigsaw.w3.org/css-validator) stylesheet-এ অবৈধ CSS সিনট্যাক্স পরীক্ষা করে।
-
Explain briefly why testing only in one browser during development can hide bugs that real users will see.সংক্ষেপে ব্যাখ্যা করুন কেন ডেভেলপমেন্টের সময় শুধু একটি ব্রাউজারে পরীক্ষা করলে এমন বাগ লুকিয়ে যেতে পারে যা প্রকৃত ব্যবহারকারীরা দেখবেন।
✨ Show Answer (উত্তর দেখুন)
Answer: Different browsers have slightly different default styles, rendering engines, and levels of support for newer CSS features. A page that looks perfect in one browser can have visible spacing, font, or layout differences in another — the only way to catch these is to actually test in more than one browser.
ভিন্ন ভিন্ন ব্রাউজারের ডিফল্ট স্টাইল, রেন্ডারিং ইঞ্জিন, এবং নতুন CSS ফিচারের সাপোর্টের মাত্রা সামান্য ভিন্ন হয়। এক ব্রাউজারে নিখুঁত দেখানো একটি পেজ অন্য ব্রাউজারে দৃশ্যমান স্পেসিং, ফন্ট, বা লেআউট পার্থক্য দেখাতে পারে — এটি ধরার একমাত্র উপায় হলো সত্যিকারে একাধিক ব্রাউজারে পরীক্ষা করা।
Summary — Module 23
DevTools turns invisible computed values into something you can see and edit live: the Elements panel shows the DOM tree, the Styles pane shows exactly which rules won and lost, and the box model inspector shows content/padding/border/margin as real pixel numbers. Combine that with validating your HTML/CSS first and testing in more than one browser, and most "mystery" layout bugs stop being mysteries.