نکات و ترفندهای DevTools | از صفر تا صد

در این مقاله با برخی کارکردهای مفید DevTools آشنا خواهیم شد که احتمالاً آنها را نمیشناسید. در همین آغاز پیشنهاد میکنیم برای کاهش زمان مورد نیاز برای دیباگ کردن بهتر است با استفاده از کامپوننتهای با قابلیت استفاده مجدد که تست شدهاند کدنویسی کنید. همچنین کامپوننتهای خود را با استفاده از Bit به اشتراک بگذارید تا موجب توسعه سریعتر و امنتر شود. با ما تا انتهای این راهنما با موضوع نکات و ترفندهای DevTools همراه باشید.

شبیهسازی شبکه سریع یا با تأخیر

تست کردن صفحههای وب در localhost و روی رایانه بیشک شرایط سریعی دارد. اما صفحههای وب در عمل روی شبکههای کند و با تأخیر عرضه میشوند. بنابراین باید شرایط بارگذاری صفحهها را در این وضعیت و سرعت نیز بسنجیم. یک گزینه در مرورگر وجود دارد که میزان سرعت بارگذاری صفحه را با استفاده از آن میتوان تنظیم کرد.

به این منظور به زبانه Network بروید و در سمت راست روی دکمه بازشدنی No Throttling کلیک کنید. در اینجا گزینههای مختلفی با تعیین سرعت شبکه از قبیل GPRS، Regular 2G، Good 2G، Regular 3G، Good 3G، Regular 4G و Wi-fi وجود دارند.

تهیه اسکرینشات از صفحه

برای تهیه اسکرینشات از صفحه نیازی به استفاده از نرمافزار جانبی وجود ندارد و این کار را در همان بخش DevTools مرورگر میتوان انجام داد. به این منظور به تنظیمات DevTools بروید و تیک چکباکس Take a screenshot of the entire page را بزنید.

به این ترتیب یک دکمه به Take a screenshot of the entire page اضافه خواهد شد.

روی آیکون دوربین کلیک کنید تا یک اسنپشات از صفحه جاری گرفته شود.

Paint Flashing

آیا میدانید که میتوانید از مرورگر بخواهید نقاط و بخشهایی که روی صفحه بهروزرسانی میشوند را با رنگ هایلایت کرده و نمایش دهد؟ این کار paint flashing نام دارد. برای فعالسازی این قابلیت به بخش تنظیمات رفته و تیک گزینه Toggle paint flashing را بزنید. به این ترتیب آیکون زیر به DevTool اضافه میشود.

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

زمانی که paint flashing فعال شود، هیچ بخشی از صفحه رنگآمیزی نمیشود، چون به تازگی رندر شده است. اکنون روی دکمه Restore در پنجره مرورگر کلیک کنید تا تغییر اندازه رخ دهد.

آن نواحی که با رنگ هایلایت شدهاند، بخشهایی هستند که از سوی مرورگر مجدداً رندر شدهاند تا عناصر با اندازه تغییر یافته مرورگر تطبیق یابد. چنان که میبینید بخش بالا-چپ به عنوان Web APIs هایلایت نشده است، زیرا نیازی به بهروزرسانی جهت تطبیق اندازه ندارد. با تغییر اندازه مرورگر به اندازه نرمال دوباره شاهد یک رسم مجدد خواهیم بود:

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

دیباگر

این ابزار برای دیباگ کردن اسکریپتها مورد استفاده قرار میگیرد. به این ترتیب میتوانید نقاط توقف (Breakpoints) را در اسکریپت اضافه کنید و اجرای اسکریپت در این نقاط متوقف خواهد شد.

ما یک نقطه توقف در خط 47 اضافه کردهایم و زمانی که روی دکمه Vibrate کلیک کنیم، تابع vibrate اجرا شده و در خط 47 مکث مییابد. این خط شامل گزاره const time = vibTime.value است.

چنان که میبینید روی دکمه کلیک کردهایم و اسکریپت اجرا شده و در خط 47 متوقف شده است. اگر به سمت راست نگاه کنید، زبانه Breakpoints را میبینید که همه نقاط توقف را در اسکریپت جاری نشان میدهد.

«پشته فراخوانی» (Call stack) یک سری از فراخوانیهای تابعها را نشان میدهد که پیش از فعال شدن نقطه توقف جاری انجام یافتهاند. میتوانید ببینید که onClick پیش از تابع vibrate فعال شده است.

