تمرینگاه دیباگ

پنج تا باگ واقعی، از پروژه‌ی خودت

هر تمرین یه صفحه‌ی تست زنده‌ست: کد باگ‌دارت توی ادیتوره، قاب روی ۳۲۰ پیکسله — کد رو عوض کن و همون لحظه نتیجه رو ببین.

🧭 قبل از شروع

🏹 شکارچیِ Overflow شو

وقتی صفحه اسکرول افقی می‌خوره، مقصر رو توی Console مرورگر این‌طوری پیدا کن:

document.querySelectorAll('*').forEach(el => {
  if (el.scrollWidth > document.documentElement.clientWidth) {
    console.log(el);
  }
});

این کد همه‌ی المان‌های پهن‌تر از صفحه رو لیست می‌کنه. بعد روش کلیک راست → Reveal و دنبال min-width، width ثابت یا padding بزرگ بگرد.

🕵️ باگ‌هایی که توی لیست پنج‌تایی نبود

این‌ها رو وقتی style.css رو خوندم پیدا کردم — و صادقانه بگم، ریشه‌ی خیلی از مشکلات همینان. قبل از فیکس‌های تکی، اول اینا رو مرتب کن:

باگ پنهاناثرمحل
کل استایل‌شیت دو بار تکرار شده (نسخه‌ی اول تا ~خط ۸۶۰، نسخه‌ی دوم بعدش) قوانین نسخه‌ی دوم همیشه می‌برن — ریشه‌ی اصلی گیج‌کننده‌بودن دیباگ کل فایل
کلمه‌ی سرگردان Typography بدون کامنت با سلکتور بعدی ترکیب می‌شه و قانون رو بی‌اثر می‌کنه ~خط ۸۷۸
سلکتور خراب .block--dark,h1 .block--dark,h2 .block--dark,h3 کاما یعنی «یا» → به همه‌ی h1,h2,h3 صفحه رنگ سفید می‌ده → هدینگ‌های سکشن‌های روشن نامرئی می‌شن ~خط ۶۹۰
غلط املایی .calout--primary کلاس مادیفایر هیچ‌وقت اعمال نمی‌شه ~خط ۱۴۷۴
.collapsible__content دوبار و متناقض تعریف شده منوی collapse روی موبایل همیشه نیم‌باز می‌مونه ~خط ۷۵۰ و ۱۶۳۸
min-widthهای ثابت روی .block-plans و .callout روی ویوپورت ۳۲۰px صفحه پهن‌تر از ویوپورت می‌شه → اسکرول افقی ~خط ۸۴۶، ۵۸۸
.btn--accent { width:50% } و width:335px روی دکمه‌ی سرچ اندازه‌ی غیرقابل‌پیش‌بینی همه‌ی دکمه‌های accent ~خط ۱۰۹۶ و ۱۱۴۵

توصیه: اول فایل رو به یه نسخه‌ی واحد تمیز برسون (آخرین نسخه‌ی هر قانون رو نگه دار)، بعد فیکس‌های تمرین‌ها رو اعمال کن.

✅ حالا برو سراغ پروژه‌ی واقعی