اشکال‌زدایی مثل حرفه‌ای‌ها — ترم ۶ آیرو

در این فصل چه می‌سازی#

این فصل چیزی نمی‌سازی — یک صفحهٔ خراب را درست می‌کنی. صفحه‌ای که یک نوارِ اسکرولِ افقیِ مرموز پیدا کرده: می‌توانی کمی به پهلو بکشی‌اش، انگار چیزی از لبه بیرون زده، ولی به چشم پیدا نیست کدام. تازه‌کار به کد خیره می‌شود و حدس می‌زند. حرفه‌ای‌ها حدس نمی‌زنند؛ مقصر را پیدا می‌کنند — با روش. در این فصل سه روشِ واقعی یاد می‌گیری که هر سازندهٔ وب هر روز به‌کار می‌برد.

طرحِ یک صفحه که از قابِ نمایش پهن‌تر است: یک جعبهٔ آبیِ کناری از لبهٔ صفحه بیرون زده و یک نوارِ اسکرولِ افقیِ نارنجی پایینِ صفحه را روشن کرده، در حالی که بقیهٔ بلوک‌ها درست جا شده‌اند

آخر این فصل می‌توانی:

یک مسئله را با نصف‌کردن کوچک کنی تا مقصر گیر بیفتد
در زبانهٔ Computed ببینی مرورگر واقعاً چه مقداری روی یک عنصر گذاشته
عنصری را که layout را می‌شکند (یک اسکرولِ افقی) پیدا و رفعش کنی
به‌جای حدس‌زدن، مثلِ یک حرفه‌ای مقصریابی کنی

قبل از شروع#

از ترم ۲ فصل ۱۰: DevTools — Inspect، پنلِ Styles، و به‌خصوص زبانهٔ Computed. این فصل همان ابزار را برای شکارِ باگ به‌کار می‌گیرد.
از ترم ۲ فصل ۴: box model و اینکه width با box-sizing: border-box چه می‌کند.
از ترم ۳ فصل ۹: overflow — چیزی که از جعبه‌اش بیرون می‌زند.

فقط یک مرورگر لازم داری، یا همین آزمایشگاه.

۱. اشکال‌زدایی یعنی مقصریابی، نه حدس#

وقتی چیزی خراب است، دو جمله در ذهنت هست: «فکر می‌کنم باید فلان‌طور باشد» و «الان این‌طور است». اشکال‌زدایی یعنی فاصلهٔ این دو را پیدا کنی — نه اینکه ده تغییرِ تصادفی بدهی و امید داشته باشی یکی جواب بدهد. حرفه‌ای همیشه از یک سؤال شروع می‌کند: «مرورگر واقعاً چه می‌بیند، و کجا با انتظارِ من فرق دارد؟»

سه روشِ پایه‌اند: نصف کن تا بفهمی مقصر کجاست، Computed را بخوان تا بفهمی چه مقداری واقعاً اعمال شده، و عنصرِ خراب‌کار را پیدا کن. همین سه تا بیشترِ باگ‌های CSS را می‌گیرند. بیا روی همان اسکرولِ افقیِ آزمایشگاه به‌کارشان ببریم.

۲. روشِ اول: نصف‌کردن مسئله#

بزرگ‌ترین دشمنِ اشکال‌زدایی، وسعتِ مسئله است: وقتی صد خط CSS داری، مقصر می‌تواند هرکدام باشد. روشِ حرفه‌ای این است که مسئله را نصف کنی: نصفِ قاعده‌ها را موقتی خاموش کن و ببین باگ ماند یا رفت. اگر رفت، مقصر در نیمهٔ خاموش است؛ اگر ماند، در نیمهٔ روشن. هر بار نصف‌کردن، دامنهٔ جست‌وجو را نصف می‌کند — چند قدم و مقصر گیر می‌افتد.

خاموش‌کردنِ موقتیِ CSS با کامنت است: هرچه بینِ /* و */ بگذاری، مرورگر نادیده می‌گیرد، انگار اصلاً نوشته نشده.

/* in yek comment ast — morurgar khat-e daroonash ra ejra nemikonad */

