مرجع ویژگی های شبکه

سوفیا املیانوا
Sofia Emelianova

در این مرجع جامع از ویژگی های تجزیه و تحلیل شبکه Chrome DevTools، راه های جدیدی برای تجزیه و تحلیل نحوه بارگیری صفحه خود بیابید.

ثبت درخواست های شبکه

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

پنل شبکه

ضبط درخواست های شبکه را متوقف کنید

برای توقف ضبط درخواست ها:

  • روی توقف ضبط گزارش شبکه کلیک کنید ضبط شبکه را متوقف کنید. در پنل شبکه خاکستری می شود تا نشان دهد که DevTools دیگر درخواست ها را ضبط نمی کند.
  • در حالی که پانل شبکه در فوکوس است، Command > + E (Mac) یا Control + E (ویندوز، لینوکس) را فشار دهید.

درخواست ها را پاک کنید

روی Clear کلیک کنید پاک کردن در پنل شبکه برای پاک کردن تمام درخواست‌ها از جدول درخواست‌ها .

دکمه Clear.

درخواست‌ها را در بارگذاری‌های صفحه ذخیره کنید

برای ذخیره درخواست‌ها در بارگذاری‌های صفحه، کادر انتخاب «حفظ گزارش» را در پانل شبکه علامت بزنید. DevTools همه درخواست‌ها را ذخیره می‌کند تا زمانی که ذخیره log را غیرفعال کنید.

گرفتن اسکرین شات در حین بارگذاری صفحه

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

برای فعال کردن اسکرین شات ها، تنظیمات را باز کنید تنظیمات. داخل پنل Network و تیک گزینه Capture screenshots را بزنید.

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

پس از گرفتن عکس، می توانید به روش های زیر با اسکرین شات ها تعامل داشته باشید:

  • ماوس را روی یک اسکرین شات نگه دارید تا نقطه ای را که آن اسکرین شات گرفته شده است مشاهده کنید. یک خط زرد در صفحه نمای کلی ظاهر می شود.
  • برای فیلتر کردن هرگونه درخواستی که پس از گرفتن اسکرین شات رخ داده است، روی تصویر کوچک یک اسکرین شات کلیک کنید.
  • برای بزرگنمایی یک تصویر کوچک روی آن دوبار کلیک کنید.

گرفتن اسکرین شات فعال شد.

درخواست XHR را دوباره پخش کنید

برای پخش مجدد درخواست XHR، یکی از موارد زیر را در جدول درخواست ها انجام دهید:

  • درخواست را انتخاب کنید و R را فشار دهید.
  • روی درخواست کلیک راست کرده و Replay XHR را انتخاب کنید.

انتخاب Replay XHR.

تغییر رفتار بارگذاری

با غیرفعال کردن حافظه پنهان مرورگر، از بازدیدکننده‌ای که برای اولین بار بازدید می‌کند، شبیه‌سازی کنید

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

چک باکس Disable Cache.

کش مرورگر را از کشوی شرایط شبکه غیرفعال کنید

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

  1. را کلیک کنید شرایط شبکه برای باز کردن کشوی شرایط شبکه .
  2. چک باکس Disable cache را علامت بزنید یا پاک کنید.

کش مرورگر را به صورت دستی پاک کنید

برای پاک کردن دستی کش مرورگر در هر زمان، در هر نقطه از جدول درخواست‌ها کلیک راست کرده و پاک کردن کش مرورگر را انتخاب کنید.

انتخاب پاک کردن کش مرورگر

شبیه سازی آفلاین

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

برای شبیه سازی یک تجربه شبکه کاملاً آفلاین، از منوی کشویی Network throttling در کنار چک باکس Disable cache ، Offline را انتخاب کنید.

آفلاین از منوی کشویی انتخاب شده است.

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

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

برای شبیه‌سازی 4G سریع، 4G آهسته یا 3G، پیش تنظیم مربوطه را از منوی کشویی Throttling در نوار اقدام در بالا انتخاب کنید.

منوی کشویی throttling شبکه با از پیش تنظیم.

DevTools یک نماد هشدار در کنار پانل شبکه نمایش می دهد تا به شما یادآوری کند که throttling فعال است.

پروفایل های throttling سفارشی ایجاد کنید

علاوه بر تنظیمات از پیش تعیین شده، مانند 4G کند یا سریع، می‌توانید پروفایل‌های throttleling سفارشی خود را نیز اضافه کنید:

  1. منوی Throttling را باز کرده و Custom > Add... را انتخاب کنید.
  2. یک نمایه throttling جدید را همانطور که در Settings > Throttling توضیح داده شده است، تنظیم کنید.
  3. در پنل Network ، نمایه جدید خود را از منوی کشویی Throttling انتخاب کنید.

    یک نمایه سفارشی انتخاب شده از منوی throttling. پانل شبکه یک نماد هشدار را نمایش می دهد.

