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

Kayce Basques

Dans Chrome 58, qui est actuellement Canary, le panneau "Chronologie" a été renommé "Performances", le panneau "Profils" a été renommé "Mémoire" et la fonctionnalité "Enregistrer un profil de processeur JavaScript" du panneau "Profils" a été déplacée vers un emplacement plus caché.

L'objectif à long terme est de supprimer l'ancien profileur de processeur JavaScript et de faire en sorte que tous les utilisateurs travaillent 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" correspond à l'ancien workflow auquel vous êtes habitué.

Accéder à l'ancien profileur du processeur JavaScript

Si vous préférez l'ancien flux de travail "Enregistrer un profil de processeur JavaScript" qui était disponible dans le panneau "Profils", vous pouvez toujours y accéder comme suit:

  1. Ouvrez le menu principal des outils pour les développeurs.
  2. Sélectionnez Plus d'outils > Profileur JavaScript. L'ancien profileur s'ouvre dans un nouveau panneau intitulé Profileur JavaScript.

Enregistrer un profil JavaScript

  1. Ouvrez les outils de développement.

  2. Cliquez sur l'onglet Performances.

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

  3. Enregistrez-vous de l'une des manières suivantes:

    • Pour profiler le chargement d'une page, cliquez sur Enregistrer le chargement de la page. Les outils de développement lancent automatiquement l'enregistrement, puis s'arrêtent automatiquement lorsqu'ils détectent que la page a fini de se charger.
    • Pour profiler une page en cours d'exécution, cliquez sur Enregistrer, effectuez les actions que vous souhaitez profiler, puis cliquez sur Arrêter lorsque vous avez terminé.

Comment l'ancien workflow correspond au nouveau

Dans la vue Graphique de l'ancien workflow, la capture d'écran ci-dessous montre la position du graphique de synthèse de l'utilisation du processeur (flèche du haut) et du graphique de type "flamme" (flèche du bas) dans le nouveau workflow.

Mappage entre le graphique en forme de flamme de l'ancien workflow et celui du nouveau.
Figure 2. Mappage entre le graphique en forme de flamme dans l'ancien workflow (à gauche) et le nouveau workflow (à droite).

La vue Lourd (de bas en haut) est disponible dans l'onglet De bas en haut:

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

La vue Arborescence (de haut en bas) est disponible dans l'onglet Arborescence des appels:

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

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