Chrome DevTools - JavaScript CPU-profilering in Chrome 58

Kayce Basken
Kayce Basques
X GitHub

In Chrome 58 (momenteel Canary) is het paneel Tijdlijn hernoemd naar het paneel Prestaties, is het paneel Profielen hernoemd naar het paneel Geheugen en is de functie JavaScript CPU-profiel opnemen in het paneel Profielen verplaatst naar een meer verborgen locatie.

Het doel op de lange termijn is om de oude JavaScript CPU Profiler te verwijderen en iedereen met de nieuwe workflow te laten werken.

In deze korte migratiehandleiding ziet u hoe u een JS-profiel in het Prestatiepaneel kunt vastleggen en hoe de gebruikersinterface van het Prestatiepaneel aansluit op de oude workflow waaraan u gewend bent.

Toegang tot de oude JavaScript CPU-profiler

Als u de voorkeur geeft aan de oude workflow 'JavaScript CPU-profiel registreren' die voorheen beschikbaar was in het paneel Profielen, kunt u deze nog steeds als volgt openen:

  1. Open het DevTools -hoofdmenu .
  2. Selecteer Meer hulpmiddelen > JavaScript Profiler . De oude profiler wordt geopend in een nieuw paneel met de naam JavaScript Profiler .

Hoe een JS-profiel op te nemen

  1. Open DevTools.

  2. Klik op het tabblad Prestaties .

    Het prestatiepaneel van Chrome DevTools.
    Figuur 1. Het paneel Prestaties.

  3. U kunt dit op een van de volgende manieren doen:

    • Om een ​​paginalading te profileren, klikt u op Paginalading registreren . DevTools start de registratie automatisch en stopt deze vervolgens automatisch wanneer wordt gedetecteerd dat de pagina is geladen.
    • Als u een profiel wilt maken van een actieve pagina, klikt u op Opnemen , voert u de acties uit die u wilt profileren en klikt u op Stoppen wanneer u klaar bent.

Hoe de oude workflow zich verhoudt tot de nieuwe

In de onderstaande schermafbeelding ziet u in de grafiekweergave van de oude workflow de positie van het overzichtsdiagram van het CPU-gebruik (bovenste pijl) en het vlamdiagram (onderste pijl) in de nieuwe workflow.

Toewijzing van vlamdiagram in oude workflow aan nieuwe workflow.
Figuur 2. Toewijzing tussen vlamdiagram in oude workflow (links) en nieuwe workflow (rechts).

De weergave Zwaar (Bottom-Up) is beschikbaar op het tabblad Bottom-Up :

Toewijzing tussen Bottom-Up-weergave in oude workflow en nieuwe workflow.
Figuur 3. Toewijzing tussen Bottom-Up-weergave in de oude workflow (links) en de nieuwe workflow (rechts).

En de Boom (Bovenaan) weergave is beschikbaar op het tabblad Oproepboom :

Toewijzing tussen de boomweergave in de oude workflow en de nieuwe workflow.
Figuur 4. Toewijzing tussen de boomweergave in de oude workflow (links) en de nieuwe workflow (rechts).

Ping @ChromeDevTools op Twitter of open een GitHub-probleem in onze documentatie als we functies gemist hebben of als je andere vragen hebt over dit artikel.