DevTools a را نمایش می دهد هشدار. نماد هشدار در کنار پانل شبکه برای یادآوری فعال بودن throttling.

اتصالات WebSocket دریچه گاز

علاوه بر درخواست های HTTP، DevTools اتصالات WebSocket را از نسخه 99 کاهش می دهد.

برای مشاهده دریچه گاز WebSocket:

  1. برای مثال، با استفاده از ابزار تست ، اتصال جدیدی را آغاز کنید.
  2. در پنل Network ، No throttling را انتخاب کنید و از طریق اتصال پیام ارسال کنید.
  3. یک نمایه throttling سفارشی بسیار کند ایجاد کنید، به عنوان مثال، 10 kbit/s . چنین نمایه کندی به شما کمک می کند تفاوت را متوجه شوید.
  4. در پنل Network ، نمایه را انتخاب کنید و پیام دیگری ارسال کنید.
  5. فیلتر WS را تغییر دهید، روی نام اتصال خود کلیک کنید، برگه پیام‌ها را باز کنید و تفاوت زمانی بین پیام‌های ارسال شده و پیام‌های بازخورد شده را با و بدون throttling بررسی کنید. به عنوان مثال:

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

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

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

  1. را کلیک کنید شرایط شبکه برای باز کردن کشوی شرایط شبکه .
  2. از منوی Network throttling سرعت اتصال را انتخاب کنید.

پاک کردن دستی کوکی های مرورگر

برای پاک کردن دستی کوکی‌های مرورگر در هر زمان، در هر نقطه از جدول درخواست‌ها کلیک راست کرده و پاک کردن کوکی‌های مرورگر را انتخاب کنید.

انتخاب پاک کردن کوکی‌های مرورگر

هدرهای پاسخ HTTP را لغو کنید

به لغو فایل‌ها و سرصفحه‌های پاسخ HTTP به صورت محلی مراجعه کنید.

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

برای لغو دستی عامل کاربر:

  1. را کلیک کنید شرایط شبکه برای باز کردن کشوی شرایط شبکه .
  2. انتخاب خودکار را پاک کنید.
  3. یک گزینه user agent را از منو انتخاب کنید یا یک گزینه سفارشی را در کادر وارد کنید.

برای جستجو در سرفصل‌های درخواست، محموله‌ها و پاسخ‌ها:

  1. میانبر زیر را فشار دهید تا تب جستجو در سمت راست باز شود:

    • در macOS، Command + F.
    • در ویندوز یا لینوکس، Control + F.
  2. در برگه جستجو ، درخواست خود را وارد کرده و Enter را فشار دهید. در صورت تمایل روی یا کلیک کنید تا به ترتیب حساسیت حروف کوچک یا عبارات منظم روشن شود.

  3. روی یکی از نتایج جستجو کلیک کنید. پانل شبکه درخواستی را که مطابقت دارد با رنگ زرد برجسته می کند. علاوه بر این، پانل همچنین برگه Headers یا Response را باز می کند و رشته ای را که در آنجا مطابقت دارد، در صورت وجود، برجسته می کند.

تب Search در سمت راست در پنل Network.

برای بازخوانی نتایج جستجو، روی Refresh کلیک کنید. برای پاک کردن نتایج، روی پاک کردن کلیک کنید.

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

درخواست ها را فیلتر کنید

درخواست ها را بر اساس خواص فیلتر کنید

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

اگر کادر را نمی بینید، احتمالاً قسمت فیلترها پنهان است. به پنهان کردن پنجره فیلترها مراجعه کنید.

کادر متنی Filters و چک باکس Invert.

برای معکوس کردن فیلتر، تیک Invert را در کنار کادر فیلتر علامت بزنید.

