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

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

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

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

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

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

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

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

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

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

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

    نسخه ی نمایشی

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

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

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

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

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

    کنسول

    شکل 3 . کنسول

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

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

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

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

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

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

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

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

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

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

    گزارش شبکه

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    فعال کردن گاز

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

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

    انتخاب Slow 3G

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

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

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

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

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

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

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

  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 نشان داده شده است.

    تب Preview

    شکل 15 . تب Preview

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

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

    تب Response

    شکل 16 . تب Response

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

    برگه زمان بندی

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

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

    دکمه بستن

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

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

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

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

    صفحه جستجو

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

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

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

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

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

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

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

    فقط نمایش فایل های CSS

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

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

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

    مسدود کردن main.css

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

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

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

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

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

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

مراحل بعدی

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

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