بررسی صفحه با ابزار توسعه دهنده مرورگر و رفع خطا | درس 52 + پروژه درس

بررسی صفحه با ابزار توسعه دهنده مرورگر به شما کمک می کند به جای تغییر تصادفی CSS، علت مشکل را پیدا کنید. وقتی رنگ متن درست نیست یا کارت از عرض موبایل بیرون می زند، اضافه کردن چند قانون تازه همیشه راه حل مناسبی نیست. در درس 52 دوره HTML و CSS ارومیا دیزاین، از مشاهده نشانه شروع می کنیم، یک فرضیه می سازیم و بعد اصلاح را در فایل اصلی ذخیره می کنیم.

در درس 51 و دسترس پذیری در طراحی خوانایی، فوکوس و کاهش حرکت را بررسی کردیم. حالا یاد می گیریم ابزار مرورگر را برای پیدا کردن خطاهای واقعی به کار ببریم. نمونه ها بر اساس Chrome DevTools توضیح داده می شوند؛ نام و جای برخی گزینه ها ممکن است با نسخه مرورگر تغییر کند. در مرورگرهای دیگر نیز ابزارهای مشابه وجود دارند.

پروژه این درس چه خطاهایی دارد؟

در ZIP دو صفحه وجود دارد: index.html با سه ایراد عمدی و fixed.html با نسخه پاسخ. هر دو صفحه base.css را بارگذاری می کنند. نسخه تمرین bugs.css و نسخه پاسخ solution.css را می خواند. هدف این است که پیش از دیدن پاسخ، علت نبود خط زیر عنوان، رنگ نادرست متن و سرریز کارت در موبایل را تشخیص دهید.

صفحه بدون اینترنت اجرا می شود و خطاها آموزشی هستند. برای شروع فقط index.html را باز کنید. نسخه اصلاح شده را بعد از ثبت حدس خود ببینید تا تفاوت «پیدا کردن علت» و «کپی کردن جواب» روشن شود. فایل README مسیر بررسی و نتیجه مورد انتظار هر بخش را توضیح می دهد.

مرحله 1: مشکل را دقیق توصیف کنید

قبل از باز کردن ابزار، بنویسید چه چیزی انتظار دارید و چه چیزی می بینید. مثلا «در عرض 320 پیکسل، کارت از سمت چپ صفحه بیرون می زند» توصیف قابل آزمایش است. عبارت «صفحه خراب است» برای انتخاب مسیر عیب یابی کافی نیست. عرض نمایشگر، وضعیت هاور یا فوکوس و صفحه ای که مشکل در آن رخ می دهد را مشخص کنید.

در هر مرحله فقط یک عامل را تغییر دهید. اگر همزمان عرض، padding و overflow را عوض کنید، ممکن است نشانه پنهان شود اما علت اصلی باقی بماند. بعد از تشخیص علت، اصلاح را در محل مناسب انجام دهید و بخش های مرتبط را هم دوباره بررسی کنید.

مرحله 2: عنصر مورد نظر را Inspect کنید

روی عنوان کارت راست کلیک و Inspect را انتخاب کنید. در Chrome می توانید از میانبر Ctrl+Shift+C در ویندوز و لینوکس یا Command+Shift+C در مک استفاده کنید و سپس عنصر را انتخاب کنید. بخش Elements ساختار فعلی DOM را نشان می دهد. آن را با فایل HTML مقایسه کنید و نام کلاس، والد و جای عنصر را ببینید.

<h2 class="card__title">عنوان کارت آموزشی</h2>

نام کلاس عنوان card__title است؛ دو زیرخط بخشی از نام هستند. انتخابگر card-title به این عنصر تطبیق ندارد. اگر قانونی را اصلا در Styles نمی بینید، پیش از بحث اولویت بررسی کنید انتخابگر، کلاس و فایل درست هستند یا نه. برای مرور این رابطه، درس انتخابگرهای CSS را بخوانید.

