Nouveautés de DevTools (Microsoft Edge 113)

Il s’agit des dernières fonctionnalités DevTools de la version stable de Microsoft Edge.

Vidéo : Nouveautés des DevTools 113 et 114

Déboguer les traces de pile d’erreurs JavaScript à l’aide de l’outil Crash Analyzer

Le nouvel outil Analyseur d’incident est disponible en tant qu’expérience dans Microsoft Edge 113. Dans l’outil Crash Analyzer , vous pouvez entrer une trace de pile JavaScript, par exemple pour les exceptions JavaScript récupérables, puis appliquer vos sourcemaps à la trace de pile afin de pouvoir déboguer plus rapidement.

Pour accéder à l’outil Analyseur d’incident, sélectionnez Activer l’expérience Analyseur d’incident dansExpériences de paramètres>. Consultez Activation ou désactivation d’une expérience.

Vous pouvez signaler des exceptions JavaScript récupérables ou des données similaires à des outils tels qu’Azure Application Insights :

1. Tout d’abord, pour utiliser l’outil Crash analyzer , vous avez besoin de traces de pile spécialement formatées qui incluent une section appelée Source modules. Cette section contient les références de la carte source aux fonctions JavaScript qui faisaient partie du suivi de la pile d’erreurs. Vous pouvez produire ces traces de pile à l’aide du package npm de support d’analyseur d’incident .

2. Ensuite, vous avez besoin d’un moyen de recevoir les traces de pile à partir des navigateurs qui exécutent votre code. L’une de ces méthodes consiste à utiliser Azure Application Insights. Voir la vue d’ensemble d’Application Insights.

3. Une fois que vous avez un suivi de pile, collez-le dans le volet gauche de l’outil Analyseur d’incident .

4. Dans l’outil Analyseur d’incident , cliquez sur le bouton Analyser (ou appuyez sur Ctrl+Entrée). Le volet droit affiche les noms de fichier et de fonction d’origine qui composent le suivi de pile :

   

5. Cliquez sur les cadres de pile individuels pour afficher les lignes de votre code d’origine qui ont provoqué l’erreur.

Pour plus d’informations, voir Outil Analyseur d’incident.

Voir aussi :

• throw - JavaScript | MDN Web Docs
• Vue d’ensemble d’Application Insights
• Support Crash Analyzer | npm

L’outil Mémoire peut annuler la réduction des noms d’objets dans les instantanés de segment de mémoire

Dans Microsoft Edge 113, l’outil Mémoire fournit désormais automatiquement les noms des objets d’origine lors de la prise d’un instantané de tas, tant que les cartes sources sont chargées. Les cartes sources peuvent être chargées de manière fiable et sécurisée en les hébergeant sur le serveur de symboles Azure Artifacts.

Dans l’image suivante, le nom e de l’objet miniaturisé apparaît dans un instantané de segment de mémoire de l’outil Mémoire :

Désormais, dans Microsoft Edge 113, l’outil Mémoire libère automatiquement les noms d’objets dans l’instantané de tas :

Voir aussi :

• Déboguer en toute sécurité le code original en publiant des cartes de sources sur le serveur de symboles Azure Artifacts
• Déboguer en toute sécurité le code original en utilisant les cartes sources du serveur de symboles Azure Artifacts
• Effectuer une instantané dans Enregistrer des instantanés de segment de mémoire à l’aide de l’outil Mémoire (type de profilage « instantané de tas »).

L’outil Problèmes prend mieux en charge la navigation au clavier

Dans l’outil Problèmes , la modification des filtres de gravité ou de navigateur affiche une barre d’informations en haut de l’outil Problèmes , contenant un bouton Régénérer les problèmes . Dans les versions précédentes de Microsoft Edge, la navigation dans cette barre d’informations avec le clavier entraînait la disparition du bouton Fermer . Dans Microsoft Edge 113, ce problème a été résolu :

Voir aussi :

• Filtrer les problèmes dans Rechercher et résoudre des problèmes à l’aide de l’outil Problèmes
• Naviguer dans DevTools avec les technologies d’assistance

En mode Focus, le fait de pointer sur un outil ne fait plus disparaître le nom de chaque outil dans la barre d’activité

Dans les versions précédentes de Microsoft Edge, en mode Focus, le fait de pointer sur l’icône d’un outil dans la barre d’activité en mode horizontal entraînait la disparition des noms des autres outils dans la barre d’activité . Ce problème a été résolu dans Microsoft Edge 113. Lorsque vous survolez une icône d’outil pour afficher le nom de l’outil dans une info-bulle, les noms des autres outils restent affichés dans la barre d’activités :

Le menu Personnaliser DevTools offre une meilleure prise en charge des thèmes VS Code

Mise à jour : à partir de la version 131 de Microsoft Edge, la fonctionnalité de thèmes de Visual Studio Code est supprimée et ces thèmes reviennent aux thèmes par défaut :

• Clair+
• Foncé+

Dans les versions précédentes de Microsoft Edge, l’application de thèmes de Microsoft Visual Studio Code tels que Solarized Light ou Kimbie Dark entraînait des problèmes de faible contraste lors du pointage sur des éléments dans le menu Personnaliser et contrôler DevTools. Ce problème a été résolu dans Microsoft Edge 113. Les éléments du menu Personnaliser et contrôler DevTools sont désormais affichés avec un contraste de couleurs suffisant :

Voir aussi :

• Tester le contraste de couleur de texte à l’aide de la Color Picker
• Vérifiez le contraste de la couleur du texte dans l’état par défaut à l’aide de l’outil Inspecter

Le filtre Types de nœud de l’outil Mémoire ne s’affiche désormais que dans la vue Résumé d’un instantané de segment de mémoire

Dans Microsoft Edge 100, nous avons ajouté un filtre Types de nœud à l’outil Mémoire afin que vous puissiez vous concentrer uniquement sur des types spécifiques d’objets, tels que Array ou String, lorsque vous regardez un instantané de tas. Ce filtre de types de nœud ne s’applique qu’aux objets affichés dans la vue Résumé d’un instantané de tas.

Le filtre Types de nœuds s’affichait également lorsque les vues Confinement ou Statistiques de l’instantané de tas étaient sélectionnées, même si le filtre ne s’applique pas à ces vues. Le problème a été corrigé. Dans Microsoft Edge 113, le filtre Types de nœud s’affiche uniquement lorsque la vue Résumé est sélectionnée :

Dans les vues Confinement et Statistiques , le filtre Types de nœuds n’est plus affiché, car il ne s’applique pas :

Voir aussi :

• Filtrer les instantanés de segment de mémoire par type de nœud dans Nouveautés de DevTools (Microsoft Edge 100)
• Effectuer une instantané dans Enregistrer des instantanés de segment de mémoire à l’aide de l’outil Mémoire (type de profilage « instantané de tas »).

Annonces du projet Chromium

Microsoft Edge 113 inclut également les mises à jour suivantes du projet Chromium :

• Remplacer les en-têtes de réponse du réseau
• Améliorations apportées au débogage de Nuxt, Vite et Rollup
• Améliorations CSS dans les styles d’éléments >
  • Propriétés et valeurs CSS non valides
  • Liens vers des images clés dans la propriété raccourcie d’animation
• Nouveau paramètre de console : saisie semi-automatique lors de l’entrée
• Le menu de commande met l’accent sur les fichiers créés
• Déclassement de JavaScript Profiler : deuxième étape

Voir aussi

• Nouveautés de Microsoft Edge DevTools
• Notes de publication pour la plateforme web Microsoft Edge