Nascondi le richieste di estensioni e altri miglioramenti al riquadro Rete

Silvia Eremia
Silvia Eremia
Ioana Forfota
Ioana Forfota

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.
Prima: le richieste di rete provenienti dalle estensioni di Chrome sono visibili.
Le richieste di rete sono nascoste.
Dopo: le richieste di rete delle estensioni di Chrome sono nascoste.

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.

La descrizione comando visualizzata quando il cursore viene tenuto sopra il codice di stato.

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.

Il testo dello stato visualizzato con le intestazioni.

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.

L'errore viene evidenziato con un'icona e un colore.

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.
Prima: la risposta LD+JSON non era stampata in modo leggibile.
JSON formattato per facilitare la lettura.
Dopo: la risposta LD+JSON viene stampata in modo leggibile.

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.