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

Kayce Basques

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

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

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

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

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

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

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

پنل شبکه را باز کنید

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

1. نسخه آزمایشی شروع به کار را باز کنید.

   

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

   

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

   

   شاید ترجیح دهید DevTools را در پایین پنجره خود قرار دهید .

   

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

   

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

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

برای مشاهده فعالیت شبکه‌ای که یک صفحه ایجاد می‌کند:

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

   

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

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

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

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

3. حالا، روی دکمه‌ی Get Data در دمو کلیک کنید.

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

   

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

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

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

   

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

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

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

   

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

   

3. روی «بارگذاری مجدد» (Reload refresh) لمس طولانی کنید و سپس «خالی کردن حافظه پنهان و بارگذاری مجدد سخت» (Empty Cache And Hard Reload) را انتخاب کنید.

   

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

ضبط تصاویر

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

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

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

2. کادر انتخاب Screenshots check_box را فعال کنید.

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

   

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

   

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

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

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

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

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

   

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

   

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

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

   

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

   

5. برای مشاهده‌ی جزئیات فعالیت شبکه برای این منبع، روی تب «زمان‌بندی» کلیک کنید.

   

6. برای مشاهده مجدد گزارش شبکه، روی بستن کلیک کنید.

   

جستجوی هدرها و پاسخ‌های شبکه

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

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

1. روی جستجو در نوار عملیات پنل کلیک کنید یا کلیدهای Command + F (مک) یا Control + F (ویندوز / لینوکس) را فشار دهید.

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

   

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

   

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

   

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

   

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

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

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

1. برای نمایش آن، روی فیلتر filter_alt کلیک کنید.

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

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

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

   

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

   

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

   

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

   

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

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

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

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

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

   

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

   

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

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

درخواست‌های مسدودسازی

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

1. برای باز کردن منوی Command ، کلیدهای Control+Shift+P یا Command+Shift+P (در مک) را فشار دهید.

   

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

   

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

4. فایل main.css را تایپ کنید.

   

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

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

   

7. کادر انتخاب «فعال کردن مسدود کردن درخواست» را پاک کنید.

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