Le panneau Profiler JavaScript disparaît 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 ne dispose pas des 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 de 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 meilleur. 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 de 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.
- Utilisez les onglets De bas en haut et Arborescence des appels pour comprendre les relations entre les fonctions.
Comment gérer l'abandon ?
Nous avons développé un prototype et publié la Request for Comments (RFC) publiquement sur GitHub pour recueillir les commentaires des développeurs.
De plus, nous contactons activement des développeurs experts pour tester le prototype et résoudre les problèmes ou les inquiétudes afin de nous assurer que le panneau Performances répond aux besoins de profilage de base.
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 solutions
Parmi les commentaires que nous avons reçus, les plus urgents concernaient trois problèmes principaux:
- Format de fichier
.cpuprofilecompatible 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 avons utilisé les outils de développement pour analyser les outils de développement (que nous appelons "outils de développement sur les outils de développement"). Nous avons détecté des problèmes et effectué plusieurs optimisations:
- Remplacement de
Setpar des structures de donnéesArray. - Suppression des structures de données
Mapinutiles. - 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 de cette instance spécifique.
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 Performances. Il se chargera correctement.
En coulisses, 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 en forme de flamme.
Conclusion
Utilisez le panneau Performances pour une expérience de profilage plus simplifiée, à la fois pour les sites Web et pour le profilage 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
Envisagez d'utiliser Chrome Canary, Dev ou Bêta 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 plate-forme 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.
- Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
- Signalez un problème dans les outils de développement à l'aide de l'icône Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
- Envoyez un tweet à @ChromeDevTools.
- Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les outils pour les développeurs.