In Chrome DevTools, il riquadro Rete che offre informazioni preziose sull'attività di rete di una pagina web è uno degli strumenti più utilizzati.
Questo articolo illustra una serie di miglioramenti molto richiesti al riquadro Rete apportati da Ioana Forfota e Silvia Eremia nel corso del loro stage STEP. Questi miglioramenti erano attesi con impazienza e sono stati selezionati con cura dall'ampio backlog del tracker dei problemi di Chromium e rendono il riquadro più accessibile, intuitivo e informativo.
Grazie a queste nuove funzionalità, il riquadro Rete consente agli sviluppatori web di:
- Concentrati solo sulle richieste di rete pertinenti.
- Comprendi i codici di stato HTTP senza dover fare riferimento a fonti esterne.
- Identifica e risolvi rapidamente gli errori di richiesta.
- Scopri le risposte dei sottotipi JSON.
Continua a leggere per tutti i dettagli.
Filtrare le richieste di estensione di Chrome
Le estensioni di Chrome possono effettuare le proprie richieste di rete, che vengono visualizzate insieme alle richieste della pagina nel riquadro Rete. Se non stai sviluppando attivamente un'estensione, queste richieste probabilmente non saranno pertinenti per te. In precedenza, l'unico modo per nasconderli era utilizzare il filtro -scheme:chrome-extension
o il debug in modalità Navigazione in incognito.
Da Chrome 117 questa operazione è diventata più semplice. Per semplificare il riquadro Rete, DevTools ora offre una casella di controllo per escludere le richieste delle estensioni di Chrome.
Le discussioni sullo stato predefinito di questa funzionalità sono in corso. Inizialmente, abbiamo preso in considerazione la possibilità di attivarla per impostazione predefinita, con l'idea che potesse migliorare l'esperienza per la maggior parte degli utenti. Tuttavia, questo approccio potrebbe non far sapere ad alcuni utenti che gli URL delle estensioni di Chrome possono attivare richieste. Ciò potrebbe anche comportare delle sfide per gli sviluppatori di estensioni. Pertanto, lo stato predefinito è impostato su "disattivato".
![Le richieste di rete vengono mostrate nel riquadro insieme alle richieste del sito.](https://developer.chrome.com/static/blog/network-panel-improvements/image/before-extension.png?authuser=8&hl=it)
![Le richieste di rete sono nascoste.](https://developer.chrome.com/static/blog/network-panel-improvements/image/after-extension.png?authuser=8&hl=it)
Se attivi questa casella di controllo, l'elenco delle richieste sarà più pulito, meno distratto e più incentrato sulle richieste più importanti, in modo da poter avere un'esperienza di debug molto più piacevole.
Testi di stato della risposta HTTP
Comprendere i codici di stato HTTP è fondamentale per un debug efficace. Tuttavia, cercare costantemente il loro significato può essere spiacevole. DevTools ha introdotto un utile miglioramento: quando passi il mouse sopra un codice di stato nell'elenco delle richieste, una descrizione comando fornisce immediatamente il testo dello stato, un titolo descrittivo che ne chiarisce il significato.
Il testo dello stato è visibile anche nella visualizzazione delle intestazioni, proprio accanto al codice. In precedenza disponibili solo per HTTP/1.1, queste funzionalità sono ora estese a HTTP/2 e HTTP/3. Questi aggiustamenti apparentemente piccoli hanno un impatto significativo, ti fanno risparmiare tempo e ti consentono di concentrarti sul debug anziché cercare i significati del codice.
Visibilità degli errori migliorata
Abbiamo semplificato l'individuazione rapida degli errori e la loro risoluzione senza dover esaminare in dettaglio il riquadro. Per raggiungere questo obiettivo, anziché evidenziare semplicemente i messaggi di errore con modifiche del colore del testo, abbiamo aggiunto icone indicative per attirare l'attenzione sugli errori di richiesta, ad esempio quelli con un codice di stato 404. Questi indicatori discreti, ma utili, rendono gli errori più evidenti, garantendoti di non trascurare problemi importanti.
Sottotipi JSON con stampa in formato leggibile
Spesso lo sviluppo web prevede l'ispezione delle risposte JSON, ma la lettura di JSON non formattati non è molto pratica. Gestire queste risposte, in particolare sottotipi come ld+json
, hal+json
o sparql-results+json
, può essere frustrante, ad esempio quando vengono visualizzate in una singola riga. Per semplificare, DevTools ha introdotto una presentazione più user-friendly e comprimibile per i sottotipi JSON. Ora queste risposte sono formattate, eliminando la necessità per gli sviluppatori di fare affidamento su strumenti esterni. Questo nuovo design offre una rappresentazione semplice e altamente leggibile.
![JSON visualizzato come stringa lunga, che richiede lo scorrimento per la visualizzazione.](https://developer.chrome.com/static/blog/network-panel-improvements/image/before-json.png?authuser=8&hl=it)
![JSON formattato per facilitare la lettura.](https://developer.chrome.com/static/blog/network-panel-improvements/image/after-json.png?authuser=8&hl=it)
Feedback positivo della community
Anche se queste funzionalità sono ancora in fase di adozione, la risposta della community è stata estremamente positiva. La loro implementazione ha soddisfatto molti utenti, che hanno apprezzato i miglioramenti apportati alla loro esperienza. Puoi leggere alcune delle risposte su X:
"Oh, fantastico! Chrome DevTools ha appena fatto un passo avanti mostrando codici di stato HTTP leggibili, rendendo molto più facile capire cosa non ha funzionato con una richiesta di rete." - TribalIdeas su X
"Ultimamente è stato di grande aiuto. Soprattutto per quanto riguarda i moduli con blocchi degli annunci ed estensioni grammaticali". -MrAhmadAwais su X
Vuoi scoprire queste nuove funzionalità? Visita Chrome DevTools e prova il riquadro Rete migliorato. Buon debug!
Scaricare i canali di anteprima
Valuta la possibilità di utilizzare Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano gli utenti.
Contatta il team di Chrome DevTools
Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.
- Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
- Segnala un problema DevTools utilizzando Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
- Invia un tweet all'account @ChromeDevTools.
- Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.