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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

   

   شکل 1 . نسخه ی نمایشی

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

   

   شکل 2 . نسخه ی نمایشی در یک پنجره و این آموزش در یک پنجره دیگر

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

   

   شکل 3 . کنسول

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

   

   شکل 4 . DevTools به پایین پنجره متصل شد

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

   

   شکل 5 . DevTools به پایین پنجره متصل شد

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

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

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

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

   

   شکل 6 . گزارش شبکه

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

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

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

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

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

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

   

   شکل 7 . یک منبع جدید در گزارش شبکه

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

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

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

   

   شکل 8 . فعال کردن ستون Domain

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

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

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

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

   

   شکل 9 . فعال کردن گاز

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

   

   شکل 10 . انتخاب Slow 3G

3. بارگذاری مجدد را فشار دهید و سپس Empty Cache And Hard Reload را انتخاب کنید.

   

   شکل 11 . خالی کردن کش و بارگذاری مجدد سخت

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

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

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

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

1. روی Capture Screenshots کلیک کنید .

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

   

   شکل 12 . اسکرین شات از بارگذاری صفحه

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

   

   شکل 13 . فعالیت شبکه ای که در اولین اسکرین شات اتفاق می افتاد

4. روی Capture Screenshots کلیک کنید دوباره برای بستن صفحه Screenshots.

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

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

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

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

   

   شکل 14 . برگه سرصفحه ها

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

   

   شکل 15 . تب Preview

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

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

   

   شکل 16 . تب Response

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

4. روی زبانه Timeing کلیک کنید. خلاصه ای از فعالیت شبکه برای این منبع نشان داده شده است.

   

   شکل 17 . برگه زمان بندی

5. روی Close کلیک کنید برای مشاهده مجدد گزارش شبکه

   

   شکل 18 . دکمه بستن

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

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

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

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

   

   شکل 19 . صفحه جستجو

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

   

   شکل 20 . نتایج جستجو برای Cache-Control

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

   

   شکل 21 . یک نتیجه جستجو که در تب Headers مشخص شده است

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

   

   شکل 22 . دکمه های بستن

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

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

شکل 23 . نوار ابزار فیلترها

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

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

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

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

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

   

   شکل 24 . یک فیلتر رشته ای

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

   

   شکل 25 . یک فیلتر عبارت منظم

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

   

   شکل 26 . یک فیلتر منفی

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

   

   شکل 27 . یک فیلتر دارایی

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

5. کادر متنی Filter را از هر متنی پاک کنید.

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

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

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

   

   شکل 28 . فقط نمایش فایل های CSS

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

   

   شکل 29 . نمایش فقط فایل های CSS و JS

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

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

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

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

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

   

   شکل 30 . منوی فرمان

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

   

   شکل 31 . نمایش درخواست مسدود کردن

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

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

   

   شکل 32 . مسدود کردن main.css

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

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

   

   شکل 33 . main.css مسدود شده است

7. تیک گزینه Enable request blocking را بردارید.

مراحل بعدی

تبریک می گویم، شما آموزش را تکمیل کردید. برای دریافت جایزه خود روی Dispense Award کلیک کنید.

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