Un pannello di rete senza DevTools — la scheda Network di JustZix
Il pannello Network dei DevTools ha un difetto ostinato: registra solo mentre e aperto. Ricarichi, dimentichi di aprirlo prima, e la richiesta che ti serviva e sparita. La Output Console di JustZix ha una scheda Network che vive dentro la pagina, cattura il traffico tramite chrome.webRequest e mantiene un buffer in background — cosi vede le richieste partite prima che tu aprissi la finestra. Ecco come funziona e dove si colloca.
Come funziona la cattura: chrome.webRequest
La scheda Network non aggancia fetch o XMLHttpRequest nel codice della pagina. Usa chrome.webRequest — un'API a livello di browser a cui l'estensione attinge tramite il permesso webRequest nel manifest. Questo significa che osserva le richieste a livello del browser, lo stesso punto in cui opera lo stack di rete.
La conseguenza pratica e la funzione di punta: un buffer in background. L'estensione mantiene una registrazione continua delle richieste della scheda. Quando apri la Output Console, la scheda Network e gia popolata con cio che e accaduto prima che tu arrivassi. Niente balletto del "ricarica per catturare".
Aprire la scheda Network
Apri la Output Console dal menu del pulsante flottante di JustZix, oppure come finestra TEMP con Ctrl+Alt+K, poi passa alla scheda Network. Il suo badge mostra il conteggio live delle richieste. Grazie al buffer, la lista non e vuota nemmeno su una pagina caricata minuti fa.
Cosa significa ogni colonna
Ogni richiesta catturata e una riga. Le colonne:
| Colonna | Significato |
|---|---|
| Method | Verbo HTTP — GET, POST, PUT, DELETE, … |
| URL | L'URL completo della richiesta. |
| Status | Codice di stato HTTP — 200, 301, 404, 500, … |
| Resource type | Che tipo di richiesta: document, script, stylesheet, image, xhr/fetch, font, … |
| Size | Quanti byte ha trasferito la richiesta. |
| Duration | Quanto e durata la richiesta, in millisecondi. |
| Remote address | L'indirizzo IP effettivamente raggiunto dalla richiesta. |
| Initiator | Cosa ha innescato la richiesta — lo script o la risorsa che l'ha avviata. |
Method, status e URL ti dicono cosa e successo. Size e duration ti dicono quanto e costato. Remote address e Initiator ti dicono dove e andata e chi l'ha avviata — le due colonne piu importanti quando dai la caccia a una richiesta che non hai scritto tu.
La barra dei filtri contestuale — tre righe
La barra dei filtri della Output Console e contestuale; sulla scheda Network si espande in tre righe di controlli:
- Tipo di risorsa — una riga di caselle di spunta: document, script, stylesheet, image, xhr/fetch, font e altro ancora. Deseleziona i tipi che non ti interessano. Stai facendo il debug di un'API? Mantieni solo xhr/fetch e il rumore di immagini e font svanisce.
- Classe di stato HTTP — una riga di caselle di spunta per classe:
2xx,3xx,4xx,5xx. Deseleziona2xxe3xxper vedere solo i fallimenti. - Dimensione + durata + dominio — due slider di intervallo (0–100000, durata in millisecondi) piu un campo di filtro per dominio.
Le righe di caselle hanno scorciatoie seleziona tutto / pulisci tutto, cosi puoi azzerare tutto e spuntare l'unico tipo che vuoi, o viceversa — niente clic su dieci caselle a mano.
Gli slider e il filtro per dominio
Gli slider di intervallo trasformano un vago sospetto in una query precisa:
- Slider della durata — imposta un minimo e sopravvivono solo le richieste lente. Trascinalo fino a
2000ms e hai una lista di tutto cio che ha impiegato piu di due secondi. - Slider della dimensione — stessa idea per i byte. Imposta una soglia e i payload eccessivi — l'immagine hero non ottimizzata, il blob JSON da 400 KB — vengono a galla.
- Filtro per dominio — digita un frammento di dominio per mantenere solo le richieste verso quell'host. Digita
google-analyticsodoubleclicke stai guardando esattamente il traffico di terze parti che volevi verificare.
Tutto questo si combina con la casella di ricerca sempre visibile sotto la barra dei filtri — un filtro live, per sottostringa e senza distinzione tra maiuscole e minuscole sulle righe. Esc svuota la ricerca.
Caso d'uso 1 — debug delle chiamate API
Pulisci la riga del tipo di risorsa, spunta solo xhr/fetch. Ora la scheda Network e solo il traffico API della tua applicazione — niente script, niente immagini. Attiva l'azione di cui stai facendo il debug e osserva la richiesta comparire: metodo, URL, stato, quanto ha impiegato. Se lo stato e sbagliato, sai subito se il problema e la richiesta o il codice che gestisce la risposta.
Caso d'uso 2 — trovare richieste lente o sovradimensionate
Trascina lo slider della durata fino a una soglia — diciamo 1500 ms — e la lista si riduce alle tue richieste piu lente. Fai lo stesso con lo slider della dimensione per far emergere i payload pesanti. Due trascinamenti e hai una rosa di candidati per le prestazioni: le richieste che vale davvero la pena ottimizzare, separate dalle decine che vanno bene.
Caso d'uso 3 — individuare i fallimenti 4xx e 5xx
Questo e quello che la scheda Errors non puo fare per te. Un fetch o XHR fallito non e un'eccezione JavaScript — non raggiunge mai la scheda Errors. Per trovare le richieste rotte, vai alla scheda Network e deseleziona 2xx e 3xx nella riga dello stato. Cio che resta e ogni 4xx e 5xx: l'endpoint mancante, il fallimento di autenticazione, l'errore del server. Aggiungi un termine di ricerca per individuare un singolo percorso.
Caso d'uso 4 — verificare tracker e beacon di terze parti
Ogni sito carica cose che non ha necessariamente dichiarato — analytics, pixel pubblicitari, beacon. Digita un dominio di tracker nel filtro per dominio, oppure osserva la colonna Initiator per vedere quale script ha attivato quale beacon. Combinato con la colonna Remote address puoi sapere esattamente dove stanno andando i dati. E una verifica della privacy rapida e onesta senza alcuno strumento specialistico.
Confronto onesto con il pannello Network dei DevTools
Il pannello Network dei DevTools e piu potente — questa scheda non finge il contrario. Ma i compromessi sono reali e vanno in entrambe le direzioni:
| Scheda Network di JustZix | Network dei DevTools | |
|---|---|---|
| Dove vive | Dentro la pagina, finestra trascinabile | Pannello separato agganciato/sganciato |
| Richiede i DevTools | No | Si |
| Cattura prima della tua apertura | Si — buffer in background | No — solo mentre e aperto |
| Metadati della richiesta | Si — metodo, stato, dimensione, durata, IP, initiator | Si |
| Corpi delle risposte | No | Si |
| Header di richiesta/risposta, waterfall dei tempi | No | Si |
La limitazione decisiva: chrome.webRequest fornisce i metadati della richiesta, non i corpi delle risposte. Se hai bisogno di leggere il JSON restituito da una richiesta, i DevTools restano il tuo strumento. Se hai bisogno di sapere quali richieste sono partite, se hanno avuto successo, quanto erano lente e dove sono andate — incluse le richieste precedenti al momento in cui hai iniziato a guardare — la scheda Network lo fa in-scheda, senza alcun DevTools.
Quando usare quale
- Scheda Network — triage rapido, macchine bloccate, catturare le richieste partite al caricamento della pagina, verificare il traffico di terze parti, condividere una configurazione di debug come parte di una regola.
- Network dei DevTools — ispezionare i corpi delle risposte, leggere gli header, il waterfall dei tempi, il throttling, riprodurre le richieste.
Non sono rivali. La scheda Network gestisce la domanda quotidiana "cosa sta facendo questa pagina sulla rete"; i DevTools gestiscono l'approfondimento.
Vedi anche
- La Output Console ricostruita — tutte e sei le schede spiegate
- Esempi di JustZix — regole CSS e JS pronte all'uso
Un pannello di rete che cattura da prima della tua apertura, proprio dentro la scheda — niente F12 richiesto. Scarica JustZix — e gratuito, gira su Chrome 100+ e richiede circa due minuti per l'installazione.
Valuta questo articolo
Nessuna valutazione — sii il primo.