Chrome Dev Tools netwerkmogelijkheden en de console

In deel 1 - Chrome Dev Tools: markup en stijl hebben we twee panels beoordeeld: Elements en Middelen. Verderop gaan we nu naar de volgende twee panelen: Netwerk en Troosten.

Netwerkpaneel

De Netwerk paneel geeft ons een beeld van de resources die in realtime via het netwerk worden aangevraagd en gedownload. Het bekijken van netwerkverkeer is niet de meest glamoureuze activiteit, vooral als u nog niet bekend bent met webontwikkeling. Prestaties worden echter een belangrijk probleem, omdat het verkeer van uw site toeneemt. Het identificeren en repareren van aanvragen die lang duren om te voltooien is een belangrijke stap in het optimaliseren van een site.

Een HTTP-proxy, zoals Charles Proxy, kan u een behoorlijke hoeveelheid informatie geven over het netwerk van uw website. Dat gezegd zijnde, de Netwerk paneel biedt verrassend veel gedetailleerde informatie; gezien het feit dat het slechts enkele klikken verwijderd zijn, is het zeker een uitstekende kandidaat voor het opsporen van fouten in netwerkproblemen. Het volgende is een screenshot van de Netwerk paneel bij het laden van de mobiele site van Linkedin bij het laden van een nieuwe pagina:

$ 0 geeft het momenteel geselecteerde element terug in de Elements paneel.

1. Met deze knop opent u de Netwerk paneel. Zorg ervoor dat u het tabblad opent voor een pagina laden zodat deze de netwerkverzoeken vastlegt (bijvoorbeeld een nieuw browsertabblad openen, ontwikkelaarstools openen, het netwerktabblad openen en uiteindelijk de URL laden om te monitoren)
2. Deze rij bevat één bron met interessante informatie die ik in de volgende punten behandel. De eerste kolom is de naam en het pad van de resource. De resourcenaam wordt weergegeven op de eerste regel terwijl het pad naar de resource op de tweede wordt weergegeven.
3. De HTTP-methode die voor het verzoek is gebruikt.
4. De HTTP-statuscode geretourneerd door de server. 200 is een veel voorkomende reactie voor een succesvolle reactie; hoewel alles binnen het bereik van 200-299 als OK wordt beschouwd. Merk op hoe een van de bovenstaande verzoeken in rood staat. Dit is gerelateerd aan de HTTP-responscode, een 401 ongeautoriseerde reactie, omdat ik niet op de LinkedIn-site voor mobiel ben aangemeld.
5. Het inhoudstype van een verzoek. Bijvoorbeeld, in een HTTP POST (met behulp van de metriekresource als een voorbeeld), is het inhoudstype in de verzoek- en antwoordheaders: application / json; overwegende dat de responskoppen van de belangrijkste HTML-pagina een inhoudstype bevatten van text / html. Een kleine opmerking over de toepassingscache: wanneer u een manifestbestand aanbiedt, moet u het met een inhoudstype van serveren text / cache-manifest. Bij het opsporen van fouten, de kolom "Type" in de Netwerk paneel is de plaats om ervoor te zorgen dat het correct wordt weergegeven!
6. De initiator is een interessante kolom; Hiermee kunnen we zien waarom een ​​bron wordt gedownload. U ziet bijvoorbeeld het bestand __utm.gif vaak in uw foutopsporingssessies; het wordt gebruikt door Google Analytics. De initiator toont als ga.js: 52, een waarde in bestandsnaam: line_number formaat. Met deze kolom kunt u ontdekken waarom, wanneer en hoe bronnen worden gedownload. Als parser wordt weergegeven voor de initiator, de kans is groot dat de browser het verzoek heeft gestart bij het zien van zoiets als een of >