Remarque
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Il s’agit des dernières fonctionnalités DevTools de la version stable de Microsoft Edge.
Vidéo : Nouveautés de DevTools 112
L’outil de performances réduit l’exécution de JavaScript dans les iframes hors processus
Dans les versions précédentes de Microsoft Edge, l’exécution de JavaScript dans un iframe hors processus (OOPIF) était isolée de DevTools. Par conséquent, l’outil Performances n’a pas pu appliquer de sourcemaps aux événements de performances provenant d’un OOPIF. Lors de l’enregistrement d’un profil dans l’outil Performances , l’outil peut uniquement afficher les noms de fichier et de fonction miniaturisés dans le graphique en courbes, et non les noms non minifiés :
Dans Microsoft Edge 112, l’outil Performances charge désormais les mappages de sources et les applique aux événements de performances suivis dans OOPIFs. Par conséquent, après avoir enregistré un profil dans l’outil Performances , vous pouvez maintenant voir des noms de fichiers et de fonctions non minifiés pour l’exécution JavaScript qui se produit dans un OOPIF :
Voir aussi :
- L’outil Performances déminide les noms de fichiers et de fonctions lors du profilage du code de production dans Nouveautés de DevTools (Microsoft Edge 111).
- 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
- Enregistrer les performances dans la référence des fonctionnalités de performance.
L’outil de vue d’ensemble du CSS affiche des sélecteurs simples pour des gains de performances rapides
L’outil de vue d’ensemble du CSS comporte une nouvelle section Sélecteurs non simples, qui affiche une liste de sélecteurs CSS non simples lorsque vous prenez un instantané de vue d’ensemble du CSS de votre page Web. Cette liste de sélecteurs CSS non simples dans l’outil de vue d’ensemble CSS offre un moyen rapide d’identifier les coupables courants susceptibles d’entraîner des événements de recalcul de styles de longue durée :
Il s’agit d’une liste de sélecteurs susceptibles de réduire les performances. Pour déterminer si ces sélecteurs réduisent réellement les performances, utilisez la fonctionnalité Statistiques de sélecteur dans l’outil Performances .
Vous pouvez essayer de modifier ces sélecteurs afin qu’ils soient plus spécifiques et correspondent à moins d’éléments, ce qui réduit le temps nécessaire au navigateur pour calculer les styles dans les cas suivants :
- Lorsque des éléments sont ajoutés ou supprimés du DOM.
- Lorsque les attributs d’un élément sont modifiés, tels que
classouid. - Lorsqu’une entrée utilisateur se produit, par exemple un déplacement de la souris ou un changement de focus, cela peut affecter les
:hoverrègles.
Pour analyser les performances des sélecteurs CSS individuels et analyser l’impact de vos modifications, utilisez la fonctionnalité Statistiques de sélecteur de l’outil Performances .
Voir aussi :
- Optimiser les styles CSS avec l’outil de vue d’ensemble du CSS
- Analyser les performances du sélecteur CSS pendant les événements de recalcul de style
La visionneuse JSON dans Microsoft Edge prend en charge le pliage de code
À partir de Microsoft Edge 110, vous avez accès à une fonctionnalité expérimentale pour afficher JSON directement dans le navigateur : la visionneuse JSON. Auparavant, vous utilisiez peut-être des extensions de navigateur ou des éditeurs de texte pour afficher JSON, mais vous pouvez désormais inspecter les charges utiles JSON directement dans Microsoft Edge, que le JSON provienne du réseau ou du disque.
À compter de Microsoft Edge 112, la visionneuse JSON prend désormais en charge le pliage de code. La visionneuse JSON est une fonctionnalité expérimentale. Pour activer la visionneuse JSON et accéder au pliage de code :
Accédez à
edge://flags.Dans le champ de texte Indicateurs de recherche , commencez à taper JSON Viewer.
Dans le menu déroulant de la visionneuse JSON , sélectionnez Activé. Un bouton Redémarrer apparaît en bas à droite.
Cliquez sur le bouton Redémarrer .
Accédez à un fichier JSON, tel que https://microsoftedge.github.io/Demos/json-dummy-data/256KB.json. Les numéros de ligne apparaissent à gauche.
Cliquez sur
) dans le coin supérieur droit, puis cochez la case Pliage du code.
Avec le pliage de code activé, vous pouvez maintenant développer et réduire les objets et les tableaux dans le JSON que vous inspectez :
Envoyez-nous vos commentaires !
Voir aussi :
Améliorations du mode de concentration
Focus Mode est une nouvelle interface utilisateur expérimentale pour DevTools. Le mode Focus simplifie et rationalise l’interface utilisateur de DevTools, offrant une personnalisation maximale sans compromettre l’ensemble robuste de fonctionnalités des outils. Dans Microsoft Edge 112, le mode Focus a reçu les améliorations suivantes :
Appuyer sur Échap affiche ou masque entièrement la vue rapide
Dans les versions précédentes de Microsoft Edge, en mode Focus, le panneau Affichage rapide s’affichait toujours comme réduit ou développé. En appuyant sur Échap , le panneau Aperçu rapide a été développé s’il était réduit, et inversement. Cependant, lorsque l’outil Console était sélectionné dans la barre d’activité, appuyer sur Échap lorsque le panneau Affichage rapide était réduit affichait un affichage vide. Ce problème a été résolu dans la version 112 de Microsoft Edge.
Appuyer sur Échap affiche ou masque entièrement le panneau Affichage rapide . Si le panneau Affichage rapide est actuellement masqué, appuyez sur Échap pour afficher le panneau Affichage rapide , développé :
Si la barre d’outils Affichage rapide est actuellement affichée (que le panneau Affichage rapide soit réduit ou développé), l’appui sur Échap masque entièrement la barre d’outils et le panneau Affichage rapide :
L’icône de nœud pour les DevTools dédiés ne chevauche plus la première icône dans la barre d’activités
En mode Focus, lorsque DevTools détecte qu’un serveur Node.js est en cours d’exécution, l’icône de nœud s’affiche. En cliquant sur cette icône, vous ouvrez les DevTools dédiés à Node.
Mise à jour : La barre d’activité verticale n’est plus prise en charge dans Microsoft Edge 144 et les versions ultérieures.
Avant Microsoft Edge 112, l’icône du nœud chevauche la première icône d’outil lorsque la barre d’activités est en orientation verticale, ce qui rend plus difficile la sélection du premier outil. Ce problème a été résolu ; il n’y a pas de chevauchement de l’icône du nœud et de la première icône d’outil lorsque la barre d’activités est verticale :
Avec la barre d’activités verticale, une seule étiquette s’affiche pour chaque icône d’outil lorsque vous survolez
Mise à jour : La barre d’activité verticale n’est plus prise en charge dans Microsoft Edge 144 et les versions ultérieures.
En mode Focus, lorsque la barre d’activités est orientée verticalement, une étiquette de nom d’outil s’affiche lorsque vous survolez une icône ou sélectionnez une icône avec le clavier. Ces étiquettes vous aident à connaître l’icône de chaque outil dans la barre d’activité.
Auparavant, la sélection d’une icône avec le clavier ou le pointage sur une icône avec la souris affichait deux étiquettes simultanément. Ce problème a été résolu ; Une seule étiquette s’affiche :
Annonces du projet Chromium
Microsoft Edge 112 inclut également les mises à jour suivantes du projet Chromium :
- Mises à jour des styles des éléments >
- Marquage de points de journalisation et de points d’arrêt conditionnels dans la console
- Ignorer les scripts non pertinents pendant le débogage
- Déclassement de JavaScript Profiler démarré
- Émuler un contraste réduit
- Phare 10