Output Console / Network — nuovi filtri per dominio e slider esponenziali
La scheda Network nell'Output Console ha attraversato la sua più grande ricostruzione da quando è stata rilasciata, a maggio 2026. Nuovi campi di filtro per dominio che accettano molte voci contemporaneamente, Alt+clic per aggiungerne una all'istante, slider per dimensione e tempo che finalmente hanno una granularità fine nella parte bassa, colonne DataLayer ridimensionabili, URL lunghi più leggibili. Ecco una panoramica completa dei cambiamenti dalle v2.13.193–v2.13.205.
"Domini+" e "Domini-" — molti domini in una volta (v2.13.199)
Il vecchio filtro per dominio accettava un solo valore. In pratica monitori più servizi alla volta — analytics + immagini + un'API. Ora ci sono due campi affiancati nella riga di stato:
- "Domini+" — un elenco di domini che vuoi vedere. Una voce passa se corrisponde a uno qualsiasi di essi.
- "Domini-" — un elenco di domini da escludere. Una voce che corrisponde a uno qualsiasi di essi scompare.
In entrambi i campi scrivi molti domini separati da un pipe |, ad esempio cdn.example.com|api.example.com|images.example.com. Il filtro si applica in tempo reale, senza bisogno di confermare.
Alt+clic — aggiungi un dominio direttamente da una riga di Network (v2.13.200)
Invece di digitare il dominio a mano, clicca una riga di Network con un modificatore:
- Alt+clic — aggiunge (o rimuove) il dominio della voce al campo "Domini+".
- Alt+Shift+clic — aggiunge (o rimuove) il dominio al campo "Domini-".
La prima versione della scorciatoia era su Ctrl (v2.13.199), ma Ctrl+clic su macOS è catturato dal sistema operativo come menu contestuale — il clic non arrivava mai al listener. Alt+clic funziona in modo identico su Windows, Linux e macOS e non collide con nessuna loro scorciatoia nativa. La scorciatoia è un toggle: un altro Alt+clic sullo stesso dominio lo rimuove.
Slider per dimensione e tempo — scala esponenziale + campi di input (v2.13.198)
I vecchi slider erano lineari, quindi un passo sul cursore sinistro corrispondeva a ~16 kB o ~1000 ms — bastava spostarli un attimo dallo zero per tagliare via metà delle voci. Ora ottieni:
- Una scala esponenziale (una curva
^3) — la parte bassa del binario copre i valori piccoli con granularità fine (singoli kB / ms per passo), la parte alta copre intervalli ampi. Ciò che di solito ti interessa (risposte piccole, richieste veloci) sta proprio sotto il dito. - Una distanza minima dei cursori più piccola — avvicinando i cursori vicino al fondo della scala ottieni un intervallo piccolissimo invece di, diciamo, "0–112 kB".
- Campi di input ai due lati del binario — digita min e max manualmente (in kB / ms). Il campo e lo slider sono sincronizzati: muovi lo slider, i campi si aggiornano; digita un valore, lo slider salta.
Voci senza dimensione — nascoste quando muovi il filtro (v2.13.197)
Alcune risposte Network non hanno l'header content-length (streaming, chunked). Prima queste voci ignoravano il filtro per dimensione e si mostravano sempre, il che sembrava strano quando muovevi lo slider ("credo di averla filtrata via ma questa ancora c'è"). Ora: uno slider per dimensione spostato nasconde anche le voci senza una dimensione dichiarata. Il comportamento di default (slider sull'intervallo pieno) è invariato.
Accorciamento degli URL lunghi — solo nella riga collassata (v2.13.195)
Una query string lunga poteva occupare l'intera finestra di Network. Ora nella riga collassata (schede Network e All) l'URL viene accorciato a 255 caratteri. Espandi con la freccia (▸/▾) e vedi l'URL completo non troncato — i dettagli sono sempre completi. Le interruzioni di riga ovunque (token lunghi, URL) impediscono che il contenuto fuoriesca oltre i bordi della finestra.
Colonne DataLayer ridimensionabili + font coerente (v2.13.194 + v2.13.196)
La scheda DataLayer ha due colonne: "Nuovi push" e "snapshot di window.dataLayer". La linea centrale tra di esse è ora un divisore trascinabile — la proporzione viene conservata per la sessione per ogni finestra di Output. La ricostruzione continua dell'elenco snapshot della pagina non stacca più le colonne durante il trascinamento (la ricostruzione è in pausa mentre trascini).
L'altro piccolo fix riguardava il font del pannello DataLayer di destra: l'albero window.dataLayer ora eredita la dimensione del font del pannello dell'Output Console (una regola !important precedente bloccava il cambio).
Caso d'uso 1 — triage di performance solo sulle richieste critiche
Atterri sulla pagina di un cliente e vuoi vedere solo le richieste critiche — niente pixel di tracking, niente immagini. In "Domini-" metti google-analytics.com|googletagmanager.com|hotjar.com|facebook.net; lo slider del tempo scende a 500 ms, lo slider della dimensione scende a 50 kB. Ti restano solo le richieste più lente e pesanti e di solito sai già di quale parla la lamentela.
Caso d'uso 2 — debug del tracking, solo i tuoi analytics
Lo scenario opposto: vuoi solo le richieste di tracking. "Domini+" = google-analytics.com|googletagmanager.com|cloudflareinsights.com. Tutto il resto in Network esce di vista, il pannello dataLayer accanto mostra lo stato corrente. Il contatore della scheda mostra ancora quante richieste sono partite in totale, così vedi che quota del traffico è tracking.
Vedi anche
- Output Console — la finestra in cui vive la scheda Network
- Scorciatoie da tastiera di JustZix — il cheat sheet completo — incluso Alt+clic / Alt+Shift+clic
- Finestre nella pagina — finestre per sviluppatori dentro la pagina
Installa JustZix — e tieni un monitor Network di livello DevTools su ogni scheda.
Valuta questo articolo
Nessuna valutazione — sii il primo.