.card-title { border-bottom: 3px solid #075985; }
/* Correct selector: */
.card__title { border-bottom: 3px solid #075985; }

خط اول در bugs.css است و عنوان را هدف نمی گیرد. در solution.css انتخابگر اصلاح شده آمده است. نسخه پاسخ را به جای فایل خطادار بارگذاری می کنیم تا قواعد قدیمی روی نتیجه باقی نمانند. اضافه کردن فایل پاسخ بدون بررسی ترتیب و تعارض، روش مناسبی برای یک پروژه واقعی نیست.

مرحله 3: Styles و Computed را کنار هم بخوانید

Styles برای دیدن قواعد مرتبط، محل تعریف و وضعیت اعلان ها مفید است. Computed مقدارهای حل شده ای را نشان می دهد که مرورگر برای عنصر گزارش می کند؛ مثلا رنگ به صورت rgb نمایش داده می شود. همه مقدارهای Computed لزوما همان متن نوشته شده در فایل نیستند و بعضی ویژگی ها با مقدار حل شده یا اندازه محاسبه شده نمایش داده می شوند.

یک اعلان خط خورده اغلب از رقابت با اعلان دیگری کنار رفته است، اما هر نشانه غیرفعال معنی یکسانی ندارد. اعلان نامعتبر یا ویژگی بی اثر در چیدمان فعلی هم ممکن است علامت جداگانه داشته باشد. روی علامت یا توضیح ابزار مکث کنید و ویژگی برنده را در Computed و پیوند منبع دنبال کنید.

#demo .lead { color: #991b1b; }
.lead { color: #075985; }

در مثال ما، هر دو اعلان معمولی از یک منشا و بدون لایه متفاوت هستند. انتخابگر دارای ID بر انتخابگر یک کلاس اولویت دارد، حتی اگر قانون کلاس بعدتر نوشته شده باشد. پس «خط آخر همیشه برنده است» قاعده درستی نیست. در نسخه پاسخ، قانون متعارض حذف شده و رنگ عمومی باقی مانده است. جزئیات بیشتر در درس آبشار و اولویت قوانین CSS آمده است.

برای آزمایش فرضیه، تیک اعلان رنگ متعارض را در Styles بردارید. اگر رنگ مورد انتظار ظاهر شد، علت روشن تر می شود. این کار فقط آزمایش در مرورگر است؛ بعد باید فایل منبع را اصلاح کنید. برای حل این نمونه نیازی به important ندارید.

مرحله 4: Box Model را برای سرریز بررسی کنید

کارت پروژه در نسخه خطادار width برابر 360px، padding برابر 24px در هر طرف و border برابر 2px در هر طرف دارد. با content-box، عرض خارجی کارت بدون margin برابر 412px می شود. این اندازه در نمایشگر 320 پیکسل از ظرف اصلی بزرگ تر است. نمودار Box Model کمک می کند عرض محتوا را با فاصله داخلی و کادر اشتباه نگیرید.

.card {
  width: 100%;
  max-width: 420px;
  padding: 24px;
  border: 2px solid #64748b;
  box-sizing: border-box;
}

در پاسخ، width برابر 100% است تا کارت با ظرف هماهنگ شود و max-width آن را در عرض های بزرگ محدود می کند. border-box باعث می شود padding و border داخل عرض تعیین شده حساب شوند. این اصلاح مربوط به همین نمونه است؛ برای هر سرریز باید علت واقعی را بررسی کنید. مفهوم پایه در درس مدل جعبه CSS توضیح داده شده است.

استفاده از overflow-x: hidden روی کل صفحه ممکن است بخش بیرون زده را پنهان کند و همزمان محتوا یا نشانگر فوکوس را ببرد. ابتدا عنصر بیرون زده را پیدا کنید. جدول و کد عریض گاهی به اسکرول داخلی نیاز دارند، اما کارت این تمرین باید در ظرف جا شود. برای تفاوت این راه حل ها، درس مدیریت overflow را مرور کنید.

مرحله 5: حالت موبایل را با اندازه مشخص بررسی کنید

Device Toolbar را باز کنید و به جای اتکا به نام یک گوشی، عرض مشخصی مثل 320 یا 768 پیکسل را آزمایش کنید. تغییر عرض می تواند فعال شدن media query، شکستن متن و محدود شدن فضای کارت را نشان دهد. عرض گزارش شده در ابزار را ثبت کنید تا مقایسه قبل و بعد معنی داشته باشد.

شبیه سازی مرورگر جای آزمایش گوشی واقعی را نمی گیرد. فونت، ورودی لمسی، صفحه کلید مجازی و رفتار مرورگر دستگاه می توانند متفاوت باشند. بعد از اصلاح، حالت های ماوس و صفحه کلید را هم بررسی کنید. در پروژه، پیوند «رفتن به چک لیست» باید با Tab فوکوس واضح داشته باشد و با Enter کار کند.

اگر فایل CSS بارگذاری نشده باشد چه کنیم؟

وقتی بخش بزرگی از سبک ها غایب است، پیش از ویرایش انتخابگرها مسیر link را بررسی کنید. نام فایل، حروف بزرگ و کوچک، پوشه و نشانی درخواست اهمیت دارند. در نسخه میزبانی شده، Network را باز کنید، صفحه را دوباره بارگذاری کنید و درخواست فایل CSS را از نظر نشانی، وضعیت و نوع پاسخ ببینید. پاسخ HTML به جای CSS می تواند نشانه مسیر اشتباه یا هدایت به صفحه دیگری باشد.

در اجرای file:// رفتار و پیام های Network می تواند با سایت HTTP متفاوت باشد. برای تمرین پایه این درس نیازی به راه اندازی سرور نیست، اما برای بررسی وضعیت HTTP باید صفحه را از یک محیط میزبانی مناسب باز کنید. پیام Console هم می تواند سرنخ بدهد، ولی نبود خطای Console ثابت نمی کند HTML و CSS بدون ایراد هستند.

تغییر DevTools را در فایل واقعی ذخیره کنید

ویرایش معمول Styles در حافظه همان صفحه انجام می شود و با بارگذاری دوباره معمولا از بین می رود. در این تمرین، اعلان درست را در ویرایشگر به فایل خود منتقل کنید، فایل را ذخیره کنید و صفحه را دوباره بازخوانی کنید. ابزارهایی مانند Local Overrides یا Workspaces می توانند رفتار ذخیره سازی متفاوتی ایجاد کنند؛ تا وقتی تنظیم نشده اند، ویرایش ابزار را معادل ذخیره فایل فرض نکنید.

پنل Changes برای مرور تغییرهای انجام شده در ابزار مفید است. پیش از کپی، ببینید آیا فقط آزمایش موقت انجام داده اید یا اصلاح نهایی. بعد از انتقال، قواعد آزمایشی اضافی و تعارض های بی دلیل را حذف کنید. درس بهینه سازی CSS کمک می کند نتیجه عیب یابی به مجموعه ای از وصله های تکراری تبدیل نشود.

تمرین مستقل و روش بررسی پاسخ

1. در index.html سه ایراد را بدون باز کردن solution.css پیدا کنید و برای هر مورد یک فرضیه بنویسید.
2. عنوان را Inspect کنید و نام کلاس واقعی را یادداشت کنید.
3. روی متن lead، رنگ نهایی و قانون برنده را بررسی کنید؛ قانون متعارض را موقتا خاموش کنید.
4. عرض را 320 پیکسل کنید و اندازه خارجی کارت را از مدل جعبه بخوانید.
5. اصلاح ها را در یک کپی از bugs.css ذخیره کنید و صفحه را دوباره بارگذاری کنید.
6. در پایان fixed.html را باز کنید و راه حل را با کار خود مقایسه کنید.

پاسخ این پروژه در solution.css است و fixed.html آن را به جای bugs.css می خواند. در نسخه پاسخ، عنوان خط زیرین دارد، متن lead آبی تیره است و کارت باید در ظرف واکنش گرا قرار بگیرد. عرض های 320، 768 و 1280 و بزرگ نمایی 200 درصد را بررسی کنید. ظاهر اولیه تنها بخش آزمایش است؛ فوکوس و خوانایی را هم نگه دارید.

پرسش های متداول

چرا تغییر رنگ بعد از Refresh از بین رفت؟

احتمالا تغییر را فقط در Styles انجام داده اید. آن را در فایل منبع ذخیره و بارگذاری دوباره را بررسی کنید.

چرا قانون جدید در Styles دیده نمی شود؟

تطبیق انتخابگر، عنصر انتخاب شده، مسیر فایل و شرط های فعال را بررسی کنید. نبود قانون لزوما به معنی پایین بودن اولویت آن نیست.

آیا با Inspect می توان کد اصلی هر سایت را تغییر داد؟

ویرایش عادی Inspect فقط نمایش محلی شما را تغییر می دهد. فایل سرور بدون دسترسی و سازوکار ویرایش مربوط تغییر نمی کند.

درس قبلی: دسترس پذیری در طراحی

منابع تکمیلی: مرجع CSS در Chrome DevTools، تشخیص اعلان های غیرفعال و متعارض و پیگیری تغییرها در Changes.