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

کیسی باسکی

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

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

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

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

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

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

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

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

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

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

    وب سایت دمو

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

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

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

    پنل کنسول در Devtools.

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

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

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

    پانل Devtools Network به پایین پنجره متصل است.

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

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

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

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

    گزارش شبکه با 5 درخواست.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    کشویی throttling در پانل شبکه.

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

    انتخاب 3G در پنل شبکه.

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

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

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

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

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

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

  1. روی شبکه کلیک کنید.

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

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

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

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

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

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

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

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

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

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

    تب Headers در پنل Network.

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

    تب Preview در پنل Network.

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

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

    تب Response در پنل Network.

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

    تب Initiator در پنل Network.

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

    تب Timeing در پنل Network.

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

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

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

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

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

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

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

    نتایج جستجو برای Cache-Control.

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

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

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

    دکمه های بستن

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

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

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

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

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

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

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

  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 کلیک کنید. تمام انواع فایل های دیگر فیلتر می شوند.

    پانل شبکه فقط فایل های CSS را نشان می دهد.

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

    پانل شبکه فقط فایل های CSS و 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 تایپ کنید.

    مسدود کردن main.css در پنل شبکه

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

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

    main.css مسدود شده است.

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

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