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 condivide una serie di miglioramenti al pannello Network che Ioana Forfota e Silvia Eremia hanno apportato durante il loro tirocinio in STEP. Questi miglioramenti sono stati attesi con impazienza e sono stati accuratamente selezionati dall'ampio arretrato di Issue Tracker di Chromium per rendere il pannello più accessibile, intuitivo e informativo.
Con queste nuove funzionalità, il riquadro Rete offre agli sviluppatori web la possibilità di:
- Concentrati solo sulle richieste di rete pertinenti.
- Comprendere i codici di stato HTTP senza bisogno di riferimenti esterni.
- Identifica e risolvi rapidamente gli errori nelle richieste.
- Comprendere le risposte dei sottotipi JSON.
Leggi per tutti i dettagli.
Filtra le richieste di estensioni di Chrome
Le estensioni di Chrome possono effettuare le proprie richieste di rete, che vengono visualizzate accanto alle richieste della pagina nel riquadro Rete. Se non stai sviluppando attivamente un'estensione, è probabile che queste richieste non siano pertinenti per te. In precedenza, l'unico modo per nasconderli era utilizzare il filtro -scheme:chrome-extension o eseguire il debug in modalità di navigazione in incognito.
A partire da Chrome 117, questo è diventato più semplice. Per riordinare il riquadro Network, DevTools ora offre una casella di controllo per escludere le richieste di estensioni di Chrome.
Sono in corso discussioni sullo stato predefinito di questa funzionalità. Inizialmente abbiamo considerato l'attivazione di questo servizio per impostazione predefinita, con l'idea che potesse migliorare l'esperienza per la maggior parte degli utenti. Tuttavia, questo approccio potrebbe lasciare alcuni utenti non consapevoli del fatto che gli URL delle estensioni di Chrome possono attivare le richieste. Questo potrebbe comportare problemi anche per gli sviluppatori di estensioni. Di conseguenza, lo stato predefinito è impostato su "disattivato".
Quando questa casella di controllo è attivata, il tuo elenco di richieste sarà più pulito, meno invasivo e più incentrato sulle richieste più importanti, così potrai avere un'esperienza di debug molto più piacevole.
Testi di stato della risposta HTTP
Comprendere i codici di stato HTTP è essenziale per un debug efficace. Tuttavia, cercare costantemente il loro significato può essere complicato. DevTools ha introdotto un utile miglioramento: quando posizioni il puntatore del mouse su un codice di stato nell'elenco delle richieste, una descrizione comando ne fornisce immediatamente il testo di stato, ovvero un titolo descrittivo che ne chiarisce il significato.
Il testo dello stato è visibile anche nella visualizzazione delle intestazioni accanto al codice. Sebbene in precedenza disponibili solo per HTTP/1.1, queste funzionalità sono ora estese a HTTP/2 e HTTP/3. Questi apparentemente piccoli aggiustamenti hanno un impatto significativo, ti consentono di risparmiare tempo e di concentrarti sul debug anziché sulla ricerca dei significati del codice.
Visibilità degli errori migliorata
Abbiamo semplificato l'individuazione rapida degli errori e la relativa risoluzione senza dover analizzare in dettaglio il riquadro. A questo scopo, anziché evidenziare semplicemente i messaggi di errore con variazioni di colore del testo, abbiamo aggiunto icone indicative per attirare l'attenzione sugli errori di richiesta, ad esempio quelli con il codice di stato 404. Questi indicatori discreti ma utili renderanno più evidenti gli errori, garantendo di non trascurare problemi importanti.
Stampa dei sottotipi JSON
Lo sviluppo web comporta spesso l'ispezione delle risposte JSON, ma la lettura di JSON non formattati non elaborati è molto scomoda. Gestire queste risposte, in particolare sottotipi come ld+json, hal+json o sparql-results+json, può essere frustrante, ad esempio quando vengono visualizzate su un'unica riga. Per semplificare le cose, DevTools ha introdotto una presentazione comprimibile più facile da usare 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.
Feedback positivo dalla community
Anche se queste funzionalità sono solo nelle prime fasi di adozione, la risposta della community è un feedback estremamente positivo. La loro riuscita implementazione ha soddisfatto molti utenti dei miglioramenti, migliorando notevolmente la loro esperienza. Puoi leggere alcune delle risposte su X:
"Oh, fantastico! ChromeDevTools ha migliorato il suo gioco mostrando codici di stato HTTP leggibili da una persona, rendendo più facile capire cosa non ha funzionato con una richiesta di rete." - TribalIdeas su X
"È stato super utile ultimamente. Soprattutto gestire i moduli con blocchi degli annunci ed estensioni grammaticali."-MrAhmadAwais su X
Vuoi esplorare queste nuove funzionalità? Vai a Chrome DevTools e prova il riquadro Rete migliorato. Buon debug!
Scarica i canali in anteprima
Prendi in considerazione l'utilizzo di Chrome Canary, Dev o beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.
Contattare il team di Chrome DevTools
Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.
- Inviaci un suggerimento o un feedback tramite crbug.com.
- Segnala un problema DevTools utilizzando Altre opzioni
> Guida > Segnala i problemi di DevTools in DevTools. - Tweet all'indirizzo @ChromeDevTools.
- Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.