Chrome Dev Tools Nettverk og konsollen

I del 1 - Chrome Dev Tools: Markup og Style, har vi gjennomgått to paneler: Elements og ressurser. Fortsett, nå tar vi en titt på de to neste panelene: Network og Console.

Nettverkspanel

De Network panelet gir oss et innblikk i ressursene som blir forespurt og lastet ned over nettverket i sanntid. Å se nettverkstrafikk er ikke den mest glamorøse aktiviteten - spesielt hvis du er ny for webutvikling. Men ytelsen blir et viktig problem, siden trafikkens trafikk øker. Identifisere og fikse forespørsler som tar lang tid å fullføre er et viktig skritt i optimalisering av et nettsted.

En HTTP-proxy, for eksempel Charles Proxy, kan gi deg en anstendig mengde informasjon angående nettstedets nettverk. Det blir sagt, den Network panelet tilbyr en overraskende mengde detaljert informasjon; vurderer hvordan det er bare noen få klikk unna, er det absolutt en utmerket kandidat for feilsøking av nettverksproblemer. Følgende er et skjermbilde av Network panel når du laster inn Linkedins mobilnettsted på en fersk sidebelastning:

$ 0 returnerer det valgte elementet i Elements panel.

1. Denne knappen åpner Network panel. Pass på å åpne kategorien før laster inn en side slik at den fanger nettverksforespørslene (for eksempel åpne en ny nettleserfane, åpne verktøylinjer, åpne nettverksfanen og last deretter inn nettadressen som skal overvåkes)
2. Denne raden inneholder en ressurs med interessant informasjon som jeg dekker i de følgende punktene. Den første kolonnen er navnet og banen til ressursen. Ressursnavnet vises på første linje mens banen til ressursen viser på den andre.
3. HTTP-metoden som brukes til forespørselen.
4. HTTP-statuskoden returnert av serveren. 200 er et vanlig svar for et vellykket svar; Selv om alt innenfor området 200-299 regnes som OK. Legg merke til hvordan en av de ovennevnte forespørslene er i rødt. Dette er relatert til HTTP-svarskoden, en 401 Uautorisert svar, fordi jeg ikke er logget inn på LinkedIns mobilnettsted.
5. Innholdstypen av en forespørsel. For eksempel, i en HTTP POST (ved hjelp av beregningsressursen som et eksempel), er innholdstypen i forespørsels- og svarhodene: application / json; mens hovedhodesponsens hovedsider inneholder en innholdstype av text / html. Et lite notat på programbufferen: Når du betjener en manifestfil, må du sørge for å vise den med en innholdstype av tekst / cache-manifest. Når feilsøking, "Type" kolonnen i Network panelet er stedet for å sikre at det blir servert riktig!
6. Initiatoren er en interessant kolonne; det tillater oss å se hvorfor en ressurs er lastet ned. For eksempel kan du kanskje se filen __utm.gif ofte i feilsøkingsøktene dine; den brukes av Google Analytics. Initiatøren viser som ga.js: 52, en verdi i filnavn: LINE_NUMBER format. Med denne kolonnen kan du oppdage hvorfor, når og hvordan ressursene lastes ned. Hvis parser er vist for initiativtaker, sjansene er gode at nettleseren initierte forespørselen ved å se noe som a eller >