Instrumentele Google Chrome rețeaua și consolă

În Partea 1 - Instrumente Chrome Dev: Markup și stil, am analizat două panouri: element și Resurse. Mergând acum, vom examina următoarele două panouri: Reţea și Consolă.

Panoul de rețea

Reţea panoul ne oferă o vedere în resursele care sunt solicitate și descărcate prin rețea în timp real. Afișarea traficului în rețea nu este cea mai plină de farmec - mai ales dacă sunteți nou în dezvoltarea web. Cu toate acestea, performanța devine o problemă importantă, deoarece traficul site-ului dvs. crește. Identificarea și stabilirea solicitărilor care durează mult timp pentru a finaliza este un pas important în optimizarea unui site.

Un proxy HTTP, cum ar fi Charles Proxy, vă poate oferi o cantitate decentă de informații cu privire la rețeaua site-ului dvs. Acestea fiind spuse, Reţea panoul oferă o sumă surprinzătoare de informații detaliate; având în vedere modul în care sunt doar câteva clicuri distanță, este cu siguranță un candidat excelent pentru depanarea problemelor legate de rețea. Următoare este o captură de ecran a Reţea panou când încărcați site-ul mobil Linkedin pe o încărcare nouă a paginii:

$ cu 0 returnează elementul selectat curent în element panou.

1. Acest buton se deschide Reţea panou. Asigurați-vă că ați deschis fila inainte de încărcarea unei pagini astfel încât să capteze solicitările de rețea (de ex., deschideți o filă nouă de browser, deschideți instrumentele dezvoltatorului, deschideți fila de rețea și încărcați în cele din urmă adresa URL pentru a monitoriza)
2. Acest rând conține o resursă cu informații interesante pe care le acoperim în următoarele puncte. Prima coloană este numele și calea resursei. Numele resursei se va afișa pe prima linie, în timp ce pe cea de-a doua se va afișa calea spre resursă.
3. Metoda HTTP utilizată pentru solicitare.
4. Codul de stare HTTP returnat de server. 200 este un răspuns comun pentru un răspuns reușit; deși orice în intervalul 200-299 este considerat drept. Observați cum una dintre cererile de mai sus este în roșu. Acest lucru este legat de codul de răspuns HTTP, un răspuns 401 neautorizat, deoarece nu sunt conectat la site-ul mobil LinkedIn.
5. Tipul de conținut al unei solicitări. De exemplu, într-un POST HTTP (folosind exemplul resursei de valori), tipul de conținut din antetele de solicitare și de răspuns este: application / json; în timp ce antetele principale de răspuns ale paginii HTML conțin un tip de conținut text / html. O notă mică despre memoria cache a aplicației: atunci când se difuzează un fișier manifest, asigurați-vă că îl difuzați cu un tip de conținut de Text / cache-manifest. La depanare, coloana "Type" din Reţea panou este locul pentru a se asigura că este servit corect!
6. Initiatorul este o coloana interesanta; ne permite să vedem de ce este descărcată o resursă. De exemplu, este posibil să vedeți frecvent fișierul __utm.gif în sesiunile de depanare; este utilizat de Google Analytics. Initiatorul arata ca ga.js: 52, o valoare în file_name: LINE_NUMBER format. Cu această coloană, puteți descoperi de ce, când și cum sunt descărcate resursele. Dacă Parser este afișat pentru inițiator, șansele sunt bune că browserul a inițiat cererea când a văzut ceva de genul a sau >