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

Jecelyn Yeen
Nancy Li
Nancy Li
LinkedIn

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

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

Dès Chrome 58, l'équipe DevTools prévoyait d'abandonner le Profiler JavaScript à terme. Plusieurs raisons peuvent expliquer cette situation:

  • Il n'est plus activement développé. Le profileur JavaScript n'a pas reçu de mises à jour majeures depuis plusieurs années, et l'équipe n'a pas les ressources nécessaires pour continuer à le développer.
  • Une expérience de profilage plus simplifiée Le panneau Performances est déjà utilisé pour toutes sortes d'analyses des performances. Étant donné qu'il peut profiler les performances du processeur JavaScript dans Node.js, il est logique de tout regrouper au même endroit pour plus de cohérence et d'efficacité.
  • Le panneau "Performances" est mieux adapté. Nous continuons de l'améliorer en ajoutant de nouvelles fonctionnalités et améliorations, ce qui en fait un outil d'analyse des performances plus puissant et plus 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:

  • Utilisez le graphique en flammes pour identifier les goulots d'étranglement qui affectent les performances.

Graphique de flammes.

  • Utilisez les onglets De bas en haut et Arborescence des appels pour comprendre les relations entre les fonctions.

Onglet "Bottom-up" (De bas en haut).

L'onglet "Arborescence des appels".

Comment gérer l'abandon ?

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

De plus, nous contactons activement les 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 allons abandonner progressivement le profileur JavaScript en quatre étapes pour laisser aux développeurs suffisamment de temps 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 plus urgents concernaient trois problèmes principaux:

  • Format de fichier .cpuprofile compatible Le profileur JavaScript utilise un autre format de fichier. Le panneau Performances devrait le prendre en charge.
  • Vitesse de chargement lente La vitesse de chargement du panneau semblait lente, ce qui interférait avec le processus de profilage.
  • Sélecteur de VM JavaScript manquant. L'absence d'un sélecteur d'instance de VM JavaScript limitait les fonctionnalités de profilage dans certains scénarios.

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

Vitesse de chargement lente

Les développeurs nous ont indiqué que le panneau Performances prenait trop de temps à charger de grands fichiers de données 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 des structures de données Array.
  • Suppression des structures de données Map inutiles.
  • Les fonctions récursives ont été refactorisées en itératif (boucles for) 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 de 80% pour les fichiers volumineux. 🎉

Pour en savoir plus sur ce que nous avons appris, consultez cet article de blog: Un panneau "Performances" 400% plus rapide grâce à la perf-ception.

Sélecteur de VM JavaScript manquant

Le sélecteur de VM JavaScript était absent du prototype initial. Les développeurs l'utilisent pour effectuer des analyses détaillées et se concentrer sur une instance de VM spécifique.

Nous avons ajouté un sélecteur de VM JavaScript au panneau Performances. Il 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.

L'onglet "Arborescence des appels".

Prise en charge du format de fichier cpuprofile

Auparavant, le panneau Performances n'acceptait que les fichiers de trace, qui sont des fichiers JSON contenant un tableau d'événements de trace.

En revanche, le profileur JavaScript acceptait les profils de processeur, qui sont des fichiers avec l'extension .cpuprofile 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 l'cpuprofile existante. Par conséquent, le panneau Performances est désormais compatible à la fois avec les fichiers de trace 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 trace.

Une fois le type de contenu identifié, nous le traitons en conséquence. Pour un fichier de trace, 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 la version Canary, Dev ou Bêta de Chrome comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plates-formes Web de pointe et vous aident à 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, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.