معرفی 4 قابلیت DevTools گوگل کروم برای طراحان وب
در چرخه ی توسعه ی نرم افزار ، ابزارهای توسعه نقش زیادی دارن. برای مثال اگر برنامه نویس سی شارپ باشین، قطعا Resharper یکی از اون ابزارهاست که سرعت کارتون رو بالا میبره .اگر توسعه دهنده ی وب هستین یا طراح وب ، یکی از ابزارهایی که خیلی خیلی براتون کارایی داره Chrome DevTools هست ، بلاشک. در این مطلب قصد داریم برخی از ویژگی های این ابزار رو که ممکنه ازش استفاده نکرده باشین رو بررسی کنیم !
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
سرفصل های این مطلب
1-تست سرعت و کارایی وب سایت بروی دستگاه های ضعیف
اکثر توسعه دهنده های نرم افزار از سیستم سخت افزاری نسبتا قوی و اینترنت پرسرعت استفاده میکنن در نتیجه به احتمال زیاد در زمان تست وب سایت بروی مرورگر متوجه کارایی و سرعت پایین وب سایت نمیشن. تمام کاربران یک وب سایت اینترنت پرسرعت یا دستگاه های قوی ندارن (مثلا خیلی از گوشی های هوشمند هستن که از نظر سخت افزاری قوی نیستن یا اینکه کاربر از اینترنت پرسرعت استفاده نمیکنه). خوب چطور میتونیم عملکرد سایتی که طراحی کردیم رو بروی اون دستگاه ها تست کنیم ؟ خوب در ابتدا سایت موردنظرتون (مثلا Microsoft.Com) رو توی Chrome باز کنین و کلید F12 رو بزنین تا DevTools باز بشه . مشابه عکس زیر ، روی سه نقطه ی سمت راست بالا کلیک کنین ، گزینه ی More Tools و بعد از اون روی Network Conditions بزنین .
همونطور که میبینین یک Tab جدید با نام Network Conditions که با کادر سبز نمایش داده شده اضافه میشه که از بخش Network throttling میتونین سرعت موردنظرتون رو مشخص کنین تا ببینین سرعت بارگذاری سایت بروی اینترتی با سرعت مثلا Slow 3G به چه شکل هست . اگر بروی دکمه ای که با کادر آبی مشخص شده کلیک کنین (یا کلید های CTRL+SHIFT+M) رو بزنین. صفحه ی نمایش سایت به شکل زیر در میاد:
در کادر قرمز رنگ میتونین سایت رو بروی گوشی های رده میانی و رده پایین از نظر قدرت CPU بررسی کنین. همینطور ار طریق کادر آبی رنگ میتونین مشخص کنین که نمایش سایت توی گوشی ها و دستگاه های مختلف با اندازه های متفاوت به چه شکل هست تا بتونین مسائل مرتبط با Responsive بودن سایتتون رو بررسی کنین.
2-گرفتن عکس (Screenshot) سایت در سایز های مختلف
بعد از طراحی سایت و در حین تست ، ممکنه بخوایم از نمایش سایت در سایز های مختلف Screenshot بگیریم . خوب این کار براحتی با استفاده از Chrome DevTools امکان پذیره . در ابتدا کلید CTRL+SHIFT+P رو بزنین تا منوی دستور (Command menu) نمایش داده بشه . بعد از اون عبارت Screenshot رو بنویسین تا دستورات مربوط به گرفتن عکس نمایش داده بشه .
خوب حالا هر کدوم از گزینه های بالا رو باهم بررسی میکنیم:
Capture area screenshot
این گزینه این امکان رو به شما میده تا یه ناحیه ی مشخصی از سایت رو مشخص کنین تا عکسش رو براتون بگیره .
Capture full size screenshot
این گزینه از تمام صفحه ای که داخلش هستین عکس میگیره
Capture node screenshot
برای استفاه از این گزینه ابتدا بایستی از طریق inspect ، یک node رو انتخاب کنین و بعد با انتخاب این گزینه عکس تنها از همون node مربوطه گرفته میشه
Capture screenshot
این گزینه تنها از همون بخشی که قابل روئیت هست عکس میگیره .
نکته: میتونین با زدن دکمه های CTRL+SHIFT+M ، که نوار ابزار دستگاه (Device toolbar) رو نمایش میده ، نوع دستگاه رو مثلا روی IPhone X سِت کنین و تو اون حالتها هم از سایت موردنظرتون عکس بگیرین
3- تغییر User-Agent
گاهی ممکنه که کدی نوشته باشیم که مثلا اگر سایت از طریق یک مرورگر خاص باز شده بود (مثلا FireFox یا Safari) ، یک اعلان خاصی رو به کاربر نمایش بدیم . (مثلا یگ PWA پیاده سازی کردیم و میخوایم یک راهنما برای کاربر درست کنیم که بتونه به دکمه ی Add To Home Screen توی گوشی iPhone برسه) . تو این حالت برای تست میتونیم User-Agent دلخواهمون رو سِت کنیم تا ببینیم سیستممون بدرستی عمل میکنه یا نه . حالا چجوری ؟ اینجوری . کلیدهای CTRL+SHIFT+P رو بزنین تا منوی دستور (Command menu) نمایش داده بشه و بعد Show Network conditions رو بنویسین و از لیست انتخابش کنین .
گزینه ی Select automatically رو غیرفعال کنین تا لیست پایین و جعبه ی متن زیریش فعال بشه. از داخل لیست میتونین UserAgent های پرکاربرد رو انتخاب کنین یا اینکه در باکس پایین UserAgent دلخواهتون رو قرار بدین.
4-بررسی تم های Dark و Light وب سایت
پراپرتی prefers-color-scheme این امکان رو میده تا بتونین تشخیص بدین که کاربر از تم روشن یا تاریک در سیستمش استفاده میکنه. حالا برای اینکه این مورد رو روی سایتمون تست کنیم نیازی نیست تا داخل تنظیمات سیستم تغییری ایجاد کنیم و خروجی رو بررسی کنیم .برای اینکار مثل قبل دکمه های CTRL+SHIFT+P رو بزنین و عبارت Show rendering رو بنویسین و از لیست پیشنهادی انتخابش کنین.
5- فیلترکردن درخواست های شبکه براساس پراپرتی های درخواست ها
یکی از ویژگی های جالب Chrome DevTools امکان فیلترکردن درخواست های شبکه هست. مثلا میتونین بگین فقط درخواست هایی رو نمایش بده که حجمشون بیشتر از 10 کیلوبایت هست: larger-than:10k . برای اینکار در پنجره ی DevTools ، به تب Network برید و در کادر فیلتر عبارت larger-than:10k رو بنویسین.
مثلا میتونین از is:running استفاده کنین تا منابع مرتبط با WebSocket هارو پیدا کنین . یا از method استفاده کنین که مثلا فقط درخواستهای POST نمایش داده بشه.
امیدوارم که این مطالب به کارتون بیاد .