با جدا کردن هر ویژگی با یک فاصله، می توانید از چندین ویژگی به طور همزمان استفاده کنید. به عنوان مثال، mime-type:image/gif larger-than:1K تمام GIF هایی را که بزرگتر از یک کیلوبایت هستند نمایش می دهد. این فیلترهای چند ویژگی معادل عملیات AND هستند. یا عملیات پشتیبانی نمی شود.

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

  • cookie-domain . نشان دادن منابعی که یک دامنه کوکی خاص را تنظیم می کند.
  • cookie-name نشان دادن منابعی که یک نام کوکی خاص را تنظیم می کنند.
  • cookie-path . نشان دادن منابعی که یک مسیر کوکی خاص را تنظیم می کنند.
  • cookie-value نشان دادن منابعی که یک مقدار کوکی خاص را تنظیم می کنند.
  • domain . فقط منابع را از دامنه مشخص شده نمایش دهید. می توانید از یک کاراکتر عام ( * ) برای گنجاندن چندین دامنه استفاده کنید. برای مثال، *.com منابعی را از همه نام‌های دامنه که به .com ختم می‌شوند نمایش می‌دهد. DevTools نشان می‌دهد که یک منوی کشویی تکمیل خودکار را با تمام دامنه‌هایی که با آن مواجه شده است پر می‌کند.
  • has-overrides . درخواست‌هایی را نشان دهید که content ، headers ، هرگونه لغو ( yes )، یا بدون لغو ( no ) را لغو کرده‌اند. شما می توانید ستون مربوطه دارای لغو را به جدول درخواست اضافه کنید.
  • has-response-header . نشان دادن منابعی که حاوی سرصفحه پاسخ HTTP مشخص شده است. DevTools کشویی تکمیل خودکار را با تمام سرصفحه‌های پاسخی که با آن مواجه شده است پر می‌کند.
  • is . استفاده از is:running برای یافتن منابع WebSocket است.
  • larger-than . نمایش منابعی که بزرگتر از اندازه مشخص شده هستند، در بایت. تعیین مقدار 1000 معادل تعیین مقدار 1k است.
  • method . نمایش منابعی که از طریق یک نوع روش HTTP مشخص بازیابی شده اند. DevTools فهرست کشویی تکمیل خودکار را با تمام روش‌های HTTP که با آن مواجه شده است، پر می‌کند.
  • mime-type . نمایش منابع از نوع MIME مشخص. DevTools فهرست کشویی تکمیل خودکار را با تمام انواع MIME که با آن مواجه شده است پر می کند.
  • mixed-content همه منابع محتوای ترکیبی ( mixed-content:all ) یا فقط آنهایی که نمایش داده می شوند ( mixed-content:displayed ) را نشان دهید.
  • priority . نمایش منابعی که سطح اولویت آنها با مقدار مشخص شده مطابقت دارد.
  • resource-type . نمایش منابع از نوع منبع، به عنوان مثال، تصویر. DevTools فهرست کشویی تکمیل خودکار را با انواع منابعی که با آن مواجه شده است پر می کند.
  • response-header-set-cookie . هدرهای Set-Cookie خام را در برگه Issues نشان دهید. کوکی‌های نادرست با هدرهای Set-Cookie نادرست در پانل شبکه پرچم‌گذاری می‌شوند.
  • scheme . نمایش منابع بازیابی شده از طریق HTTP محافظت نشده ( scheme:http ) یا HTTPS محافظت شده ( scheme:https ).
  • set-cookie-domain . منابعی را نشان دهید که دارای سرصفحه Set-Cookie با ویژگی Domain هستند که با مقدار مشخص شده مطابقت دارد. DevTools تکمیل خودکار را با تمام دامنه‌های کوکی که با آن مواجه شده است پر می‌کند.
  • set-cookie-name . منابعی را نشان دهید که سرصفحه Set-Cookie با نامی مطابق با مقدار مشخص شده دارند. DevTools تکمیل خودکار را با تمام نام‌های کوکی‌هایی که با آن مواجه شده است پر می‌کند.
  • set-cookie-value . نشان دادن منابعی که دارای سرصفحه Set-Cookie با مقداری است که با مقدار مشخص شده مطابقت دارد. DevTools تکمیل خودکار را با تمام مقادیر کوکی که با آن مواجه شده است پر می کند.
  • status-code . فقط منابعی را نشان دهید که کد وضعیت HTTP آنها با کد مشخص شده مطابقت دارد. DevTools منوی کشویی تکمیل خودکار را با تمام کدهای وضعیتی که با آن مواجه شده است پر می کند.
  • url نشان دادن منابعی که دارای url منطبق با مقدار مشخص شده است.

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

برای فیلتر کردن درخواست‌ها بر اساس نوع درخواست، روی دکمه‌های All , Fetch/XHR , JS , CSS , Img , Media , Font , Doc , WS (WebSocket)، Wasm (WebAssembly)، Manifest یا Other (هر نوع دیگری که در اینجا فهرست نشده است) کلیک کنید. در پنل شبکه

اگر نمی توانید این دکمه ها را ببینید، احتمالاً قسمت فیلترها پنهان است. به پنهان کردن پنجره فیلترها مراجعه کنید.

برای فعال کردن چندین نوع فیلتر به طور همزمان، Command (Mac) یا Control (ویندوز، لینوکس) را نگه دارید و سپس کلیک کنید.

استفاده از فیلترهای نوع برای نمایش منابع JS، CSS و Document.

درخواست ها را بر اساس زمان فیلتر کنید

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

فیلتر کردن هر درخواستی که فعال نبود در حدود 21-25 میلی ثانیه.

آدرس های اینترنتی داده را پنهان کنید

