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

Kayce Basques

Dans Chrome 58, qui est actuellement Canary, le panneau "Timeline" (Historique) a été renommé "Performance" (Performances), le panneau "Profiles" (Profils) a été renommé "Memory" (Mémoire) et la fonctionnalité "Record JavaScript CPU Profile" (Enregistrer le profil de processeur JavaScript) du panneau "Profiles" (Profils) 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 explique comment enregistrer un profil JavaScript dans le panneau "Performances" et décrit la correspondance entre l'interface utilisateur de ce panneau et l'ancien workflow auquel vous êtes habitué.

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. Ouvrez les 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. Effectuez l'enregistrement de l'une des manières suivantes:

    • Pour profiler un chargement de page, cliquez sur Enregistrer le chargement de page. Les outils de développement lancent 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 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 Accupé (de bas en haut) est disponible dans l'onglet Ascendant:

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

Par ailleurs, l'affichage Tree (Top Down) est disponible dans l'onglet Call Tree (Arborescence d'appel) :

Mappage entre l'arborescence de l'ancien et du nouveau workflow.
Figure 4. Mappage entre l'arborescence de l'ancien workflow (à gauche) et du nouveau (à droite).

Envoyez un ping à @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.