Nätverksdämpning och headeranalys i Chrome Developer Tools

I denna handledning lär du dig hur du kan begränsa nätverksförbindelser, analysera HTTP-huvuden och visa förhandsgranskningar av svar med Chrome Developer Tools. Dessa funktioner är särskilt användbara för att testa din webbplatsprestanda under olika nätverksförhållanden och för att förstå strukturen av returnerade data. Genom att begränsa nätverksförbindelser kan du simulera användarupplevelsen på mobila enheter, medan analysen av huvuden ger dig ledtrådar till möjliga problem.

Viktigaste insikter

• Genom att begränsa bandbredden kan du simulera långsamma nätverkshastigheter för att testa användarbeteendet under dessa förhållanden.
• HTTP-huvuden ger information om hur data returneras till klienten.
• Förhandsgranskningsfunktionen i Developer Tools gör det enkelt att undersöka strukturen av JSON-data och andra format.

Steg-för-steg-guide

Begränsa nätverkshastigheten

För att simulera långsamma nätverksanslutningar, öppna Chrome Developer Tools och gå till nätverksfliken. Där kan du välja olika hastigheter som t.ex. "snabb 3G". Detta låter dig testa laddningstiderna på din webbplats under realistiska förhållanden.

Genom att ladda om sidan kan du direkt se hur prestandan ser ut vid denna inställning. Observera att laddningstiderna är betydligt långsammare än under normala förhållanden.

Om du vill ha det ännu långsammare kan du välja alternativet "långsam 3G". Här krävs tålamod eftersom det tar betydligt längre tid att ladda innehållet.

Dessutom kan du aktivera funktionen "offline". Detta alternativ är särskilt användbart för att testa hur din webbapplikation fungerar när det inte finns någon internetanslutning.

Offline-test med tjänstearbetare

Tjänstearbetare gör det möjligt att göra webbplatser tillgängliga offline. Om du har en sida som ska fungera offline kan du genom att aktivera offline-funktionen i utvecklarverktygen kontrollera om de motsvarande innehållen också är tillgängliga offline.

Du kan också kontrollera om navigeringen är offline eller online genom att kolla i fönstret "Navigator". Detta är viktigt för att säkerställa att din applikation kan användas även utan internetanslutning.

Arbeta med huvuden

För att inspektera HTTP-huvuderna, ladda om din webbplats och granska de returnerade data. I nätverksfliken kan du se detaljer om svarshuvudena, som till exempel Content-Type och Content-Length.

Här hittar du också information om cache för den specifika filen är aktiverad eller inte. Detta är viktigt för att optimera prestanda på din sida.

Granska JSON-datastruktur

Om du får tillbaka JSON-data kan du enkelt granska förhandsgranskningen av dessa data. I utvecklarverktygen kan du fälla ut datastrukturen och undersöka den. På så sätt ser du inte bara data i råtext utan också färgkodad, vilket förbättrar läsbarheten.

En stor fördel med förhandsgranskningen är att du enkelt kan kopiera data för att använda den till exempelvis i din kodredigerare.

Arbeta med bilder

Det är också möjligt att få åtkomst till bilddata via utvecklarverktygen. Om du till exempel tittar på SVG-filer kan du se dem under fliken "Förhandsvisning".

För andra format som PNG eller JPEG kan du använda alternativen "Kopiera bild-URL" eller "Spara bild som" för att spara bilderna lokalt eller helt enkelt kopiera URL:er.

Identifiera problem

En särskilt användbar funktion i Developer Tools är förmågan att analysera statuskoder. Om en status över 400 returneras är detta en indikation på ett problem som du bör undersöka närmare.

Vänd dig till Förfrågningshuvudet för att identifiera potentiella felkällor, vare sig det är en autentiseringsfel eller andra problem som uppstår vid sidans laddning.

Sammanfattning

I den här guiden har du lärt dig hur du kan begränsa nätverkshastigheten, analysera HTTP-headers och bättre utnyttja förhandsvisningsinformation. Med dessa verktyg kan du fortsätta att optimera användarupplevelsen på din webbplats och upptäcka eventuella felkällor.