URL های داده فایل های کوچکی هستند که در اسناد دیگر جاسازی شده اند. هر درخواستی که در جدول درخواست ها مشاهده می کنید که با data: یک URL داده است.

برای پنهان کردن این درخواست ها، بررسی کنید چک باکس. آدرس های اینترنتی داده را پنهان کنید .

آدرس‌های اینترنتی داده‌ها از جدول درخواست‌ها پنهان شده‌اند.

نوار وضعیت در پایین تعداد درخواست های نشان داده شده از کل درخواست ها را نشان می دهد.

پنهان کردن URL های افزونه

برای تمرکز روی کدی که می‌نویسید، می‌توانید درخواست‌های نامربوط ارسال شده توسط برنامه‌های افزودنی که ممکن است در Chrome نصب کرده باشید را فیلتر کنید. درخواست‌های برنامه افزودنی دارای URLهایی هستند که با chrome-extension:// شروع می‌شوند.

برای پنهان کردن درخواست های برنامه افزودنی، بررسی کنید چک باکس. پنهان کردن URL های برنامه افزودنی

URL های برنامه افزودنی از جدول درخواست ها پنهان شده اند.

نوار وضعیت در پایین تعداد درخواست های نشان داده شده از کل درخواست ها را نشان می دهد.

فقط درخواست‌هایی را با کوکی‌های پاسخ مسدود شده نشان دهید

برای فیلتر کردن همه چیز به جز درخواست‌هایی که کوکی‌های پاسخ به هر دلیلی مسدود شده‌اند، بررسی کنید چک باکس. کوکی‌های پاسخ مسدود شده آن را در این صفحه نمایشی امتحان کنید.

جدول درخواست‌ها فقط درخواست‌هایی را نشان می‌دهد که کوکی‌های پاسخ مسدود شده دارند.

نوار وضعیت در پایین تعداد درخواست های نشان داده شده از کل درخواست ها را نشان می دهد.

برای اطلاع از دلیل مسدود شدن یک کوکی پاسخ، درخواست را انتخاب کنید، برگه کوکی‌های آن را باز کنید و نشانگر را روی آن قرار دهید. نماد اطلاعات

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

نمادهای اخطار در کنار درخواست‌هایی که تحت تأثیر مرحله حذف کوکی شخص ثالث قرار گرفته‌اند.

فقط درخواست های مسدود شده را نشان دهید

برای فیلتر کردن همه چیز به جز درخواست های مسدود شده، بررسی کنید چک باکس. درخواست های مسدود شده برای تست این مورد، می توانید از تب Network request blocking drawer استفاده کنید.

جدول درخواست ها فقط درخواست های مسدود شده را نشان می دهد.

جدول Requests درخواست های مسدود شده را با رنگ قرمز برجسته می کند. نوار وضعیت در پایین تعداد درخواست های نشان داده شده از کل درخواست ها را نشان می دهد.

فقط درخواست های شخص ثالث را نشان دهید

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

جدول درخواست ها فقط درخواست های شخص ثالث را نشان می دهد.

نوار وضعیت در پایین تعداد درخواست های نشان داده شده از کل درخواست ها را نشان می دهد.

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

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

مرتب سازی بر اساس ستون

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

مرتب سازی بر اساس مرحله فعالیت

برای تغییر نحوه مرتب‌سازی درخواست‌های Waterfall ، روی هدر جدول درخواست‌ها کلیک راست کرده، نشانگر را روی Waterfall نگه دارید و یکی از گزینه‌های زیر را انتخاب کنید:

  • زمان شروع اولین درخواستی که شروع شد در بالای صفحه است.
  • زمان پاسخگویی اولین درخواستی که دانلود شروع شد در بالای صفحه است.
  • زمان پایان اولین درخواستی که به پایان رسید در بالای صفحه است.
  • مدت زمان کل درخواست با کوتاه ترین راه اندازی اتصال و درخواست / پاسخ در بالا قرار دارد.
  • تاخیر درخواستی که کمترین زمان را برای پاسخ منتظر ماند در بالای صفحه قرار دارد.

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

در این مثال، آبشار بر اساس مدت زمان کل مرتب شده است. بخش سبک تر هر نوار زمان صرف شده در انتظار است. بخش تاریک تر، زمان صرف شده برای دانلود بایت است.

مرتب سازی آبشار بر اساس مدت زمان کل

درخواست ها را تجزیه و تحلیل کنید

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

مشاهده فهرست درخواست ها

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

جدول درخواست ها

