Come aprire la scheda Rete e cosa significa davvero XHR

Qualcuno ti ha detto di «aprire la scheda Rete e verificare se c’è qualche richiesta che fallisce» e ora stai guardando un pannello pieno di righe, colori e colonne che non significano ancora nulla. Questo è il percorso più breve da qui alla risposta che cercavano.

La scheda Rete registra ogni richiesta che la pagina fa: ogni immagine, ogni script e ogni chiamata che il tuo browser invia a un server per recuperare i dati. Quando una pagina è rotta in un modo che non puoi vedere - un pulsante che non fa nulla, una lista che non si carica, un salvataggio che fallisce silenziosamente - la ragione è molto spesso una di quelle richieste, ed è qui che tutto è scritto.

Come aprirla

Chrome, Edge, Brave e altri browser basati su Chromium. Premi F12, o Cmd + Option + I su un Mac. Si aprono gli strumenti per gli sviluppatori; fai clic sulla scheda Rete in alto. Se non la vedi, è nascosta dietro la freccia di overflow ».

Firefox. Lo stesso F12, poi la scheda Rete.

Safari. La scheda Rete è nascosta dietro un menu che è disattivato per impostazione predefinita. Apri Impostazioni, vai a Avanzate e seleziona Mostra funzioni per sviluppatori web. Poi Sviluppo, Mostra Ispettore web, e la scheda Rete è lì.

Il pannello è quasi sempre vuoto quando si apre, e questo è la prima cosa che confonde le persone.

Perché è vuoto e come riempirlo

La scheda Rete registra solo mentre è aperta. Non ricorda quello che è successo prima che arrivassi, quindi le richieste che si sono eseguite quando la pagina si è caricata per la prima volta sono già scomparse.

Quindi: con la scheda aperta, ricarica la pagina. Tutto quello che la pagina recupera scorre in come un elenco di righe. Se il problema si verifica quando fai clic su qualcosa invece che al caricamento, non devi nemmeno ricaricare - fai solo la cosa, e osserva le righe apparire mentre lo fai.

Una impostazione merita di essere attivata prima di iniziare: Conserva log (Firefox la chiama allo stesso modo). Senza di essa, una pagina che reindirizza o ricarica cancella l’elenco, e la richiesta che stavi seguendo scompare con esso. Se è selezionata, l’elenco sopravvive, e puoi vedere la richiesta che è successa poco prima che la pagina cambiasse.

Leggere una riga

Ogni riga è una richiesta. Da sinistra a destra, le colonne che contano:

• Nome - il file o l’endpoint che è stato richiesto
• Stato - il codice HTTP che è tornato. Questo è quello che sei stato mandato a guardare
• Tipo - che tipo di cosa era: un documento, uno script, un’immagine, o fetch/xhr per una chiamata di dati
• Tempo - quanto tempo ha impiegato

I colori sono una scorciatoia. Una riga rossa è una richiesta che è fallita. Se qualcuno ha detto «vedi se c’è qualcosa che fallisce», stai cercando il rosso, o uno stato di 400 o superiore.

Fai clic su qualsiasi riga e si apre un pannello con i dettagli: Intestazioni per quello che è stato inviato e ricevuto, Risposta o Anteprima per quello che è tornato, e Timing per dove è andato il tempo. Per una richiesta che non è riuscita, Risposta è di solito dove c’è la spiegazione del server.

Cosa significa XHR, perché è il filtro che ti verrà detto di usare

Lungo la parte superiore del pannello c’è una riga di filtri: Tutti, Fetch/XHR, Doc, CSS, JS, Img. «Apri la scheda Rete e filtra su XHR» è un’istruzione comune, e XHR è la parola meno ovvia in essa.

XHR sta per XMLHttpRequest. In pratica significa una richiesta che la tua pagina ha fatto in background per recuperare i dati, senza caricare una nuova pagina - il modo del web moderno di aggiornare parte di uno schermo senza un ricaricamento completo. Quando digiti in una casella di ricerca e i risultati appaiono sotto, quella è un XHR. Quando un pulsante «Carica di più» aggiunge elementi senza che la pagina lampeggi, quello è un XHR.

Il nome è un incidente storico - la funzione del browser originale è stata costruita per XML, che quasi nessuno invia più; oggi trasportano JSON. Il suo sostituto più recente è la funzione fetch(), che è il motivo per cui il filtro recita Fetch/XHR: due nomi, che significano entrambi la stessa cosa, una richiesta di dati piuttosto che una pagina, un’immagine o un foglio di stile.

Facendo clic su Fetch/XHR nascondi le immagini, gli script e i caratteri e rimangono solo le chiamate di dati, che è quasi sempre dove si trova il fallimento di una funzione rotta. Un pulsante che non fa nulla di solito ha inviato una richiesta; è proprio lì, in rosso, con la ragione nella sua Risposta.

Trasformarlo in qualcosa che puoi inviare

Leggere tu stesso la scheda Rete è una cosa. La parte più difficile è comunicare quello che hai visto alla persona che può risolverlo, perché uno screenshot del pannello perde i dettagli - le intestazioni, il corpo della risposta, l’ordine - che in realtà spiegano il fallimento.

La scheda può esportare l’intera sessione come un file HAR: fai clic con il pulsante destro su qualsiasi riga e scegli Salva tutto come HAR con contenuto. È il log di rete come un file, che qualcuno può aprire nella propria scheda Rete, o nel visualizzatore HAR, esattamente come se l’avesse registrato. Leggi però quella guida prima di inviarne uno - un HAR di solito contiene i tuoi cookie di sessione, e dovrebbe essere trattato come una password.

Se la richiesta che non riesce è una che restituisce «TypeError: Failed to fetch» nella console senza nulla di utile nella scheda Rete, quel caso specifico ha la sua propria spiegazione - di solito significa che la richiesta non è arrivata abbastanza lontano per avere uno stato.

Il log di rete che acquisisce è lo stesso elenco di richieste che avresti letto nella scheda, già salvate e allegate, quindi la persona che prende il report non deve spiegarti come aprirlo. Per tutto quello che lo circonda - quello che ti aspettavi e quello che è successo invece - la guida di segnalazione dei bug ha il modello.