فعالیت شبکه را بررسی کنید

Kayce Basques

این یک آموزش عملی از برخی از متداول‌ترین ویژگی‌های DevTools مربوط به بازرسی فعالیت شبکه یک صفحه است.

اگر می‌خواهید ویژگی‌ها را مرور کنید، به مرجع شبکه مراجعه کنید.

نسخه ویدیویی این آموزش را بخوانید یا تماشا کنید:

زمان استفاده از پنل شبکه

به طور کلی، زمانی که باید مطمئن شوید که منابع طبق انتظار دانلود یا آپلود می شوند، از پنل شبکه استفاده کنید. رایج ترین موارد استفاده از پنل شبکه عبارتند از:

• اطمینان از اینکه منابع واقعاً در حال آپلود یا بارگیری هستند.
• بررسی ویژگی‌های یک منبع، مانند سرصفحه‌های HTTP، محتوا، اندازه و غیره.

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

پنل Network را باز کنید

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

1. دمو Get Started را باز کنید.

   

   ممکن است ترجیح دهید نسخه نمایشی را به یک پنجره جداگانه منتقل کنید.

   

2. DevTools را با فشار دادن Control+Shift+J یا Command+Option+J (Mac) باز کنید . پنل کنسول باز می شود.

   

   ممکن است ترجیح دهید DevTools را به پایین پنجره خود متصل کنید .

   

3. روی تب Network کلیک کنید. پنل شبکه باز می شود.

   

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

ثبت فعالیت شبکه

برای مشاهده فعالیت شبکه ای که یک صفحه باعث می شود:

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

   

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

   هر ستون اطلاعات مربوط به یک منبع را نشان می دهد. ستون های پیش فرض عبارتند از:

   • وضعیت : کد پاسخ HTTP.
   • نوع : نوع منبع
   • آغازگر : چه چیزی باعث درخواست یک منبع شد. با کلیک بر روی یک پیوند در ستون Initiator به کد منبعی که باعث درخواست شده است می‌روید.
   • اندازه : مقدار منبع منتقل شده از طریق شبکه.
   • زمان : درخواست چقدر طول کشید.
   توجه: نمودار بالای گزارش شبکه، نمای کلی نامیده می شود. در این آموزش از آن استفاده نخواهید کرد، بنابراین در صورت تمایل می توانید آن را پنهان کنید. به پنهان کردن تراک نمای کلی مراجعه کنید.

2. تا زمانی که DevTools را باز دارید، فعالیت شبکه را در گزارش شبکه ثبت می‌کند. برای نشان دادن این موضوع، ابتدا به پایین گزارش شبکه نگاه کنید و آخرین فعالیت را یادداشت کنید.

3. اکنون روی دکمه دریافت داده در دمو کلیک کنید.

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

   

نمایش اطلاعات بیشتر

ستون های گزارش شبکه قابل تنظیم هستند. می توانید ستون هایی را که از آنها استفاده نمی کنید پنهان کنید. همچنین ستون های زیادی وجود دارد که به طور پیش فرض پنهان هستند که ممکن است برای شما مفید باشد.

1. روی هدر جدول Network Log راست کلیک کرده و Domain را انتخاب کنید. دامنه هر منبع اکنون نشان داده شده است.

   

نکته: می‌توانید URL کامل یک منبع را با نگه داشتن ماوس روی سلول آن در ستون Name ببینید.

اتصال شبکه کندتر را شبیه سازی کنید

اتصال شبکه رایانه ای که برای ساخت سایت استفاده می کنید احتمالاً سریعتر از اتصالات شبکه دستگاه های تلفن همراه کاربران شما است. با محدود کردن صفحه، می توانید ایده بهتری از مدت زمان بارگذاری یک صفحه در دستگاه تلفن همراه داشته باشید.

1. روی منوی کشویی Throttling کلیک کنید که به طور پیش فرض روی No throttling تنظیم شده است.

   

