Network Monitor улавя и показва всяка мрежова заявка, направена от текущата страница — повиквания на XHR/Fetch API, зареждане на скриптове, извличане на таблици със стилове, изтегляне на изображения, файлове с шрифтове и др. Вижте URL адреси, HTTP методи, кодове на състоянието, размери на отговорите и време за изпълнение — всичко това в плаващ панел, който се актуализира на живо, без да отваряте браузърните DevTools.
Табът Network на Chrome DevTools е мощен, но тежък — той заема значително екранно пространство, нулира се при навигация и изисква да се отдалечите от съдържанието на страницата. Network Monitor предоставя основните функции за мониторинг на мрежата в лек плаващ панел, който стои върху страницата. Той прихваща XHR и Fetch заявки и следи зареждането на ресурси чрез Performance API, показвайки всяка мрежова заявка в момента на нейното възникване. Всяка заявка показва URL адреса, HTTP метода (GET, POST, PUT, DELETE), кода на състоянието (цветово кодиран: зелено за 2xx, жълто за 3xx, червено за 4xx/5xx), размера на отговора в байтове и продължителността в милисекунди. Кликнете върху която и да е заявка, за да разширите подробностите за нея: заявки на заглавни части, отговори на заглавни части, полезен товар на заявката (за POST/PUT), преглед на тялото на отговора и разбивка на времето за изпълнение. Филтрирайте по тип (XHR/Fetch, JS, CSS, Images, Fonts), за да се фокусирате върху специфичен трафик.
Всяка мрежова заявка се появява в панела в момента на нейното възникване — зареждания на страници, повиквания на API, ресурси с отложено зареждане (lazy-loaded) и фонови извличания. Потокът се актуализира в реално време без необходимост от ръчно опресняване.
Кликнете върху която и да е заявка, за да видите пълните подробности: URL адрес на заявката, метод, заглавни части, полезен товар, заглавни части на отговора, предварителен преглед на тялото на отговора (автоматично форматиран JSON), код на състоянието, размер и разбивка на времето.
Филтрирайте заявките по тип: XHR/Fetch (повиквания на API), JS (скриптове), CSS (таблици със стилове), IMG (изображения), Font (уеб шрифтове) или All (Всички). Изолирайте API трафика от зареждането на ресурси, за да се фокусирате върху важното.
Кодовете за състояние са цветово кодирани за незабавно разпознаване: зелено за 2xx (успех), жълто за 3xx (пренасочвания), червено за 4xx (клиентски грешки) и 5xx (сървърни грешки). Неуспешните заявки са видими веднага.
Всяка заявка показва размера на отговора (в KB) и общата продължителност (в милисекунди). Идентифицирайте бавни API повиквания, прекалено големи ресурси и ненужни заявки, които влияят на производителността на страницата.
Лентата с резюме показва общия брой заявки и комбинирания размер за всички уловени заявки. Филтрирайте резюмето, за да видите общите суми по тип — колко трафик се харчи за скриптове спрямо изображения или повиквания на API.
Следете XHR/Fetch заявките, за да проверите дали вашият фронтенд вика правилните API крайни точки с правилните параметри. Кликнете, за да инспектирате полезните товари на заявките и телата на отговорите — улавяйте несъответстващи формати на данните мигновено.
Червените записи 404 и 500 веднага подчертават счупени ресурси или неуспешни API повиквания. Вижте кои URL адреси са неуспешни, кога се провалят и какъв отговор за грешка връща сървърът.
Сортирайте по продължителност, за да намерите най-бавните заявки. Сортирайте по размер, за да намерите най-големите ресурси. Общите суми в резюмето показват пълната картина на трафика — прави ли страницата твърде много заявки или изтегля ли твърде много данни?
Вижте какви мрежови заявки прави страницата във фонов режим — аналитични пингове, сърдечни ритми (heartbeat calls), заявки за анкетиране (polling), ресурси с отложено зареждане. Разберете пълната мрежова активност отвъд това, което е видимо за потребителя.
Филтрирайте заявките и проверете с кои домейни се осъществява контакт. Идентифицирайте скриптове на трети страни, които правят неочаквани мрежови повиквания — проследяващи пиксели, събиране на данни или външни API повиквания, за които не сте знаели.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Network Monitor. Отваря се панел и веднага започва да улавя мрежовите заявки.
Използвайте страницата нормално. Всяка мрежова заявка се появява в потока в момента на създаването ѝ — улавят се API повиквания, зареждания на ресурси и фонови извличания.
Кликнете върху филтрите за тип (XHR, JS, CSS, IMG, Font), за да стесните изгледа. Покажете само API повиквания за дебъгване на извличането на данни или само изображения за проверка на зареждането на активите.
Кликнете върху който и да е ред със заявка, за да разширите нейните подробности: URL, заглавни части, полезен товар, тяло на отговора, код на състоянието, размер и време.
Червените кодове на състоянието (404, 500) указват неуспешни заявки. Бавната продължителност сигнализира за тесни места в производителността. Големите размери предполагат ресурси, които се нуждаят от оптимизация.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