جدول درخواست ها به طور پیش فرض ستون های زیر را نمایش می دهد:

  • نام . نام فایل یا شناسه ای برای منبع.
  • وضعیت . این ستون می تواند مقادیر زیر را نشان دهد:

    مقادیر مختلف در ستون وضعیت

    • کد وضعیت HTTP، به عنوان مثال، 200 یا 404 .
    • CORS error برای درخواست‌ها به دلیل اشتراک‌گذاری منابع متقاطع (CORS) ناموفق بود.
    • (blocked:origin) برای درخواست هایی با سرصفحه های پیکربندی نادرست. ماوس را روی این مقدار وضعیت نگه دارید تا راهنمایی ابزاری را با راهنمایی در مورد مشکل پیش آمده ببینید.
    • (failed) و به دنبال آن پیام خطا.
  • تایپ کنید . نوع MIME منبع درخواستی.

  • آغازگر . اشیا یا فرآیندهای زیر می توانند درخواست ها را آغاز کنند:

    • تجزیه کننده . تجزیه کننده HTML کروم.
    • تغییر مسیر . تغییر مسیر HTTP.
    • اسکریپت یک تابع جاوا اسکریپت
    • دیگر برخی فرآیندها یا اقدامات دیگر، مانند پیمایش به یک صفحه با استفاده از یک پیوند یا وارد کردن یک URL در نوار آدرس.
  • اندازه . اندازه ترکیبی هدرهای پاسخ به اضافه بدنه پاسخ، همانطور که توسط سرور ارائه می شود.

  • زمان کل مدت زمان، از شروع درخواست تا دریافت بایت نهایی در پاسخ.

  • آبشار . تفکیک بصری فعالیت هر درخواست.

اضافه کردن یا حذف ستون ها

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

اضافه کردن یا حذف یک ستون به جدول درخواست ها.

می‌توانید ستون‌های اضافی زیر را اضافه یا حذف کنید: مسیر ، نشانی اینترنتی ، روش ، پروتکل ، طرح ، دامنه ، آدرس راه دور ، فضای آدرس راه دور ، فضای آدرس آغازگر ، کوکی‌ها ، تنظیم کوکی‌ها ، اولویت ، شناسه اتصال ، موارد لغو شده ، و آبشار .

اضافه کردن ستون های سفارشی

برای افزودن یک ستون سفارشی به جدول درخواست‌ها :

  1. روی هدر جدول درخواست‌ها کلیک راست کرده و Response Headers > Manage Header Columns را انتخاب کنید.
  2. در پنجره گفتگو، روی افزودن سرصفحه سفارشی کلیک کنید، نام آن را وارد کنید و روی افزودن کلیک کنید.

اضافه کردن یک ستون سفارشی به جدول درخواست ها.

درخواست ها را بر اساس فریم های درون خطی گروه بندی کنید

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

برای گروه بندی درخواست ها بر اساس iframes، تنظیمات را باز کنید تنظیمات. داخل پنل Network و بررسی کنید چک باکس. گروه به فریم

گزارش درخواست شبکه با درخواست های گروه بندی شده بر اساس iframe.

برای مشاهده درخواستی که توسط یک قاب درون خطی آغاز شده است، آن را در گزارش درخواست گسترش دهید.

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

از آبشار برای مشاهده زمان بندی درخواست ها در رابطه با یکدیگر استفاده کنید. به طور پیش فرض، Waterfall بر اساس زمان شروع درخواست ها سازماندهی می شود. بنابراین، درخواست‌هایی که دورتر به سمت چپ هستند، زودتر از درخواست‌هایی که دورتر از سمت راست هستند، شروع شده‌اند.

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

ستون Waterfall از پنجره Requests.

پیام های یک اتصال WebSocket را تجزیه و تحلیل کنید

برای مشاهده پیام های یک اتصال WebSocket:

  1. در زیر ستون نام جدول درخواست‌ها ، روی URL اتصال WebSocket کلیک کنید.
  2. روی تب Messages کلیک کنید. جدول 100 پیام آخر را نشان می دهد.

برای بازخوانی جدول، روی نام اتصال WebSocket در زیر ستون نام جدول درخواست‌ها دوباره کلیک کنید.

تب پیام ها

جدول شامل سه ستون است:

  • داده ها محموله پیام اگر پیام متنی ساده باشد، در اینجا نمایش داده می شود. برای کدهای باینری، این ستون نام و کد آن کد را نمایش می دهد. اپکدهای زیر پشتیبانی می شوند: Continuation Frame، Binary Frame، Connection Close Frame، Ping Frame و Pong Frame.
  • طول . طول بار پیام، بر حسب بایت.
  • زمان زمان دریافت یا ارسال پیام

پیام ها با توجه به نوع آنها کد رنگی می شوند:

  • پیامک های خروجی سبز روشن هستند.
  • پیامک های دریافتی سفید هستند.
  • کدهای عملیات WebSocket به رنگ زرد روشن هستند.
  • خطاها قرمز روشن هستند.