بیا روی همین صفحه امتحانش کنیم. کلِ قاعدهٔ .callout را داخلِ /* و */ بگذار تا خاموش شود، بعد صفحه را نگاه کن.

✅ چک کن: تا .callout را کامنت کردی، نوارِ اسکرولِ افقی ناپدید شد. پس مقصر پیدا شد: عنصری که class اش .callout است دارد صفحه را پهن می‌کند. حالا کامنت را بردار تا صفحه به حالتِ خرابش برگردد و برویم ببینیم کدام property مقصر است.

۳. روشِ دوم: Computed، مقدارِ واقعی#

می‌دانیم مقصر .callout است، ولی این جعبه چند خط CSS دارد. کدام‌شان صفحه را پهن می‌کند؟ اینجا زبانهٔ Computed جواب می‌دهد — همان که در ترم ۲ دیدی: مقدارِ نهایی و واقعیِ هر property را نشان می‌دهد، بعد از اینکه کلِ cascade حساب شد.

DevTools را باز کن، با Inspect روی جعبهٔ .callout کلیک کن، و در زبانهٔ Computed دنبالِ width بگرد. عددی که می‌بینی این است:

.callout {
  width: 680px;
}

۶۸۰ پیکسل. صفحهٔ این آزمایشگاه بسیار باریک‌تر از این است، ولی این جعبه اصرار دارد ۶۸۰ پیکسل پهن باشد — پس از لبهٔ صفحه می‌زند بیرون و مرورگر مجبور می‌شود یک نوارِ اسکرول بدهد تا بشود بقیه‌اش را دید.

یک راهِ سریع‌ترِ دیدنش هم هست: در پنلِ Elements موس را روی عنصرها ببر؛ مرورگر جعبهٔ هرکدام را روی صفحه پررنگ می‌کند. روی .callout که بروی، پررنگی‌اش از لبهٔ صفحه بیرون می‌زند — با چشمِ خودت همان عنصرِ خراب‌کار را می‌بینی.

پنجرهٔ DevTools کنارِ صفحه: در درختِ عناصر، عنصرِ کناری انتخاب شده و جعبهٔ پررنگش روی صفحه از لبهٔ راست بیرون زده؛ در زبانهٔ کناری یک مقدارِ عددیِ بزرگ برای پهنا مشخص است

۴. رفعش کن، و صفحهٔ کامل#

مقصر یک width ثابت است. width: 680px یعنی «همیشه دقیقاً ۶۸۰ پیکسل»، حتی وقتی صفحه باریک‌تر از آن است — برای همین جعبه کوتاه نمی‌آید و صفحه را پهن می‌کند.

🔧 اگر کار نکرد: یک width ثابت را با max-width عوض کن. max-width: 680px یعنی «حداکثر ۶۸۰ پیکسل، ولی اگر جا کم بود کوچک‌تر شو». روی صفحهٔ پهن هنوز تا ۶۸۰ می‌رسد، ولی روی صفحهٔ باریک خودش را جمع می‌کند و جا می‌شود — پس دیگر از لبه بیرون نمی‌زند و نوارِ افقی می‌رود. این تلهٔ بسیار رایج است: هر جا اسکرولِ افقیِ ناخواسته دیدی، اول دنبالِ یک width ثابت یا یک تصویرِ بدونِ max-width بگرد که از صفحه بزرگ‌تر شده.

.callout {
  max-width: 680px;
}

این کلِ فرق بود: یک حرف. حالا هر دو فایلِ کاملِ صفحهٔ درست‌شده. اول index.html:

<!-- index.html -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>یادداشت‌های وب</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header class="site-header">
      <h1>یادداشت‌های وب</h1>
    </header>

    <main class="page">
      <article class="post">
        <h2>روزی که اسکرول‌بارِ افقی پیدا شد</h2>
        <p>امروز صفحه‌ام یک نوارِ اسکرولِ افقی گرفت و نمی‌دانستم از کجا آمده. یاد گرفتم چطور مقصر را پیدا کنم.</p>

        <aside class="callout">
          <h3>نکتهٔ روز</h3>
          <p>هر وقت صفحه بی‌دلیل پهن شد، دنبالِ عنصری بگرد که از پهنای صفحه بیرون زده — تقریباً همیشه یکی است.</p>
        </aside>

        <p>حالا این صفحه در هر پهنایی جا می‌شود و دیگر خبری از آن نوارِ افقی نیست.</p>
      </article>
    </main>

    <footer class="site-footer">
      <p>ساختهٔ من — ۱۴۰۵</p>
    </footer>
  </body>
</html>

و styles.css، با .callout درست‌شده:

/* styles.css */
* {
  box-sizing: border-box;
}

:root {
  --bg: #f6edda;
  --card: #ffffff;
  --ink: #2c2114;
  --muted: #6b6150;
  --brand: #2a6b93;
  --accent: #bc3e1c;
  --line: #d8ccae;
  --space: 20px;
}

body {
  margin: 0;
  font-family: Tahoma, sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  line-height: 1.9;
}

.site-header {
  padding: 16px var(--space);
  background-color: var(--card);
  border-block-end: 1px solid var(--line);
}

.site-header h1 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--brand);
}

.page {
  max-width: 640px;
  margin-inline: auto;
  padding: var(--space);
}

.post h2 {
  margin-block: 0 12px;
}

.callout {
  max-width: 680px;
  margin-block: var(--space);
  padding: var(--space);
  background-color: var(--card);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent);
  border-radius: 12px;
}

.callout h3 {
  margin-block: 0 8px;
  color: var(--accent);
}

.callout p {
  margin: 0;
  color: var(--muted);
}

.site-footer {
  padding-block: 20px;
  text-align: center;
  color: var(--muted);
  border-block-start: 1px solid var(--line);
}

✅ چک کن: صفحه را به پهلو بکش — دیگر تکان نمی‌خورد. نوارِ اسکرولِ افقی رفته و جعبهٔ کناری حالا داخلِ صفحه جا شده. با سه قدم رسیدی اینجا: نصف‌کردن گفت مقصر .callout است، Computed گفت مقصر width است، و یک max-width رفعش کرد.

🤖 با AI: CSS خراب را به دستیار AI ات بده و بپرس «چرا این صفحه یک اسکرولِ افقی دارد؟». گاهی درست جواب می‌دهد، ولی خیلی وقت‌ها با اعتمادبه‌نفس چیزِ دیگری را مقصر می‌کند (margin یا overflow) که اصلاً ربطی ندارد. جوابش را دربست نپذیر — همان‌جا در DevTools موس را روی عناصر ببر و ببین کدام جعبه واقعاً از لبه بیرون می‌زند. مرورگر مدرک دارد، AI فقط حدس. این بهترین شکلِ «AI هم اشتباه می‌کند» است.

واژه‌های تازهٔ این فصل#

کلمه	تلفظ به حروف فارسی	یعنی چه
debugging	دیباگینگ	مقصریابیِ روشمندِ یک خرابی، به‌جای حدس‌زدن
comment	کامِنت	متنی بینِ `/` و `/` که مرورگر اجرا نمی‌کند؛ برای خاموش‌کردنِ موقتیِ کد
Computed	کامپیوتِد	زبانهٔ DevTools که مقدارِ نهایی و واقعیِ هر property را نشان می‌دهد
overflow	اورفلو	وقتی محتوا از جعبه‌اش بیرون می‌زند

تمرین‌ها

اول خودت فکر کن یا امتحان کن — بعد اینجا را باز کن.

در فصل بعد#

الان ابزارِ مقصریابی را داری: نصف‌کردن، Computed، و پیداکردنِ عنصرِ خراب‌کار. این آخرین مهارتِ تازه پیش از پروژهٔ بزرگ بود. دو فصلِ بعد، پروژهٔ نهاییِ دوره است: در فصلِ بعد یک سایتِ چندصفحه‌ای واقعی می‌سازی که همهٔ ترم‌ها را کنارِ هم می‌گذارد — semantic، layout، responsive، dark mode، component و token — و همین مهارتِ اشکال‌زدایی هم کنارت می‌ماند تا هر جا گیر کردی، مقصر را پیدا کنی نه اینکه حدس بزنی.

به آخر این فصل رسیدی!

اگر ساختی و جواب داد، این دکمه مال توست.