Chrome Dev Tools rete e console

Nella parte 1 - Chrome Dev Tools: Markup and Style, abbiamo esaminato due pannelli: Elementi e risorse. Passando ora, daremo un'occhiata ai prossimi due pannelli: Rete e consolle.

Pannello di rete

Il Rete pannello ci dà una visione delle risorse richieste e scaricate in rete in tempo reale. La visualizzazione del traffico di rete non è l'attività più affascinante, specialmente se sei nuovo nello sviluppo web. Tuttavia, le prestazioni diventano un problema importante, poiché aumenta il traffico del tuo sito. Identificare e correggere le richieste che richiedono molto tempo per completare è un passo importante per l'ottimizzazione di un sito.

Un proxy HTTP, come Charles Proxy, può darti una discreta quantità di informazioni sulla rete del tuo sito web. Detto questo, il Rete pannello offre una quantità sorprendente di informazioni dettagliate; considerando come è solo a pochi clic di distanza, è sicuramente un candidato eccellente per il debug di problemi di rete. Quello che segue è uno screenshot del Rete pannello durante il caricamento del sito mobile di Linkedin su un nuovo caricamento della pagina:

$ 0 restituisce l'elemento attualmente selezionato in Elementi pannello.

1. Questo pulsante apre il Rete pannello. Assicurati di aprire la scheda prima caricamento di una pagina in modo da catturare le richieste di rete (ad esempio aprire una nuova scheda del browser, aprire gli strumenti per sviluppatori, aprire la scheda di rete e quindi caricare l'URL da monitorare)
2. Questa riga contiene una risorsa con informazioni interessanti che tratto nei seguenti punti. La prima colonna è il nome e il percorso della risorsa. Il nome della risorsa verrà visualizzato sulla prima riga mentre il percorso della risorsa viene visualizzato sul secondo.
3. Il metodo HTTP utilizzato per la richiesta.
4. Il codice di stato HTTP restituito dal server. 200 è una risposta comune per una risposta di successo; anche se qualsiasi cosa nel range di 200-299 è considerata OK. Nota come una delle richieste di cui sopra è in rosso. Questo è correlato al codice di risposta HTTP, una risposta non autorizzata 401, perché non sono connesso al sito mobile di LinkedIn.
5. Il tipo di contenuto di una richiesta. Ad esempio, in un POST HTTP (utilizzando la risorsa metrica come esempio), il tipo di contenuto nelle intestazioni di richiesta e risposta è: application / json; mentre le intestazioni di risposta della pagina HTML principale contengono un tipo di contenuto di text / html. Una piccola nota sulla cache dell'applicazione: quando servi un file manifest, assicurati di servirlo con un tipo di contenuto di text / cache-manifest. Durante il debug, la colonna "Tipo" nel file Rete il pannello è il posto giusto per garantire che venga servito correttamente!
6. L'iniziatore è una colonna interessante; ci permette di capire perché una risorsa viene scaricata. Ad esempio, è possibile visualizzare spesso il file __utm.gif nelle sessioni di debugging; è usato da Google Analytics. L'iniziatore mostra come ga.js: 52, un valore in file_name: LINE_NUMBER formato. Con questa colonna, puoi scoprire perché, quando e come vengono scaricate le risorse. Se parser viene mostrato per l'iniziatore, è probabile che il browser abbia avviato la richiesta visualizzando qualcosa come a o >