Donkere modus

Analyseer Google Chrome of web app prestaties met tracing

Stefan
Analyseer Google Chrome of web app prestaties met tracing

Hebt u zich ooit afgevraagd wat er achter de schermen van uw Google Chrome browser gebeurt terwijl u surft, werkt of speelt op internet? Met de Tracing Viewer voor Chrome, een tool die gedetailleerde informatie verzamelt over uw browseractiviteiten en webtoepassingen, kunt u nu diep in de werking van Chrome duiken.

Deze tracing tool geeft een reeks gebeurtenissen visueel weer. Van het renderen van pagina’s en het uitvoeren van JavaScript tot het laden van netwerkbronnen. Allemaal gerangschikt in een tijdlijn. Zo kunt u niet alleen zien hoe lang verschillende taken duren om uit te voeren, maar kunt u ook analyseren hoe deze taken de algehele prestaties van uw browser beïnvloeden. Of u nu een ontwikkelaar bent die manieren zoekt om de efficiëntie van uw webapplicaties te verbeteren of gewoon iemand die gefascineerd is door geavanceerde Google Chrome functies, dit artikel tot met informatie over de Google Chrome tracing viewer zal u helpen om de kennis die nodig is om de browserprestaties te verkennen en te begrijpen.

Analyseer Google Chrome of web app prestaties met tracing

Om de tracing viewer in Google Chrome te openen typt u in de adresbalk: chrome://tracing/

Chrome tracing viewer

Klik op de knop “Record” om het opnameproces te starten. U kunt kiezen uit verschillende opnamecategorieën, afhankelijk van het soort gegevens dat u wilt verzamelen. Er zijn opties voor het traceren van de renderer, de browser, de GPU, en meer.

Nieuwe trace starten

U kunt ook aangepaste configuraties instellen voor meer gerichte analyses. Nadat u de gewenste categorieën heeft geselecteerd, start u de opname.

Uitgebreide trace starten in Google Chrome

Voer eerst de gewenste acties uit in Chrome die u wilt onderzoeken. Als u klaar bent om de opname te stoppen, klikt u gewoon op de knop “Stoppen”.

Zodra u de opname hebt gestopt, wordt een tijdlijn weergegeven met gebeurtenissen en taken met een kleurcode op basis van hun type. U kunt inzoomen op tijdsintervallen en met de muis over individuele gebeurtenissen gaan voor meer gedetailleerde informatie. Dit hulpmiddel biedt een overzicht van de prestaties, inclusief de begin- en eindtijden van taken, hun duur en zelfs de stack van JavaScript-functies.

Tracing gegegevens in Google Chrome

Door deze gegevens te analyseren krijgt u inzicht in hoe taken worden uitgevoerd, identificeert u eventuele vertragingen en observeert u hoe verschillende processen op elkaar inwerken. Besteed aandacht aan taken die ervoor kunnen zorgen dat de UI thread niet meer reageert, omdat ze de algehele reactiesnelheid van de applicatie kunnen beïnvloeden.

Indien nodig kunt u de tracebestanden exporteren om ze met anderen te delen of ze op uw computer importeren voor analyse.

tracebestanden exporteren

De data die u ziet of wil tracen is sterk afhankelijk van wat voor app, website of UI u probeert te debuggen. Ik hoop u hiermee geïnformeerd te hebben. Bedankt voor het lezen!

Lees meer:

Meld je aan voor onze Nieuwsbrief
Ontvang elke 2 weken onze laatste pc tips in uw e-mailbox.
Overzicht met meer PC tips
Benieuwd naar meer slimme PC tips? Bekijk ons volledige overzicht met waardevolle adviezen en ontdek hoe u, uw computergebruik nóg efficiënter maakt.

Heeft u een computer vraag?

Je e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *