DevTools: ابزار واقعی

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

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

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

• DevTools را باز کنی و با Inspect هر عنصرِ صفحه را انتخاب کنی
• در پنل Styles ببینی چه قاعده‌هایی به عنصر می‌خورند و کدام‌شان خط‌خورده است
• بفهمی چرا یک استایل اعمال نشد، فقط با دیدنِ قاعدهٔ بازنده
• در Computed مقدارِ نهاییِ یک property را بخوانی
• یک مقدار را زنده در مرورگر عوض کنی و نمودارِ box model را بخوانی

قبل از شروع#

• از فصل ۳: cascade و specificity — این فصل همان را دیدنی می‌کند؛ قاعدهٔ خط‌خورده یعنی قاعده‌ای که در specificity باخته.
• از فصل ۴: box model — پنلِ جعبه‌ایِ DevTools همان content/padding/border/margin را نشان می‌دهد.

فقط یک مرورگر لازم داری. DevTools همان مرورگر است — چیزی نصب نمی‌کنی.

۱. چرا اصلاً DevTools؟#

تا اینجا چرخهٔ کارت این بود: CSS را عوض کن، صفحه را دوباره بارگذاری کن، ببین چه شد. اگر نتیجه آن چیزی نبود که می‌خواستی، دوباره حدس بزن و دوباره امتحان کن. این برای کارهای ساده جواب می‌دهد، ولی وقتی چند قاعده سرِ یک عنصر با هم می‌جنگند، حدس‌زدن کُند و خسته‌کننده می‌شود.

DevTools این را عوض می‌کند. به‌جای این‌که از بیرون به صفحه نگاه کنی، از داخل نگاهش می‌کنی: می‌بینی مرورگر برای هر عنصر کدام قاعده‌ها را در نظر گرفته، به چه ترتیبی، و در آخر چه مقداری را واقعاً به‌کار برده. این تفاوتِ بین «فکر می‌کنم این باید آبی باشد» و «می‌بینم که مرورگر آبی گذاشته» است.

۲. باز کردن DevTools و انتخاب یک عنصر#

باز کردنش دو راه دارد، هر کدام راحت‌تر بود:

1. کلید F12 را بزن.
2. یا روی هر جای صفحه راست‌کلیک کن و گزینهٔ «Inspect» (در بعضی مرورگرها «بررسی») را بزن.

یک پنجرهٔ تازه کنارِ صفحه (یا پایینش) باز می‌شود. مهم‌ترین بخشش که اول می‌بینی، Elements نام دارد: همان HTMLِ صفحه، ولی به‌صورتِ یک درختِ تاشو. این دقیقاً همان تگ‌هایی است که خودت نوشته‌ای — <article>، <h2>، <p> — و می‌توانی شاخه‌هایش را باز و بسته کنی.

برای انتخابِ یک عنصرِ خاص، دو راه داری: یا در همان درختِ Elements رویش کلیک کنی، یا — راحت‌تر — دکمهٔ کوچکِ Inspect (شکلِ یک فلش روی یک مربع، معمولاً گوشهٔ بالای پنل) را بزنی و بعد روی همان چیزی در صفحه که می‌خواهی کلیک کنی. مرورگر همان لحظه آن عنصر را در درخت روشن می‌کند.

✅ چک کن: در درختِ Elements باید <h2 id="headline" class="title"> را روشن ببینی — همان عنصری که رویش کلیک کردی. اگر عنصرِ دیگری روشن شده، دوباره با دکمهٔ Inspect دقیقاً روی خودِ عنوان کلیک کن.

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

۳. پنل Styles و قاعدهٔ خط‌خورده#

وقتی یک عنصر را انتخاب می‌کنی، کنارِ درختِ Elements یک پنل به‌نامِ Styles می‌بینی. این پنل همهٔ قاعده‌هایی را که به این عنصر می‌خورند نشان می‌دهد، به‌ترتیبِ اهمیت از بالا به پایین.