Scope متغیرهای متصل به دامنه window را نشان میدهد و دامنه بلوک همان دامنه نقطه توقف جاری است. در بخش فوقانی این موارد، دکمههای Pause ،Step over ،Step in ،Step out و Resume قرار دارند.

• دکمه Pause موجب مکث در اجرای اسکریپت میشود.
• دکمه Step over یک خط را در اسکریپت اجرا کرده و از روی بقیه خطوط رد شده و وارد آن گزارهها نمیشود. برای نمونه اگر کدی مانند زیر داشته باشیم:

1
    2
   >3 const a= 67
    4 foo()
    5 b = 9900
    6
    7 function foo() {
    8 }

در صورتی که یک مکث در خط 3 قرار دهیم، با کلیک کردن روی دکمه Step over، اجرای کد به خط 4 منتقل میشود که یک فراخوانی تابع است. به این ترتیب فشردن دکمه Step over موجب میشود که فراخوانی foo بدون انتقال به اعلان foo در خط 7 اجرا شود و فراخوانی foo اجرا شده و به خط بعدی 5 برود.

• دکمه Step in موجب میشود که اجرای کد به بدنه بعدی فراخوانی تابع یا شیء بعدی برود. در مثال فوق، با فشردن دکمه Step in در خط 4، ()foo موجب میشود که اجرا به بدنه تابع foo در خط 7 منتقل شود و درون بدنه این تابع برود.
• دکمه Step out کل بلوک جاری را اجرا کرده و به خارج از بلوک میرود. در مثال فوق، اگر وارد بدنه تابع foo شده باشیم، با فشردن Step out کل بدنه تابع اجرا شده و مقدار 5 بازگشت مییابد.

نقاط توقف شنوندههای کلیک

این نقاط توقف به ما اجازه میدهند که نقاط توقف رویداد را به اسکریپت اضافه کنیم.

لیست فوق شامل نقاط توقف رویدادی است که میتوانیم به اسکریپت خود اضافه کنیم. در این لیست مواردی مانند Clipboard ،Mouse ،Keyboard و غیره را میبینیم. اگر روی گزینه ماوس کلیک کنیم:

رویدادهای مرتبط با ماوس را مشاهده میکنیم که شامل click ،dblclick ،mouseout-over-enter-leave و غیره است. اکنون تیک گزینه click را میزنیم تا اسکریپت در هر بار که روی رویدادهای ثبت شده در صفحه کلیک میشود، متوقف شود. ما کلیک را روی دکمه Vibrate ثبت کردهایم. بنابراین اگر روی دکمه Vibrate کلیک کنیم، اسکریپت در تابع Vibrate مکث میکند.

نقاط توقف تغییر DOM

این گزینه به ما امکان میدهد نقاط توقفی به عناصرمان اضافه کنیم که در صورت تغییر یافتن یکی از عناصر DOM مکث مییابند. منظور از تغییر ِ DOM این است که یک گره DOM حذف شود یا یک خصوصیت آن تغییر یابد و یا یک زیردرخت گره عوض شود.

به بخش Inspector بروید و روی آن عنصر راست-کلیک کنید. سپس در سمت راست، کلیک کنید تا گزینههای Subtree modification ،Attribute modification و Node removal را ببینید.

• Subtree Modification – این گزینه یک نقطه توقف اضافه میکند که وقتی عناصر فرزند عنصر منتخب به هر طریقی تغییر یابند، متوقف خواهد شد.
• Attribute Modification – این گزینه موجب میشود که وقتی یک خصوصیت عنصر منتخب به هر طریقی عوض شود، متوقف شود.
• Node Removal – این گزینه موجب میشود که در زمان حذف یک گره از DOM اجرای اسکریپت متوقف شود.

به دست آوردن مقدار یک رنگ از صفحه

برای به دست آوردن مقدار یک رنگ از صفحه باید به ابزارهای Inspector بروید و روی آیکون قطرهچکان کلیک کنید.

به این ترتیب یک پنل شناور روی صفحه به همراه پنل نشانگر ظاهر میشود که مقدار hex کد رنگ عنصر زیر پنل را نمایش میدهد.

با کلیک کردن روی عنصر، کد رنگ روی کلیپ بورد کپی میشود.

حالت طراحی واکنشگرا

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

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