رویدادها را در یک جریان تجزیه و تحلیل کنید

برای مشاهده رویدادهایی که سرورها از طریق Fetch API ، EventSource API و XHR پخش می کنند:

  1. درخواست های شبکه را در صفحه ای که رویدادها را پخش می کند، ضبط کنید . به عنوان مثال، این صفحه نمایشی را باز کنید و روی هر یک از سه دکمه کلیک کنید.
  2. در Network ، یک درخواست را انتخاب کنید و تب EventStream را باز کنید.

تب EventStream.

برای فیلتر کردن رویدادها، یک عبارت منظم را در نوار فیلتر در بالای تب EventStream مشخص کنید.

برای پاک کردن لیست رویدادهای ضبط شده، روی پاک کردن کلیک کنید.

مشاهده پیش نمایش بدنه پاسخ

برای مشاهده پیش نمایش بدنه پاسخ:

  1. روی URL درخواست، در زیر ستون نام جدول درخواست‌ها کلیک کنید.
  2. روی تب Preview کلیک کنید.

این تب بیشتر برای مشاهده تصاویر مفید است.

تب Preview.

مشاهده بدنه پاسخ

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

  1. روی URL درخواست، در زیر ستون نام جدول درخواست‌ها کلیک کنید.
  2. روی تب Response کلیک کنید.

تب Response.

مشاهده سرصفحه های HTTP

برای مشاهده داده های هدر HTTP یک درخواست:

  1. روی یک درخواست در جدول درخواست ها کلیک کنید.
  2. برگه Headers را باز کنید و به قسمت های General ، Response Headers ، Request Headers و در صورت تمایل، Early Hints Headers بروید.

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

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

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

منبع هدر HTTP را مشاهده کنید

به طور پیش فرض، تب Headers نام سرصفحه ها را بر اساس حروف الفبا نشان می دهد. برای مشاهده نام سرصفحه های HTTP به ترتیب دریافت شده:

  1. برای درخواستی که به آن علاقه دارید، برگه سرصفحه ها را باز کنید. مشاهده سرصفحه های HTTP را ببینید.
  2. روی مشاهده منبع ، در کنار بخش درخواست سرصفحه یا سرصفحه پاسخ کلیک کنید.

هشدار سرصفحه های موقت

گاهی اوقات تب Headers نشان می دهد که Provisional headers are shown... پیام هشدار. این ممکن است به دلایل زیر باشد:

  • درخواست از طریق شبکه ارسال نشده است، اما از یک حافظه پنهان محلی ارائه شده است، که سرصفحه های درخواست اصلی را ذخیره نمی کند. در این صورت، می‌توانید برای مشاهده سرصفحه‌های درخواست کامل ، کش را غیرفعال کنید . پیام هشدار سرصفحه موقت.

  • منبع شبکه معتبر نیست. به عنوان مثال، fetch("https://jec.fish.com/unknown-url/") در کنسول اجرا کنید. پیام هشدار سرصفحه موقت.

DevTools همچنین به دلایل امنیتی می تواند فقط هدرهای موقت را نمایش دهد.

مشاهده محموله درخواستی

برای مشاهده payload درخواست، یعنی پارامترهای رشته پرس و جو و داده های فرم، درخواستی را از جدول Requests انتخاب کنید و تب Payload را باز کنید.

تب Payload.

مشاهده منبع بار

به طور پیش فرض، DevTools محموله را به شکلی قابل خواندن برای انسان نشان می دهد.

برای مشاهده منابع پارامترهای رشته کوئری و داده های فرم، در تب Payload ، روی مشاهده منبع در کنار بخش Query String Parameters یا Form Data کلیک کنید.

دکمه های منبع مشاهده

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

برای تغییر حالت رمزگذاری URL برای آرگومان ها، در برگه Payload ، روی view decoded یا view-URL-encoded کلیک کنید.

کدگذاری URL را تغییر دهید.

مشاهده کوکی ها

برای مشاهده کوکی های ارسال شده در هدر HTTP درخواست:

  1. روی URL درخواست، در زیر ستون نام جدول درخواست‌ها کلیک کنید.
  2. روی تب Cookies کلیک کنید.

برگه کوکی ها.

برای توضیح هر یک از ستون‌ها، فیلدها را ببینید.

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

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

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

  1. روی URL درخواست، در زیر ستون نام جدول درخواست‌ها کلیک کنید.
  2. روی زبانه Timeing کلیک کنید.

برای دسترسی سریع‌تر به این داده‌ها ، پیش‌نمایش تفکیک زمان‌بندی را ببینید.

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

برای اطلاعات بیشتر در مورد هر یک از مراحلی که ممکن است در برگه زمان‌بندی مشاهده کنید ، مراحل توضیح زمان‌بندی را ببینید.