2. 3G را انتخاب کنید.

   

3. Reload Refresh را طولانی فشار دهید و سپس Empty Cache And Hard Reload را انتخاب کنید.

   

   در بازدیدهای مکرر، مرورگر معمولاً برخی از فایل‌ها را از حافظه پنهان خود ارائه می‌کند که سرعت بارگذاری صفحه را افزایش می‌دهد. حافظه پنهان خالی و بارگذاری مجدد سخت مرورگر را مجبور می کند تا برای همه منابع به شبکه برود. این زمانی مفید است که می‌خواهید ببینید بازدیدکننده‌ای که برای اولین بار بارگیری می‌کند چگونه بارگذاری صفحه را تجربه می‌کند.

   توجه: جریان کاری Empty Cache And Hard Reload تنها زمانی در دسترس است که DevTools باز باشد.

گرفتن اسکرین شات

اسکرین شات ها نحوه ظاهر صفحه شما را در زمان های مختلف هنگام بارگیری نشان می دهند و گزارش می دهند که چه منابعی در هر بازه بارگذاری می شوند.

برای گرفتن اسکرین شات مراحل زیر را دنبال کنید:

1. روی تنظیمات شبکه کلیک کنید.

2. کادر چک Screenshots را فعال کنید.

3. با استفاده از جریان کاری Empty Cache And Hard Reload صفحه را دوباره بارگیری کنید. اگر به یادآوری در مورد نحوه انجام این کار نیاز دارید، به شبیه سازی اتصال کندتر مراجعه کنید. برگه Screenshots تصاویر کوچکی از نحوه نگاه کردن صفحه به نقاط مختلف در طول فرآیند بارگیری ارائه می دهد.

   

4. روی اولین تصویر کوچک کلیک کنید. DevTools به شما نشان می‌دهد که در آن لحظه چه فعالیت‌هایی در شبکه انجام شده است.

   

5. برای بستن برگه Screenshots، کادر چک Screenshots را تغییر دهید.

6. صفحه را دوباره بارگیری کنید.

جزئیات یک منبع را بررسی کنید

برای کسب اطلاعات بیشتر در مورد یک منبع روی آن کلیک کنید. اکنون آن را امتحان کنید:

1. روی getstarted.html کلیک کنید. تب Headers نشان داده شده است. از این تب برای بررسی هدرهای HTTP استفاده کنید.

   

2. برای مشاهده رندر اولیه HTML، روی تب Preview کلیک کنید.

   

   این برگه زمانی مفید است که یک API یک کد خطا را در HTML برمی گرداند و خواندن HTML ارائه شده از کد منبع HTML آسان تر است، یا هنگام بازرسی تصاویر.

3. برای مشاهده کد منبع HTML، روی تب Response کلیک کنید.

   

   نکته: هنگامی که یک فایل کوچک‌سازی می‌شود، با کلیک بر روی دکمه Format data_object در پایین برگه Response ، محتوای فایل برای خوانایی مجدد قالب‌بندی می‌شود.

4. برای مشاهده درختی که زنجیره آغازگر درخواست را ترسیم می کند، روی تب Initiator کلیک کنید.

   

5. برای مشاهده خلاصه‌ای از فعالیت شبکه برای این منبع، روی برگه زمان‌بندی کلیک کنید.

   

6. برای مشاهده دوباره Log شبکه روی Close close کلیک کنید.

   

سرصفحه ها و پاسخ های شبکه را جستجو کنید

هنگامی که نیاز به جستجوی سرصفحه های HTTP و پاسخ های همه منابع برای یک رشته خاص یا عبارت منظم دارید، از تب Search استفاده کنید.

برای مثال، فرض کنید می‌خواهید بررسی کنید که آیا منابع شما از سیاست‌های کش معقولی استفاده می‌کنند یا خیر.

1. روی جستجوی جستجو کلیک کنید. برگه جستجو در سمت چپ گزارش شبکه باز می شود.

   

