نحوه استفاده از Chrome DevTools برای اشکال زدایی HTML/CSS در صفحه وب خود – مقدمه برای مبتدیان

مقاله امروز عمدتاً برای کسانی است که سفر خود را در فناوری اطلاعات آغاز می کنند. اخیراً با افرادی که اولین زبان برنامه نویسی خود را یاد می گیرند یا می خواهند حرفه خود را به فناوری تغییر دهند بسیار کار می کنم و متوجه شدم که آموزش های زیادی نحوه ساختن مطالب را نشان می دهند اما تقریباً هرگز نحوه خواندن کدهای موجود، اشکال زدایی اشتباهات یا یافتن راهی برای ساختن مطالب را نشان می دهند. رفع یک باگ و تعجب آور است زیرا در “زندگی واقعی” ما اغلب با پایگاه کد موجود (افزودن یک ویژگی جدید، رفع اشکالات، تغییر منطق تجاری و غیره) به جای نوشتن کد از ابتدا کار می کنیم. همچنین، دانستن راه‌هایی برای یافتن مشکل در کدتان بسیار مهم است – نه تنها گام به گام از آموزش پیش بروید. در این مقاله، من می‌خواهم برخی از ویژگی‌های موجود به صورت رایگان در مرورگر کروم را به شما نشان دهم که می‌تواند به شما در رفع این مشکلات کمک کند. امیدوارم به شما انگیزه دهد که بیشتر با برنامه نویسی آزمایش کنید و توسعه دهنده بهتری شوید!

Chrome DevTools چیست؟

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

روی هر عنصر در صفحه کلیک راست کرده و گزینه Inspect را از منو انتخاب کنید
از منوی 3 نقطه در سمت راست بالای مرورگر استفاده کنید -> ابزارهای بیشتر و بعد را انتخاب کنید -> گزینه ابزارهای توسعه دهنده
استفاده از میانبر (ctrl + shift + I در لینوکس/ویندوز یا cmd + shift + I در مک)
پس از آن، پنلی مشابه آنچه در تصویر زیر قابل مشاهده است خواهید دید.

نکته: پانل شما می تواند به عنوان یک پنجره جداگانه یا در سمت راست / چپ / پایین صفحه قابل مشاهده باشد. اگر می خواهید آن را تغییر دهید، منوی 3 نقطه را در قسمت سمت راست بالای پانل Chrome DevTools پیدا کنید و روی حالت ترجیحی در گزینه Dock side کلیک کنید.

برگه‌ها و گزینه‌های زیادی در دسترس هستند، اما در مقاله امروز، ما بر اساسی‌ترین آنها تمرکز خواهیم کرد –Elements. بیشتر برای پیش نمایش ساختار HTML و استایل صفحه استفاده می شود. اینجا چه کار می توانیم بکنیم؟

پیش نمایش ساختار HTML کل صفحه

بله، قبلاً گفتم اما اجازه دهید این موضوع را کمی گسترش دهیم. همانطور که در تب Elements مشاهده می کنید، می توانید پیش نمایش تمام گره های HTML قابل مشاهده در صفحه را مشاهده کنید. چرا مهم است؟ می‌توانید به‌عنوان مثال بررسی کنید که آیا همه مؤلفه‌ها به درستی نمایش داده می‌شوند (این یک اشتباه فوق‌العاده محبوب در میان مبتدیان است که یک مؤلفه جداگانه برای برخی ویجت‌ها ایجاد می‌کنند و فراموش می‌کنند که از آنها در صفحه استفاده کنند). همچنین می توانید ترتیب عناصر در صفحه و لانه (کدام عنصر در داخل کدام است) را بررسی کنید. برای گسترش یا جمع کردن گره، فقط از فلش ابتدای خط استفاده کنید.

پیش نمایش یک گره خاص

هنگامی که برخی از مشکلات را در صفحه وب خود مشاهده می کنید، ممکن است بخواهید به جای نگاه کردن به کل صفحه، بر روی یک ناحیه/گره خاص تمرکز کنید. راه های مختلفی برای انجام این کار وجود دارد: فقط می توانید روی عنصر موجود در صفحه کلیک راست کرده و آن را انتخاب کنید Inspect گزینه ای از منو (حتی اگر Chrome DevTools در صفحه باز نشود کار می کند)، می توانید عنصر را در پیش نمایش Elements با گسترش بخش ها پیدا کنید، یا می توانید روی نماد انتخابگر در Chrome DevTools (در سمت چپ بالای صفحه) کلیک کنید. پانل) و گره موجود در صفحه را انتخاب کنید.