حالا آن نکتهٔ عجیب را کشف می‌کنیم. به عنوانِ کارت نگاه کن: در CSS، ما یک قاعده نوشتیم که می‌گوید .title { color: #1f9d55 } — یعنی سبز. ولی عنوان روی صفحه قرمز است، نه سبز! چرا استایلی که نوشتیم اعمال نشد؟

تا این فصل، جوابِ این سؤال یک حدس بود. حالا با DevTools جوابش را می‌بینی. در پنل Styles، وقتی <h2> انتخاب شده، دو قاعده می‌بینی که هر دو color را ست کرده‌اند:

#headline {
  color: #d64545;
}

.title {
  color: #1f9d55;   /* روی این خط، یک خط کشیده شده */
}

در پنل، رنگِ سبزِ .title یک خط روی خودش دارد — انگار قلم کشیده‌اندش. این خط دقیقاً یعنی: «این قاعده به این عنصر می‌خورد، ولی در cascade باخته و اعمال نشده». قاعدهٔ برنده، #headline است که بالای آن نشسته.

🔧 اگر کار نکرد: عنوان سبز نشد و قرمز ماند؟ حالا دیگر لازم نیست حدس بزنی — DevTools جواب را نشانت داده. با همان روشِ سه‌ستونیِ فصل ۳ مقایسه‌شان کن: #headline در ستونِ id یک ۱ دارد، ولی .title در آن ستون صفر است. از چپ که مقایسه کنی، همان ستونِ id کار را تمام می‌کند — #headline می‌بَرد و رنگِ .title خط می‌خورد. راهِ حلِ درست این است که با id نجنگی: یا color را از #headline بردار، یا اصلاً برای رنگ‌دادن سراغِ id نرو و روی class کار کن. همان درسِ فصل ۳، این‌بار با چشمِ خودت.

این مهم‌ترین کاری است که DevTools برایت می‌کند: cascade را که تا حالا یک قانونِ ذهنی بود، دیدنی می‌کند. هر وقت استایلی «باید» اعمال شود و نمی‌شود، اولین کار این است — عنصر را Inspect کن و دنبالِ قاعدهٔ خط‌خورده بگرد.

قبل از ادامه، جواب بده: اگر در پنل Styles یک property را با یک خط روی خودش ببینی، یعنی چه؟

یعنی آن قاعده به عنصر می‌خورد ولی در cascade باخته؛ یک قاعدهٔ قوی‌ترِ دیگر همان property را با مقدارِ دیگری برده. مقدارِ خط‌خورده، همان چیزی نیست که روی صفحه می‌بینی.

۴. Computed: مقدارِ نهایی، بدون جنگ‌ودعوا#

گاهی چند قاعده سرِ یک property می‌جنگند و دنبال‌کردنِ برنده در پنل Styles وقت‌گیر می‌شود. برای این، کنارِ Styles یک زبانهٔ دیگر هست: Computed. این زبانه نتیجهٔ نهایی را نشان می‌دهد — یعنی بعد از این‌که کلِ cascade و inheritance حساب شد، مرورگر دقیقاً چه مقداری را برای هر property به‌کار برده.

روی همان <h2> که انتخاب کرده‌ای، زبانهٔ Computed را باز کن و دنبالِ color بگرد. مقداری که آنجا می‌بینی، همان قرمزِ #d64545 است — نه سبز. Computed حرفِ آخر را می‌زند: مهم نیست چند قاعده چه می‌خواستند؛ این آن چیزی است که واقعاً اعمال شده.

💡 نکته: پنل Styles می‌گوید «چه قاعده‌هایی هستند و کدام برنده شد»؛ Computed می‌گوید «نتیجهٔ نهایی چه شد». وقتی گیج شدی که چرا رنگ یا اندازه‌ای عجیب است، Computed سریع‌ترین راه برای دیدنِ حقیقت است.

