Google Chrome Dev Tools: Network Panel

Nettverkspanelet er en del av Google Chrome Developers-verktøyene, og det lar deg inspisere ressurser når de får tilgang til over nettverket. Eksemplet demonstrert i dette segmentet vil inspisere den amerikanske utgaven av CNN.com.

Tidligere oppføringer i serien Google Chrome Developer Tools inkluderer:

  • Google Chrome Developer Tools: Elements Panel
  • Google Chrome Developer Tools: Resources Panel
  • Google Chrome Developer Tools: Console Panel
I Google Chrome, gå til http://www.cnn.com, høyreklikk deretter hvor som helst i nettleseren og velg Inspekter element; Når verktøypanelet åpnes, klikker du for å velge Nettverk, og trykk deretter F5 på tastaturet for å oppdatere siden. Du vil merke at tidslinjen begynner å fylle filnavn i en fosseliste over tilknyttede nettverksaktiviteter, som vist i figur A:

Latens, eller tiden mellom inngivelse av den første forespørselen og serverens første svar vises på tidslinjen som den lysere skyggen for hver navngitte fil. Å flytte markøren over en "stolpe" på tidslinjen vil vise en detaljert ballong, som i eksemplet vist i figur B. Filen http://www.cnn.com viser DNS-oppslaget på 42ms, Koble til på 67ms, sender kl. 0, venter på 113 ms, og mottar på 232ms.

Figur B

Klikk på bilder for å forstørre.
Den blå vertikale linjen som vises i fossen tidslinje på høyre panel representerer avfyringen av DOMContentLoaded-hendelsen, og den røde vertikale linjen representerer Load-hendelsen. Disse to indikatorene er gitt for å hjelpe deg med å bestemme den totale tiden det tar for sider å laste og gir deg et mål som du kan gjøre forbedringer på sidene dine fra. De to hendelsene vises i figur C, og skjermbildet er lenger nede i listen over navngitte ressurser.

Figur C

På bunnen av Nettverkspanelet er det alternativer for å se ressursene på websiden, inkludert Alle, Dokumenter, Stilereark, Bilder, Skript, XHR, Skrifter, WebSocket og annet. Jeg har valgt skriptressursen i eksemplet i figur D :

Som standard sorteres skjermen etter tidslinje; Du kan imidlertid endre sorteringen fra en rullegardinliste som i tillegg til tidslinjen også inkluderer starttid, responstid, sluttid, varighet og forsinkelse, som vist i figur E :

Når jeg velger sortering etter latens, får jeg følgende visning som vist i figur F :

En annen sortering som du kan kjøre i stigende eller synkende rekkefølge, er etter kolonnen Størrelse, som du kan se vist i figur G, i synkende rekkefølge fra de største ressursene til de minste.

Figur G

Nå klikker du på ressursoppføringen http://www.cnn.com fra venstre rute, og displayet på høyre rute vil som standard være forhåndsvisningsfanen modus, som viser HTML under panseret (se figur K ). Andre alternativer inkluderer Headers, Response, Cookies and Timing. Eksemplet vist nedenfor i figur H viser kategorien Topptekster.

Figur H

Figur I viser fanen Informasjonskapsler:

Figur J viser fanen Timing:

Kategorien Forhåndsvisning av nettverkspanel ligner funksjonalitet og visning på ressurspanelets ressursvisning, som vist i figur K :

© Copyright 2021 | pepebotifarra.com