El Monitor de xarxa captura i mostra cada petició de xarxa realitzada per la pàgina actual — crides a l'API XHR/Fetch, càrregues de scripts, recuperacions de fulls d'estil, descàrregues d'imatges, fitxers de fonts i més. Visualitza adreces URL, mètodes HTTP, codis d'estat, mides de resposta i temps — tot en un panell flotant que s'actualitza en viu sense obrir les DevTools del navegador.
La pestanya Xarxa (Network) de les DevTools del Chrome és potent però pesada — ocupa un espai important a la pantalla, es reinicia quan navegues i t'obliga a allunyar-te del contingut de la pàgina. El Monitor de xarxa ofereix les funcions essencials de monitoratge de xarxa en un panell flotant lleuger que es troba a sobre de la pàgina. Intercepta les peticions XHR i Fetch i monitoritza la càrrega de recursos mitjançant la Performance API, mostrant cada petició de xarxa a mesura que es produeix. Cada petició mostra l'adreça URL, el mètode HTTP (GET, POST, PUT, DELETE), el codi d'estat (codificat per colors: verd per a 2xx, groc per a 3xx, vermell per a 4xx/5xx), la mida de la resposta en bytes i la durada en mil·lisegons. Fes clic a qualsevol petició per ampliar-ne els detalls: capçaleres de petició, capçaleres de resposta, càrrega útil de la petició (payload per a POST/PUT), previsualització del cos de la resposta i el desglossament del temps. Filtra per tipus (XHR/Fetch, JS, CSS, Imatges, Fonts) per centrar-te en un trànsit específic.
Cada petició de xarxa apareix al panell a mesura que es produeix — càrregues de pàgina, crides a l'API, recursos carregats sota demanda i peticions en segon pla. El flux s'actualitza en temps real sense necessitat de cap refresc manual.
Fes clic a qualsevol petició per veure els detalls complets: URL de la petició, mètode, capçaleres, càrrega útil (per a POST/PUT), capçaleres de resposta, previsualització del cos de la resposta (JSON autoformatat), codi d'estat, mida i desglossament del temps.
Filtra les peticions per tipus: XHR/Fetch (crides a l'API), JS (scripts), CSS (fulls d'estil), IMG (imatges), Font (fonts web) o Totes. Aïlla el trànsit de l'API de la càrrega de recursos per centrar-te en el que importa.
Els codis d'estat estan codificats per colors per a un reconeixement instantani: verd per a 2xx (èxit), groc per a 3xx (redireccions), vermell per a 4xx (errors del client) i 5xx (errors del servidor). Les peticions fallides són visibles immediatament.
Cada petició mostra la mida de la resposta (en KB) i la durada total (en mil·lisegons). Identifica crides a l'API lentes, recursos massa grans i peticions innecessàries que afecten el rendiment de la pàgina.
Una barra de resum mostra el recompte total de peticions i la mida combinada de totes les peticions capturades. Filtra el resum per veure els totals per tipus — quin ample de banda es gasta en scripts vs imatges vs crides a l'API.
Observa les peticions XHR/Fetch per verificar que el teu frontend estigui cridant als punts de connexió (endpoints) de l'API correctes amb els paràmetres adequats. Fes clic per inspeccionar les càrregues útils de petició i els cossos de resposta — detecta formats de dades incompatibles a l'instant.
Les entrades vermelles 404 i 500 destaquen immediatament recursos trencats o crides a l'API fallides. Mira quines adreces URL estan fallant, quan fallen i quina resposta d'error retorna el servidor.
Ordena per durada per trobar les peticions més lentes. Ordena per mida per trobar els recursos més grans. Els totals del resum mostren la imatge completa de l'ample de banda: la pàgina fa massa peticions o descarrega massa dades?
Mira quines peticions de xarxa realitza la pàgina en segon pla: crides d'analítica, peticions de latència (heartbeat), peticions de sondeig (polling), recursos carregats sota demanda. Entén tota l'activitat de la xarxa més enllà del que és visible per a l'usuari.
Filtra les peticions i comprova amb quins dominis s'està contactant. Identifica scripts de tercers que fan crides de xarxa inesperades: píxels de seguiment, recollida de dades o crides a l'API externes que no coneixies.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona del Monitor de xarxa. S'obre un panell i comença a capturar peticions de xarxa immediatament.
Utilitza la pàgina amb normalitat. Cada petició de xarxa apareix al flux a mesura que es realitza — es capturen totes les crides a l'API, càrregues de recursos i peticions en segon pla.
Fes clic als filtres de tipus (XHR, JS, CSS, IMG, Font) per reduir la vista. Mostra només les crides a l'API per depurar l'obtenció de dades, o només les imatges per comprovar la càrrega de recursos.
Fes clic a qualsevol fila de petició per ampliar els seus detalls: URL, capçaleres, càrrega útil, cos de la resposta, codi d'estat, mida i temps.
Els codis d'estat vermells (404, 500) indiquen peticions fallides. Les durades lentes assenyalen colls d'ampolla en el rendiment. Les mides grans suggereixen recursos que necessiten optimització.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.