۵. تغییر زنده و نمودارِ box model#

بهترین بخشِ DevTools این است که فقط تماشاگر نیستی — می‌توانی همان‌جا دست ببری. در پنل Styles، روی مقدارِ یک property کلیک کن (مثلاً روی #d64545 در قاعدهٔ #headline) و یک مقدارِ تازه تایپ کن، مثلاً #5a4bff. تا کلید را بزنی، عنوانِ کارت فوری بنفش می‌شود، بدون هیچ بارگذاریِ دوباره.

✅ چک کن: تا مقدارِ تازه را تایپ کردی و کلید زدی، عنوانِ کارت فوری رنگ عوض کرد، بدون هیچ بارگذاریِ دوباره. حالا صفحه را دوباره بارگذاری کن و ببین رنگ به همان قرمزِ اول برگشت — چون تغییر فقط در مرورگر بود، نه در فایل.

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

یک ابزارِ دیدنیِ دیگر هم هست که مستقیم به فصل ۴ وصل می‌شود: نمودارِ box model. آن را پایینِ زبانهٔ Computed (یا در بعضی مرورگرها پایینِ پنل Styles) می‌بینی — یک نمودارِ مستطیل‌های تودرتو. از داخل به بیرون: content، بعد padding، بعد border، بعد margin — دقیقاً همان چهار لایه‌ای که در فصل ۴ ساختی. روی .card را Inspect کن و این نمودار را نگاه کن: چون در CSS نوشتیم padding: 20px، در نمودار باید یک لایهٔ padding با عددِ 20 دورِ content ببینی. اگر یک عنصر فاصلهٔ عجیبی گرفته، این نمودار سریع‌ترین راه برای دیدنِ این است که آن فاصله از padding آمده یا از margin.

🤖 با AI: آن دو قاعدهٔ رقیب را — #headline { color: ... } و .title { color: ... } — به دستیار AI ات بده و بپرس «کدام‌یک روی <h2> برنده می‌شود و چرا؟». حالا جوابش را با چیزی که در پنل Styles می‌بینی بسنج: قاعدهٔ بازنده همان است که خط خورده. اگر AI جوابِ درست را داد، DevTools تأییدش می‌کند؛ اگر اشتباه گفت، خودِ مرورگر مدرکِ خلافش را نشانت می‌دهد. این بهترین حالت است — یک منبعِ حقیقت که همیشه دمِ دستت است.

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

کلمه	تلفظ به حروف فارسی	یعنی چه
DevTools	دِوتولز	ابزارِ سازندگانِ وب داخلِ مرورگر برای دیدن و آزمایشِ صفحه
Inspect	اینسپکت	انتخابِ یک عنصرِ صفحه برای دیدنِ HTML و استایلش
Elements	اِلِمِنتس	پنلی که HTMLِ صفحه را به‌صورتِ درختِ تاشو نشان می‌دهد
Styles	استایلز	پنلی که همهٔ قاعده‌های CSSِ یک عنصر را نشان می‌دهد
Computed	کامپیوتِد	زبانه‌ای که مقدارِ نهایی و واقعیِ هر property را نشان می‌دهد

در فصل بعد#

حالا هم ابزارِ ساختن را داری (رنگ، جعبه، فاصله، تزئین، متغیر) و هم ابزارِ اشکال‌زدایی (DevTools). وقتِ آن رسیده که همه‌چیزِ این ترم را کنار هم بگذاری. فصلِ بعد — آخرین فصلِ این ترم — همان صفحهٔ semantic ای را که در ترم ۱ ساختی برمی‌داری و از صفر با CSS زنده‌اش می‌کنی: theme، فونت، فاصله و تزئین، همه با هم. مفهومِ تازه‌ای در کار نیست؛ فقط ترکیبِ چیزهایی که بلدی، تا اولین صفحهٔ واقعاً خوش‌ظاهرت را بسازی.