پیش نمایش تفکیک زمان بندی

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

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

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

مراحل شکست زمان بندی توضیح داده شده است

در اینجا اطلاعات بیشتری در مورد هر یک از مراحلی که ممکن است در برگه زمان‌بندی مشاهده کنید آمده است:

  • در صف . مرورگر درخواست ها را قبل از شروع اتصال و زمانی که:
    • درخواست هایی با اولویت بالاتر وجود دارد.
    • در حال حاضر شش اتصال TCP برای این مبدا باز است، که محدودیت است. فقط برای HTTP/1.0 و HTTP/1.1 اعمال می شود.
    • مرورگر به طور مختصر در حال تخصیص فضا در حافظه پنهان دیسک است.
  • متوقف شد . این درخواست ممکن است پس از شروع اتصال به هر یک از دلایل توضیح داده شده در صف متوقف شود.
  • جستجوی DNS مرورگر در حال حل و فصل آدرس IP درخواست است.
  • اتصال اولیه . مرورگر در حال برقراری یک اتصال است، از جمله دست دادن TCP یا تلاش مجدد و مذاکره برای SSL.
  • مذاکره پروکسی . مرورگر در حال مذاکره با یک سرور پراکسی است.
  • درخواست ارسال شد . درخواست در حال ارسال است.
  • آماده سازی ServiceWorker . مرورگر در حال راه اندازی سرویس دهنده است.
  • درخواست به ServiceWorker . درخواست برای کارمند خدمات ارسال می شود.
  • انتظار (TTFB) . مرورگر منتظر اولین بایت پاسخ است. TTFB مخفف Time To First Byte است. این زمان بندی شامل 1 رفت و برگشت تاخیر و زمانی است که سرور برای آماده سازی پاسخ صرف کرده است.
  • دانلود محتوا . مرورگر پاسخ را مستقیماً از شبکه یا از یک سرویس دهنده دریافت می کند. این مقدار کل زمان صرف شده برای خواندن بدنه پاسخ است. مقادیر بزرگتر از حد انتظار می تواند نشان دهنده کندی شبکه باشد یا اینکه مرورگر مشغول انجام کارهای دیگری است که خواندن پاسخ را به تاخیر می اندازد.

مشاهده آغازگرها و وابستگی ها

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

مشاهده آغازگرها و وابستگی های یک درخواست.

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

مشاهده رویدادهای بارگذاری

DevTools زمان DOMContentLoaded و load رویدادها را در چندین مکان در پانل شبکه نمایش می دهد. رویداد DOMContentLoaded آبی رنگ و رویداد load قرمز است.

مکان های DOMContentLoaded و بارگیری رویدادها در پانل شبکه.

تعداد کل درخواست ها را مشاهده کنید

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

تعداد کل درخواست‌ها از زمان باز شدن DevTools.

اندازه کل منابع منتقل شده و بارگذاری شده را مشاهده کنید

DevTools اندازه کل منابع منتقل شده و بارگذاری شده (غیر فشرده) را در قسمت Summary در پایین پانل شبکه فهرست می کند.

اندازه کل منابع منتقل شده و بارگذاری شده.

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

مشاهده پشته ردیابی که باعث درخواست شده است

هنگامی که یک دستور جاوا اسکریپت باعث درخواست یک منبع می شود، ماوس را روی ستون Initiator نگه دارید تا ردیابی پشته منتهی به درخواست را مشاهده کنید.

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

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

تنظیمات را بررسی کنید تنظیمات. > سطرهای درخواست بزرگ و سپس به مقدار پایین ستون Size نگاه کنید.

نمونه ای از منابع غیر فشرده

در این مثال، اندازه فشرده شده سند www.google.com که از طریق شبکه ارسال شده بود 43.8 KB بود، در حالی که اندازه فشرده نشده 136 KB بود.

داده های درخواست ها را صادر کنید

تمام درخواست های شبکه را در یک فایل HAR ذخیره کنید

HAR (بایگانی HTTP) فرمت فایلی است که توسط چندین ابزار جلسه HTTP برای صادرات داده های گرفته شده استفاده می شود. فرمت یک شی JSON با مجموعه خاصی از فیلدها است.

شما می توانید تمام درخواست های شبکه را به دو روش در یک فایل HAR ذخیره کنید:

  • روی هر درخواستی در جدول Requests کلیک راست کرده و Save all as HAR with content را انتخاب کنید. Save all as HAR with content را انتخاب کنید.
  • کلیک کنید صادرات. HAR را در نوار اقدام در بالای پانل شبکه صادر کنید. دکمه Export HAR در نوار عمل در بالا.

