Chrome DevTools - JavaScript CPU-profilering in Chrome 58

Kayce Basken

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

Het doel op lange termijn is om de oude JavaScript CPU Profiler te verwijderen en iedereen met de nieuwe workflow aan het werk te krijgen.

Deze kleine migratiegids laat zien hoe u een JS-profiel opneemt in het paneel Prestaties en hoe de gebruikersinterface van het paneel Prestaties overeenkomt met de oude workflow die u gewend bent.

Toegang tot de oude JavaScript CPU-profiler

Als u de voorkeur geeft aan de oude workflow "Record JavaScript CPU Profile" die voorheen beschikbaar was in het paneel Profielen, kunt u deze nog steeds als volgt openen:

  1. Open het DevTools- hoofdmenu .
  2. Selecteer Meer tools > JavaScript Profiler . De oude profiler wordt geopend in een nieuw paneel genaamd 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 Prestatiepaneel.

  3. Neem op een van de volgende manieren op:

    • Om het laden van een pagina te profileren, klikt u op Recordpagina laden . DevTools start automatisch de opname en stopt vervolgens automatisch wanneer het detecteert dat de pagina klaar is met laden.
    • Als u een actieve pagina wilt profileren, klikt u op Opnemen , voert u de acties uit die u wilt profileren en klikt u vervolgens op Stoppen als u klaar bent.

Hoe de oude workflow zich verhoudt tot de nieuwe

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

Mapping tussen vlammendiagram in oude workflow en nieuwe workflow.
Figuur 2 . Mapping tussen vlammendiagram in oude workflow (links) en nieuwe workflow (rechts).

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

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

En de weergave Boom (van boven naar beneden) is beschikbaar op het tabblad Gespreksboom :

Mapping tussen boomstructuur in oude workflow en nieuwe workflow.
Figuur 4 . Toewijzing tussen boomstructuur in oude workflow (links) en nieuwe workflow (rechts).

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