2. Cache-Control تایپ کرده و Enter را فشار دهید. تب Search تمام نمونه‌های Cache-Control را که در سرصفحه‌ها یا محتوا پیدا می‌کند فهرست می‌کند.

   

3. برای مشاهده روی یک نتیجه کلیک کنید. اگر پرس و جو در یک هدر یافت شد، تب Headers باز می شود. اگر پرس و جو در محتوا یافت شد، تب Response باز می شود.

   

4. برگه جستجو و سربرگ را ببندید.

   

منابع را فیلتر کنید

DevTools گردش‌های کاری متعددی را برای فیلتر کردن منابعی که به وظیفه مورد نظر مرتبط نیستند، ارائه می‌کند.

نوار ابزار Filters باید به طور پیش فرض فعال باشد. اگر نه:

1. برای نمایش روی Filter filter_alt کلیک کنید.

بر اساس رشته، عبارت منظم یا ویژگی فیلتر کنید

کادر ورودی فیلتر از انواع مختلفی از فیلترینگ پشتیبانی می کند.

1. png در کادر ورودی فیلتر تایپ کنید. فقط فایل هایی که حاوی متن png هستند نشان داده می شوند. در این مورد تنها فایل هایی که با فیلتر مطابقت دارند، تصاویر PNG هستند.

   

2. /.*\.[cj]s+$/ را تایپ کنید. DevTools هر منبعی را با نام فایلی که به j یا c و به دنبال آن 1 یا بیشتر s کاراکتر ختم نمی شود، فیلتر می کند.

   

3. -main.css تایپ کنید. DevTools main.css فیلتر می کند. اگر هر فایل دیگری با الگو مطابقت داشت، آنها نیز فیلتر می شوند.

   

4. domain:raw.githubusercontent.com را در کادر متنی Filter تایپ کنید. DevTools هر منبعی را با URL که با این دامنه مطابقت ندارد فیلتر می کند.

   

   برای لیست کامل ویژگی‌های قابل فیلتر ، درخواست‌های فیلتر بر اساس خواص را ببینید.

5. کادر ورودی فیلتر را از هر متنی پاک کنید.

فیلتر بر اساس نوع منبع

برای تمرکز بر روی نوع خاصی از فایل، مانند شیوه نامه:

1. روی CSS کلیک کنید. تمام انواع فایل های دیگر فیلتر می شوند.

   

2. برای مشاهده اسکریپت ها، Control یا Command (Mac) را نگه دارید و سپس روی JS کلیک کنید.

   

3. برای حذف فیلترها و مشاهده مجدد همه منابع، روی All کلیک کنید.

به درخواست‌های فیلتر برای سایر گردش‌های کاری فیلتر مراجعه کنید.

مسدود کردن درخواست ها

هنگامی که برخی از منابع آن در دسترس نیستند، یک صفحه چگونه به نظر می رسد و چگونه رفتار می کند؟ آیا کاملاً از کار می افتد یا هنوز تا حدودی کار می کند؟ درخواست ها را مسدود کنید تا بدانید:

1. Control+Shift+P یا Command+Shift+P (Mac) را فشار دهید تا Command Menu باز شود.

   

2. block تایپ کنید، Show Request Blocking را انتخاب کنید و Enter را فشار دهید.

   

3. روی دکمه Add Pattern کلیک کنید.

4. main.css تایپ کنید.

   

5. روی افزودن کلیک کنید.

6. صفحه را دوباره بارگیری کنید. همانطور که انتظار می رفت، استایل صفحه کمی به هم ریخته است زیرا شیت اصلی آن مسدود شده است. به ردیف main.css در Network Log توجه کنید. متن قرمز به این معنی است که منبع مسدود شده است.

   

7. کادر بررسی Enable request blocking را پاک کنید.

برای کشف بیشتر ویژگی‌های DevTools مربوط به بازرسی فعالیت شبکه، مرجع شبکه را بررسی کنید.