هنگامی که یک فایل HAR دارید، می توانید آن را به دو روش برای تجزیه و تحلیل دوباره به DevTools وارد کنید:

  • فایل HAR را در جدول Requests بکشید و رها کنید.
  • کلیک کنید واردات. HAR را در نوار عمل در بالای پانل شبکه وارد کنید.

یک درخواست، مجموعه ای فیلتر شده از درخواست ها یا همه آنها را در کلیپ بورد کپی کنید

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

برای کپی کردن یک درخواست، پاسخ آن، یا ردیابی پشته:

  • URL را کپی کنید . URL درخواست را در کلیپ بورد کپی کنید.
  • به صورت cURL کپی کنید . درخواست را به صورت دستور cURL کپی کنید.
  • به عنوان PowerShell کپی کنید . درخواست را به عنوان یک فرمان PowerShell کپی کنید.
  • کپی به عنوان واکشی درخواست را به عنوان یک تماس واکشی کپی کنید.
  • کپی به عنوان واکشی (Node.js) . درخواست را به عنوان یک تماس واکشی Node.js کپی کنید.
  • پاسخ را کپی کنید . بدنه پاسخ را در کلیپ بورد کپی کنید.
  • ردیابی پشته را کپی کنید . آهنگ پشته درخواست را در کلیپ بورد کپی کنید.

برای کپی کردن همه درخواست ها:

  • همه URL ها را کپی کنید . URL های همه درخواست ها را در کلیپ بورد کپی کنید.
  • همه را به صورت cURL کپی کنید . همه درخواست ها را به صورت زنجیره ای از دستورات cURL کپی کنید.
  • همه را به عنوان PowerShell کپی کنید . همه درخواست ها را به صورت زنجیره ای از دستورات PowerShell کپی کنید.
  • همه را به عنوان واکشی کپی کنید . همه درخواست ها را به صورت زنجیره ای از تماس های واکشی کپی کنید.
  • همه را به عنوان واکشی کپی کنید (Node.js) . همه درخواست‌ها را به‌عنوان زنجیره‌ای از تماس‌های واکشی Node.js کپی کنید.
  • همه را به عنوان HAR کپی کنید . همه درخواست ها را به عنوان داده های HAR کپی کنید.

انتخاب گزینه های کپی

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

  • همه URL های فهرست شده را کپی کنید . URL های تمام درخواست های فیلتر شده را در کلیپ بورد کپی کنید.
  • همه لیست شده را به عنوان cURL کپی کنید . تمام درخواست های فیلتر شده را به عنوان زنجیره ای از دستورات cURL کپی کنید.
  • همه فهرست شده به عنوان PowerShell را کپی کنید . تمام درخواست های فیلتر شده را به عنوان زنجیره ای از دستورات PowerShell کپی کنید.
  • همه لیست شده را به عنوان واکشی کپی کنید . همه درخواست های فیلتر شده را به عنوان زنجیره ای از تماس های واکشی کپی کنید.
  • همه موارد فهرست شده به عنوان واکشی (Node.js) را کپی کنید . همه درخواست های فیلتر شده را به عنوان زنجیره ای از تماس های واکشی Node.js کپی کنید.
  • همه فهرست شده به عنوان HAR را کپی کنید . تمام درخواست های فیلتر شده را به عنوان داده های HAR کپی کنید.

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

طرح پنل شبکه را تغییر دهید

بخش‌های رابط کاربری پنل شبکه را بزرگ یا کوچک کنید تا روی آنچه برایتان مهم است تمرکز کنید.

پنجره فیلترها را مخفی کنید

به طور پیش‌فرض، DevTools صفحه فیلترها را نشان می‌دهد. روی Filter کلیک کنید فیلتر کنید. برای پنهان کردن آن

دکمه Hide Filters.

از ردیف های درخواست بزرگ استفاده کنید

هنگامی که می خواهید فضای خالی بیشتری در جدول درخواست های شبکه خود داشته باشید از ردیف های بزرگ استفاده کنید. برخی از ستون ها نیز هنگام استفاده از ردیف های بزرگ، اطلاعات کمی بیشتر ارائه می دهند. به عنوان مثال، مقدار پایین ستون Size اندازه فشرده نشده یک درخواست است و ستون Priority اولویت واکشی اولیه (مقدار پایین) و نهایی (مقدار بالا) را نشان می دهد.

تنظیمات را باز کنید تنظیمات. و روی Big request rows کلیک کنید تا ردیف های بزرگ را ببینید.

ردیف‌های درخواست بزرگ روشن شد.

تراک نمای کلی را مخفی کنید

به‌طور پیش‌فرض، DevTools مسیر Overview را نشان می‌دهد. تنظیمات را باز کنید تنظیمات. و برای پنهان کردن آن، کادر نمایش نمای کلی را پاک کنید.

کادر بررسی نمای کلی نمایش.