پس از انتخاب گره داده شده در پیش نمایش Elements در پنل DevTools هایلایت می شود، بنابراین می توانید ببینید که دقیقا کدام تگ HTML مسئول نمایش قسمت داده شده است. این عنصر همچنین با اطلاعات اضافی در صفحه برجسته می شود – قسمت حاشیه با رنگ نارنجی مشخص می شود، به رنگ سبز قرار می گیرد و یک پاپ آپ کوچک پیش نمایشی از یک ظاهر طراحی شده روی عنصر را نشان می دهد. می توانید آن را در تصویر زیر مشاهده کنید

چه چیزی می توانیم اینجا ببینیم؟ “چگونه برنامه نویسی را در سال 2022 شروع کنیم” یک عنصر هدر است که با یک تگ h1 با id=”32bb” مشخص شده است و کلاس های سبک زیادی اعمال می شود (نگران نامگذاری آنها نباشید – این اثر کوچک سازی و کوچک سازی جاوا اسکریپت در منبع ایجاد صفحه است. کد کوچکتر، بارگذاری سریعتر و سرقت آن توسط دیگر توسعه دهندگان دشوارتر است :)). پنجره بازشو خلاصه‌ای از استایل را به ما نشان می‌دهد – رنگ، فونت، حاشیه‌ها و کنتراست عنصر. ناحیه نارنجی، حاشیه بالایی اعمال شده برای این عنصر را نشان می دهد (توجه کنید که در DevTools یک کادر رنگارنگ در سمت راست قابل مشاهده است – از این قسمت، می توانیم بخوانیم که حاشیه بالایی 19.2 پیکسل است). همچنین بخشی با اطلاعات مربوط به همه سبک‌های اعمال شده در این عنصر وجود دارد. در بخش زیر کمی بیشتر در مورد استایل می نویسم، اما از اینکه کمی با این گزینه ها بازی کنید نترسید. شما نمی توانید با آن چیزی را خراب کنید – قول می دهم (تمام تغییرات شما پس از بارگیری مجدد صفحه حذف خواهند شد).

پنهان/ویرایش/حذف/تکثیر عنصر داده شده

وقتی می‌خواهید به سرعت برخی از تغییرات را در صفحه پیش‌نمایش کنید، می‌توانید با استفاده از Chrome DevTools، عناصر را مستقیماً در صفحه تغییر دهید. فقط گره مورد نظر خود را انتخاب کنید و در تب Elements روی آن کلیک راست کنید یا روی منوی 3 نقطه در ابتدای خط با عنصر کلیک کنید. پس از آن، یک منو با گزینه های زیادی مشاهده خواهید کرد، به عنوان مثال برای مخفی کردن/ویرایش/حذف یا کپی کردن یک عنصر مشخص، افزودن یک ویژگی، ویرایش به عنوان HTML و غیره. یکی را که به آن علاقه دارید انتخاب کنید و تغییرات بصری صفحه را مشاهده کنید. .

مهم: این فقط یک پیش نمایش است، تغییرات شما پس از بارگیری مجدد صفحه ذخیره نمی شود.

استایل عنصر را تغییر دهید

این یکی از گزینه های مورد علاقه من در اینجا است – پیش نمایش تغییرات استایل در عنصر. لازم نیست تغییرات را به صورت محلی انجام دهید و هر بار که یک ویژگی را تغییر می دهید منتظر بمانید تا صفحه را دوباره بارگیری کنید. یا می‌توانید پیش‌نمایش کنید که صفحه‌ای که به آن دسترسی ندارید چگونه به نظر می‌رسد، مثلاً با رنگ‌های مختلف فونت. فقط گره داده شده را همانطور که در بخش های قبلی توضیح دادم انتخاب کنید و به برگه Styles نزدیک به درخت HTML نگاه کنید. در نمای اول، می توانید تمام کلاس های CSS اعمال شده روی عنصر را مشاهده کنید، می توانید مقادیر آنها را تغییر دهید (فقط روی مقدار دوبار کلیک کنید)، ویژگی های جدید اضافه کنید و غیره. همچنین می توانید تیک کادر نزدیک به ویژگی را بردارید تا غیرفعال شود. قانون داده شده هنگامی که برخی از قوانین خط خورده است به این معنی است که برخی از ویژگی های دیگر آن را لغو می کنند.

هنگامی که امکان پذیر باشد، پیشنهاد خودکار مقادیر موجود را برای ویژگی داده شده پیشنهاد می کند (گاهی با نکات بصری در مورد معنای آنها)، بنابراین زمانی که نام دقیق ارزش ویژگی را به خاطر نمی آورید، به عنوان مثال، یک راه آسان برای یافتن گزینه صحیح است!

