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 Performances pour profiler les performances du processeur Node.js.

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

Dès Chrome 58, l'équipe DevTools prévoyait d'abandonner JS Profiler. Plusieurs raisons peuvent l'expliquer:

• Elle n'est plus développée activement. Le Profileur JS n'a pas reçu de mises à jour majeures depuis plusieurs années, et l'équipe ne dispose pas des ressources nécessaires pour continuer à le développer.
• Expérience de profilage simplifiée : Le panneau Performances est déjà utilisé pour toutes sortes d'analyses des performances. Étant donné qu'il permet de profiler les performances du processeur JavaScript dans Node.js, il est judicieux de tout regrouper au même endroit pour plus de cohérence et d'efficacité.
• Le panneau "Performances" a été amélioré. Nous continuons à l'améliorer en ajoutant de nouvelles fonctionnalités et des 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 en savoir plus sur le profilage des performances du processeur JavaScript, consultez la page Profiler les performances de 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é la demande de commentaires (RFC) publiquement sur GitHub pour recueillir les commentaires des développeurs.

De plus, nous contactons activement des experts en développement pour tester le prototype et répondre aux préoccupations et aux problèmes afin de nous assurer que le panneau Performances répond aux principaux besoins en matière de profilage.

Nous supprimons progressivement le profileur JS en quatre étapes afin de laisser aux développeurs le temps de s'adapter et d'adopter.

Problèmes clés et solutions que nous avons résolus

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. Le panneau Performance devrait être compatible.
• Lenteur de chargement. 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 de sélecteur d'instances 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.

Chargement lent

Les développeurs nous ont indiqué que le panneau Performances mettait trop de temps à charger les fichiers de données volumineux, et qu'il pouvait même planter.

Nous avons utilisé les outils de développement pour analyser les outils de développement (nous les appelons "DevTools-on-DevTools"). Nous avons détecté plusieurs problèmes et avons procédé à plusieurs optimisations:

• Remplacement des structures de données Set par Array.
• Suppression des structures de données Map inutiles.
• Refactorisation des fonctions récursives en fonctions itératives (boucles pour) 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 de 80 %. 🎉

Pour en savoir plus, consultez cet article de blog: Un panel Performance 400% plus rapide grâce aux perf-ceptions.

Sélecteur de VM JavaScript manquante

Le prototype initial ne comportait pas de sélecteur de VM JavaScript. Les développeurs l'utilisent pour afficher le détail et se concentrer sur l'analyse d'une instance de VM spécifique.

Nous avons désormais ajouté un sélecteur de VM JavaScript au panneau Performances. 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, qui sont des fichiers JSON contenant un tableau d'événements de suivi.

En revanche, le Profileur JS était compatible avec les profils de processeur, qui sont des 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 Performances 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 type "flamme".

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 de l'une des façons suivantes.

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

• Envoyez-nous une suggestion ou des commentaires via crbug.com.
• Signalez un problème dans les outils de développement via Plus d'options   > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.