«حالت طراحی واکنشگرا» (Responsive Design Mode) صفحههای مختلف موبایل را در اختیار ما قرار میدهد که در آن میتوانیم روی مرورگر ببینیم که صفحه وب روی نمایشگرهای موبایل مختلف چگونه طرحبندی میشود. این حالت مانند یک شبیهساز تلفن همراه عمل میکند. برای فعالسازی حالت طراحی واکنشگرا باید روی آیکون زیر در DevTools کلیک کنید.

به این ترتیب صفحه وب روی یک نمای تلفن موبایل نمایش مییابد.

ما میتوانیم نمای دستگاه را به هر مدل گوشی آیفون، سامسونگ، آیپد و غیره تغییر دهیم. حتی میتوانیم ویوپورت را همانند گوشی چرخش دهیم تا به حالت افقی یا عمودی درآید.

تغییر مشخصههای باکس عنصر از ابزار Inspector

سوئیچ کردن بین IDE و مرورگر برای تغییر دادن یا افزودن مشخصههای استایلبندی به عناصر و مشاهده تغییرهای ایجاد شده در مرورگر، فرایندی دشوار و ملالآور است. ابزار Inspector یک «باکس مدل» (Box Model) در سمت راست دارد که به ایجاد تغییرهای سریع استایلبندی در عنصر انتخابی کمک میکند.

در این بخش میتوانید عرض، ارتفاع، فاصلهبندی، حاشیه و لبه هر عنصر را تعیین کنید.

هایلایت عناصر با استفاده از یک سلکتور

امکان هایلایت کردن عناصر در DOM با استفاده از یک سلکتور CSS وجود دارد. به این منظور باید به ابزار Inspector بروید. در زبانه میانی که مشخصهها و مقادیر استایلبندی عناصر نمایش یافتهاند، یک آیکون هدفگیری مانند زیر روی هر سلکتور CSS میبینید.

با کلیک کردن روی هر یک از این آیکونهای هدفگیری، میتوانید آن عناصر را با استفاده از سلکتور CSS در DOM هایلایت کنید.

نکات info در Inspector

ابزار Inspector قابلیتهای مفید زیادی دارد. به تصویر زیر توجه کنید:

در این تصویر میبینید که مشخصه flex-direction: row را به یک عنصر non-flex اضافه کردهایم. ابزار Inspector این مشخصه را لغو کرده است و اطلاعات مفیدی در اختیار ما قرار میدهد و اعلام میکند که باید display: flex; یا display: inline-flex; را به عنصر web-api-card اضافه کنیم.

اندازهگیری نسبتی از یک صفحه

یک ابزار وجود دارد که با استفاده از آن میتوان هر نسبتی از صفحه را اندازهگیری کرد. برای فعال کردن این ابزار باید به تنظیمات رفته و تیک گزینه Measure a portion of the page را بزنید.

به این ترتیب این آیکون در DevTools قرار میگیرد.

با کلیک کردن روی این آیکون یک پنل هدف شناور روی DOM ظاهر میشود که موقعیت چپ و بالای عنصر جاری زیر نشانگر را نمایش میدهد.

با جابجا کردن ماوس روی صفحه، مقادیر موقعیتهای بالا و چپ کنونی ماوس نمایش مییابد.

فعال کردن خطکش برای صفحه

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

آیا میدانید که یک ابزار در DevTool وجود دارد که به ما کمک میکند تا اندازههای کل نواحی DOM را محاسبه کنیم؟ برای فعال کردن این ابزار باید به بخش تنظیمات رفته و تیک گزینه Toggle rulers for the page را بزنید. به این ترتیب یک آیکون خطکش به باکس DevTool اضافه میشود.

با کلیک کردن روی این آیکون یک overlay خطکش در ارتفاع و عرض DOM ظاهر میشود.

به این ترتیب میتوانیم از ابزار Inspector برای اندازهگیری عرض و ارتفاع هر چیزی استفاده کنیم.

سخن پایانی

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

اگر این مطلب برای شما مفید بوده است، آموزشها و مطالب زیر نیز به شما پیشنهاد میشوند:

• مجموعه آموزشهای طراحی سایت
• آموزش طراحی وب با HTML – تکمیلی
• مجموعه آموزشهای ابزارهای مدیریت وبسایت
• دیباگ کدهای جاوا اسکریپت با Chrome DevTools — به زبان ساده
• نحوه ایجاد افزونه اینترنت دانلود منیجر (IDM) در گوگل کروم (Google Chrome)