در یکی از نسخه‌های اخیر، کروم همچنین اطلاعاتی را اضافه کرد که نمی‌توان برخی از قوانین را برای یک عنصر خاص اعمال کرد. شما می توانید آن را با حروف خاکستری و نماد “i” نزدیک به مقدار تشخیص دهید. هنگامی که ماوس را روی نماد “i” نگه می‌دارید، پنجره‌ای را مشاهده می‌کنید که توضیح می‌دهد چرا یک قانون داده شده نمی‌تواند اعمال شود.

مهم: به یاد داشته باشید که این تغییرات ذخیره نمی شوند و پس از بارگیری مجدد صفحه حذف خواهند شد!
بسیاری از گزینه‌های دیگر برای استایل‌سازی در اینجا وجود دارد (بنابراین اکیداً توصیه می‌کنیم فقط با آن بازی کنید)، اما من از شما می‌خواهم که روی یک چیز دیگر تمرکز کنید – در نزدیکی زبانه ‘Styles’، تب ‘Computed’ نیز وجود دارد. می‌توانید از آن برای پیش‌نمایش آسان همه قوانین اعمال شده بر روی عنصر استفاده کنید، بدون اینکه آنها را به کلاس‌های CSS تقسیم کنید.

وضعیت عنصر را تغییر دهید

گاهی اوقات عناصر موجود در صفحه بسته به وضعیتشان متفاوت به نظر می رسند – به عنوان مثال پیوند بازدید شده متفاوت از پیوند بازدید نشده به نظر می رسد، دکمه ممکن است رنگ پس زمینه متفاوتی در شناور ماوس داشته باشد، و غیره. خوشبختانه، شما به راحتی می توانید با حالت های مختلف عناصر نیز بازی کنید. فقط گره داده شده را انتخاب کنید، دکمه :hov را در تب Styles پیدا کنید و کادر انتخاب حالتی را که می خواهید مجبور کنید تغییر دهید. به همین دلیل، حتی اگر به عنوان مثال نشانگر ماوس روی عنصر را متوقف کنید، همچنان می‌توانید سبک‌های اعمال شده در این حالت را پیش‌نمایش و ویرایش کنید.

ترتیب مجدد عناصر در صفحه

گاهی اوقات ممکن است بخواهید عناصر صفحه وب خود را مجدداً مرتب کنید، اما مطمئن نیستید که کدام ترتیب بهترین است. خوشبختانه، شما به راحتی می توانید آن را پیش نمایش کنید! فقط عنصری را که می‌خواهید در تب Elements در Chrome DevTools منتقل کنید انتخاب کنید، آن را بکشید و در جای درست رها کنید. خودشه! تا زمانی که صفحه را بارگیری مجدد نکنید، یک سفارش جدید در رابط کاربری قابل مشاهده خواهد بود.

پیش نمایش موبایل/حالت پاسخگو

توسعه وب مدرن آسان نیست – ما باید اطمینان حاصل کنیم که صفحات وب ما نه تنها در لپ‌تاپ‌ها، بلکه در موبایل، تبلت‌ها، صفحه‌نمایش‌های بزرگ و غیره نیز خوب به نظر می‌رسند. و Chrome DevTools ممکن است برای بررسی پاسخ‌دهی صفحه وب ما نیز مفید باشد. فقط روی دکمه پیش‌نمایش موبایل نزدیک به نماد انتخابگر (نماد دوم از سمت چپ در منوی بالا) کلیک کنید و بعداً دستگاه، عرض، ارتفاع و جهت دستگاه را در منوی قابل مشاهده در بالای پیش‌نمایش صفحه انتخاب کنید. بازی با ابعاد مختلف – به لطف آن می توانید متوجه برخی مشکلات رفتار صفحه وب خود در دستگاه های مختلف شوید!
پیش‌نمایش صفحه وب در تلفن Pixel 5. برای فعال کردن حالت پاسخگو به نماد توجه کنید – با یک راهنمای ابزار زیر آن با رنگ آبی مشخص شده است.

خلاصه

البته، گزینه‌های توضیح‌داده‌شده در این مقاله تنها گزینه‌های موجود در Chrome DevTools نیستند – ممکن است تعجب کنید که چگونه بسیاری از ویژگی‌های فوق‌العاده در اینجا در دسترس هستند (من در مورد موارد کمتر شناخته شده در مقاله پیش‌نمایش خود نوشتم). با خیال راحت این ابزار را آزمایش کنید و کمی با آن بازی کنید – مطمئن هستم که به شما کمک می کند تا پروژه های خود را بهتر درک کنید و اشکال زدایی آسان تر داشته باشید.