Suppression du Profileur JS, profilage du processeur à l'aide du panneau "Performances"

Jecelyn Yeen

Nancy Li

Le panneau Profileur JavaScript ne sera plus disponible dans Chrome 124. À l'avenir, utilisez le panneau Performance pour profiler les performances du processeur Node.js.

Pourquoi abandonnons-nous le Profileur JavaScript ? (Profileur JS)

L'équipe des outils de développement prévoyait d'abandonner JS Profiler à partir de Chrome 58. et ce pour plusieurs raisons:

• Elle n'est plus activement développée. JS Profiler n'a pas reçu de mise à jour majeure depuis plusieurs années et l'équipe n'a pas les ressources nécessaires pour continuer à le développer.
• Une expérience de profilage simplifiée : Le panneau Performance est déjà utilisé pour toutes sortes d'analyses de performances. Étant donné sa capacité à profiler les performances du processeur JavaScript dans Node.js, il est judicieux de regrouper toutes les données en un seul endroit pour plus de cohérence et d'efficacité.
• Le panneau "Performances" est mieux adapté. Nous continuons à l'améliorer en y ajoutant de nouvelles fonctionnalités et des améliorations, afin d'en faire un outil d'analyse des performances plus performant et convivial.

Que devez-vous faire après l'abandon ?

Pour savoir comment profiler les performances du processeur JavaScript, consultez Profiler les performances Node.js.

Voici quelques conseils pour utiliser le panneau Performances:

• Identifiez les goulots d'étranglement qui affectent les performances à l'aide du graphique de type "flamme".

• Utilisez les onglets Ascendant et Arborescence d'appel pour comprendre les relations entre les fonctions.

Comment gérer l'abandon ?

Nous avons développé un prototype et publié publiquement la demande de commentaires (RFC) sur GitHub afin de recueillir les commentaires des développeurs.

De plus, nous contactons activement des experts du développement pour tester le prototype. Nous résolvons ainsi toutes les préoccupations et les problèmes afin de nous assurer que le panneau Performances répond aux principaux besoins de profilage.

Nous abandonnons progressivement JS Profiler en quatre étapes afin de laisser suffisamment de temps aux développeurs pour s'adapter et l'adopter.

Principaux problèmes et comment nous les avons corrigés

Parmi les commentaires que nous avons reçus, les préoccupations les plus urgentes portaient sur trois problèmes principaux:

• Compatibilité avec le format de fichier .cpuprofile Le Profileur JS utilise un format de fichier différent. C'est normalement possible dans le panneau Performance.
• Chargement lent. La vitesse de chargement du panneau semblait lente, interférant avec le processus de profilage.
• Sélecteur de VM JavaScript manquant. L'absence d'un sélecteur d'instance de VM JavaScript limite les capacités de profilage dans certains scénarios.

Examinons chacun de ces problèmes et voyons comment nous les avons résolus.

Chargement lent

Les développeurs nous ont indiqué que le panneau Performances mettait trop de temps à charger des fichiers de données volumineux, et qu'il plantait parfois.

Nous les avons utilisés pour analyser ces outils (appelés "DevTools-on-DevTools"). Nous avons détecté des problèmes et effectué plusieurs optimisations:

• Remplacement de Set par les structures de données Array.
• Suppression des structures de données Map inutiles.
• Refactorisation des fonctions récursives en fonctions itératives (pour les boucles) afin de réduire l'utilisation de la pile de mémoire.

En corrigeant ces goulots d'étranglement, nous avons accéléré le chargement des fichiers volumineux 80 % ! 🎉

Pour en savoir plus sur ce que nous avons appris, lisez cet article de blog: Un panel "Performance" 400% plus rapide grâce aux performances.

Sélecteur de VM JavaScript manquant

Le prototype initial ne disposait pas du sélecteur de VM JavaScript. Il permet aux développeurs d'afficher le détail et de se concentrer sur l'analyse d'une instance de VM spécifique.

Nous avons à présent ajouté un sélecteur de VM JavaScript au panneau Performance. Elle affiche une liste déroulante de toutes les instances de VM JavaScript disponibles. Lorsque vous sélectionnez une instance, le panneau Performances charge le profil de processeur pour cette instance spécifique.

Compatibilité avec le format de fichier cpuprofile

Auparavant, le panneau Performances n'acceptait que les fichiers de suivi, c'est-à-dire des fichiers JSON contenant un tableau d'événements de trace.

En revanche, le Profileur JS accepte les profils de processeur. Il s'agit de fichiers portant l'extension .cpuprofile et contenant un objet JSON. Elles se présentent comme suit:

{
    // The list of profile nodes. First item is the root node.
    nodes: ProfileNode[];
    // Profiling start timestamp in microseconds.
    startTime: number;
    // Profiling end timestamp in microseconds.
    endTime: number;
    // Ids of samples at top nodes.
    samples?: integer[];
    // Time intervals between adjacent samples in microseconds.
    // The first delta is relative to the profile startTime.
    timeDeltas?: integer[];
}

Le nouveau workflow ne doit pas empêcher les développeurs d'analyser le cpuprofile existant. Par conséquent, le panneau Performance est désormais compatible avec les fichiers de suivi et les profils de processeur. Vous pouvez importer le fichier cpuprofile dans Performance pour qu'il se charge correctement.

En arrière-plan, nous détectons les différences de structure des objets à l'aide d'une expression régulière. Si le contenu du fichier commence par {"nodes":[, il s'agit d'un profil de processeur. Sinon, il s'agit d'un fichier de suivi.

Une fois le type de contenu identifié, nous le traitons en conséquence. Pour un fichier de suivi, nous analysons les événements et créons une chronologie. Pour un profil de processeur, nous analysons l'objet JSON et créons un graphique de flammes.

Conclusion

Utilisez le panneau Performance pour simplifier le profilage des sites Web et des performances du processeur dans les applications Node.js et Deno.

Si vous avez des commentaires ou des suggestions, ajoutez un commentaire à ce bug ou contactez-nous via l'une des options suivantes.

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plates-formes Web de pointe et de détecter les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe des outils pour les développeurs Chrome

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

• Envoyez-nous une suggestion ou un commentaire via crbug.com.
• Signalez un problème lié aux outils de développement en cliquant sur Autres options   > Aide > Signalez un problème dans les outils de développement.
• Tweetez à l'adresse @ChromeDevTools.
• Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.