Outils pour les développeurs Chrome – Profilage de processeur JavaScript dans Chrome 58

Kayce basque
Kayce Basques

Dans Chrome 58, qui est actuellement en version Canary, le panneau "Timeline" a été renommé "Performance", le panneau "Profiles" a été renommé "Memory" et la fonctionnalité d'enregistrement de profil de processeur JavaScript du panneau "Profiles" a été déplacée vers un emplacement plus masqué.

L'objectif à long terme est de supprimer l'ancien Profileur de processeur JavaScript et de permettre à tout le monde de travailler avec le nouveau workflow.

Ce petit guide de migration vous explique comment enregistrer un profil JS dans le panneau "Performances" et comment l'interface utilisateur du panneau "Performances" est mise en correspondance avec l'ancien workflow.

Accéder à l'ancien profileur de processeur JavaScript

Si vous préférez l'ancien workflow "Record JavaScript CPU Profile" (Enregistrer un profil de processeur JavaScript) qui était auparavant disponible dans le panneau "Profiles", vous pouvez toujours y accéder comme suit:

  1. Ouvrez le menu principal des outils de développement.
  2. Sélectionnez Plus d'outils > Profileur JavaScript. L'ancien profileur s'ouvre dans un nouveau panneau appelé Profileur JavaScript.

Comment enregistrer un profil JS

  1. Accédez aux Outils de développement.
  2. Cliquez sur l'onglet Performances.

    Panneau des performances des outils pour les développeurs Chrome.
    Figure 1. Panneau "Performances"

  3. Enregistrez l'une des façons suivantes:

    • Pour profiler un chargement de page, cliquez sur Enregistrer le chargement de page. Les outils de développement démarrent automatiquement l'enregistrement, puis s'arrêtent automatiquement lorsqu'ils détectent que le chargement de la page est terminé.
    • Pour profiler une page en cours d'exécution, cliquez sur Record (Enregistrer), effectuez les actions que vous souhaitez profiler, puis cliquez sur Stop (Arrêter) lorsque vous avez terminé.

Correspondance entre l'ancien workflow et le nouveau

Dans la vue Graphique de l'ancien workflow, la capture d'écran ci-dessous vous montre la position du graphique de présentation de l'utilisation du processeur (flèche du haut) et du graphique de flammes (flèche du bas) dans le nouveau workflow.

Mappage entre le graphique de flammes de l'ancien workflow et le nouveau.
Figure 2 : Mappage entre le graphique de flammes de l'ancien workflow (à gauche) et le nouveau (à droite).

La vue heavy (Bottom Up) (ascendant) est disponible dans l'onglet Bottom-Up (ascendant) :

Mappage entre la vue ascendante de l'ancien workflow et le nouveau.
Figure 3 : Mappage entre la vue ascendante de l'ancien workflow (à gauche) et le nouveau workflow (à droite).

Enfin, la vue Arborescence (descendante) est disponible dans l'onglet Arborescence d'appel:

Mappage entre l'arborescence de l'ancien et le nouveau flux de travail.
Figure 4 : Mappage entre l'arborescence de l'ancien workflow (à gauche) et le nouveau (à droite).

Pinguez @ChromeDevTools sur Twitter ou signalez un problème GitHub dans notre dépôt de documents si nous avons manqué des fonctionnalités ou si vous avez d'autres questions concernant cet article.