À propos de la liste des outils

DevTools fournit plus de 30 outils, composés d’outils par défaut et d’outils Plus.

Outils par défaut

Par défaut, les outils suivants sont répertoriés dans la barre d’activité en haut de DevTools :

• Inspecter l’outil
• Émulation d’appareil
• 
• Éléments
• Console
• Sources
• Réseau
• Performances
• 
• Application

Vue d’ensemble des outils par défaut

Outil	Objectif	Article
Inspecter	Utilisez l’outil Inspecter pour afficher des informations sur un élément dans une page web rendue. Lorsque l’outil Inspecter est actif, vous survolez les éléments de la page Web, et DevTools ajoute une superposition d’informations et une mise en surbrillance de grille sur la page Web.	Analyser les pages à l’aide de l’outil Inspecter
Émulation d’appareil	Utilisez l’outil d’émulation d’appareil , également appelé mode de simulation d’appareil ou mode d’appareil, pour estimer approximativement l’apparence et les réponses de votre page sur un appareil mobile.	Émuler des appareils mobiles (émulation d’appareil)
	L’outil Welcome (Bienvenue) s’ouvre lorsque vous ouvrez DevTools pour la première fois. Il affiche des liens vers la documentation du développeur, les dernières fonctionnalités, les notes de publication et une option pour contacter l’équipe Microsoft Edge DevTools.	Outil d’accueil
Éléments	Inspectez, modifiez et déboguez votre HTML et CSS. Vous pouvez modifier dans l’outil tout en affichant les modifications en direct dans le navigateur. Déboguez votre HTML à l’aide de l’arborescence DOM, et inspectez et travaillez sur le CSS de votre page Web.	Inspecter, modifier et déboguer du code HTML et CSS à l’aide de l’outil Elements
Console	Une ligne de commande intelligente et riche dans DevTools. Un excellent outil compagnon à utiliser avec d’autres outils. Fournit un moyen puissant de créer des scripts de fonctionnalités, d’inspecter la page web actuelle et de manipuler la page web actuelle à l’aide de JavaScript.	Présentation de la console
Sources	Utilisez l’outil Sources pour afficher, modifier et déboguer le code JavaScript frontal, ainsi qu’inspecter et modifier les fichiers HTML et CSS qui composent la page Web active.	Vue d’ensemble de l’outil Sources
Réseau	Utilisez l’outil Réseau pour vous assurer que les ressources sont téléchargées comme prévu. Examinez les propriétés d’une ressource individuelle, telles que les en-têtes HTTP, le contenu ou la taille.	Inspecter l’activité réseau
Performances	Analysez les performances d’exécution, c’est-à-dire les performances de votre page lorsqu’elle est en cours d’exécution, par opposition au chargement.	Analyser les performances runtime (didacticiel)
	Recherchez les problèmes de mémoire qui affectent les performances des pages, notamment les fuites de mémoire, le gonflement de la mémoire et les nettoyage fréquents de la mémoire.	Résoudre les problèmes de mémoire
Application	Utilisez l’outil Application pour gérer le stockage des pages d’application web, y compris le manifeste, les workers de service, le stockage local, les cookies, le stockage de cache et les services d’arrière-plan.	L’outil Application pour gérer le stockage

Les outils Éléments, Console et Sources (onglets) sont permanents dans la barre d’activité. Les autres onglets d’outils peuvent être supprimés ou déplacés vers le bas vers la barre d’outils Affichage rapide .

Autres outils

Le bouton Plus d’outils () de la barre d’activités répertorie les outils facultatifs supplémentaires qui peuvent être ajoutés à la barre d’activité.

Il existe également un bouton Plus d’outils () sur la barre d’outils Affichage rapide en bas de DevTools. Pour afficher ou masquer le panneau Affichage rapide , appuyez sur Échap ; ou cliquez sur Personnaliser et contrôler DevTools (...) dans le coin supérieur droit, puis cliquez sur Activer/désactiver le panneau Affichage rapide.

Vue d’ensemble des outils dans le menu Plus d’outils

Outil	Objectif	Article
Vue 3D	Explorez la page Web traduite dans une perspective 3D. Déboguez votre page web en naviguant dans le contexte d’empilement DOM ou index-z.	Parcourir les couches de pages web, z-index et DOM à l’aide de l’outil Affichage 3D
Animations	Inspectez et modifiez les effets d’animation CSS à l’aide de l’inspecteur d’animation dans l’outil Animations .	Inspecter et modifier les effets d’animation CSS
Modifications	Suit toutes les modifications que vous avez apportées à CSS ou JavaScript dans DevTools. Vous montre les modifications à apporter à vos fichiers sources réels après avoir utilisé DevTools pour modifier vos fichiers de page web envoyés depuis le serveur.	Suivre les modifications apportées aux fichiers à l’aide de l’outil Modifications
Couverture	Vous aider à trouver du code JavaScript et CSS inutilisé, pour accélérer le chargement de votre page et économiser les données cellulaires de vos utilisateurs mobiles.	Rechercher du code JavaScript et CSS inutilisé à l’aide de l’outil Couverture
Analyseur d’incident	Analysez les incidents de votre application web. Vous pouvez entrer une trace de pile de production JavaScript, par exemple pour les exceptions JavaScript récupérables, puis appliquer vos cartes sources à la trace de pile afin de pouvoir déboguer plus rapidement.	Outil Analyseur d’incident
Vue d’ensemble de CSS	Vous aider à mieux comprendre le CSS de votre page et à identifier les améliorations potentielles.	Outil de vue d’ensemble du CSS
Ressources du développeur	Affiche les URL de ressource pour la page web.	Outil Ressources pour les développeurs
Issues	L’outil Problèmes analyse automatiquement la page Web actuelle, signale les problèmes regroupés par type et fournit de la documentation pour aider à expliquer et à résoudre les problèmes.	Rechercher et résoudre des problèmes à l’aide de l’outil Problèmes
Phare	Utilisez l’outil Phare pour identifier et résoudre les problèmes courants qui affectent les performances, l’accessibilité et l’expérience utilisateur de votre site.	Outil Phare
Media	Utilisez cet outil pour afficher les informations et déboguer les lecteurs multimédias par onglet de navigateur.	Afficher et déboguer les informations du lecteur multimédia (outil Média)
Inspecteur de mémoire	Inspectez JavaScript ArrayBuffer avec l’inspecteur de mémoire.	Inspecter un arrayBuffer JavaScript avec l’outil Inspecteur de mémoire
Conditions réseau	Utilisez l’outil Conditions réseau pour désactiver le cache du navigateur, définir la limitation du réseau, définir la chaîne de l’agent utilisateur et définir les encodage de contenu tels que deflate, gzip et br.	Outil Conditions du réseau
Console réseau	Utilisez l’outil Console réseau pour apporter des modifications aux requêtes réseau (appels réseau) afin de voir pourquoi elles échouent. Modifiez et rejouez les demandes réseau et effectuez des appels d’API réseau détaillés.	Outil Console réseau
Blocage des requêtes de réseau	Utilisez l’outil de blocage des requêtes réseau pour tester le blocage des demandes réseau vers un modèle d’URL spécifié et voir comment une page web se comporte.	Outil de blocage des requêtes de réseau
Moniteur de performance	Fournit une vue en temps réel des performances d’exécution d’une page web, afin de déterminer d’où viennent les problèmes de performances, ce qui ralentit l’exécution d’un site web. Détermine si les problèmes proviennent d’une utilisation élevée de la mémoire ou du processeur, de calculs de disposition et de style trop fréquents ou d’un trop grand nombre de nœuds DOM et d’écouteurs d’événements.	Mesurer les performances d’exécution d’une page à l’aide de l’outil Analyse des performances
Source rapide	Utilisez l’outil Source rapide pour afficher ou modifier des fichiers sources lorsque vous utilisez un outil autre que l’outil Sources .	Afficher ou modifier des fichiers sources à l’aide de l’outil Source rapide
Enregistreur	Utilisez l’outil Enregistreur pour enregistrer manuellement les flux d’utilisateurs, puis relisez-les automatiquement pour accélérer les tests et les enquêtes sur les performances.	Enregistrer et relire les flux d’utilisateurs et mesurer les performances
Rendu	Utilisez l’outil de rendu pour voir à quoi ressemble votre page Web avec différentes options d’affichage ou des défaillances visuelles.	Outil de rendu, pour voir à quoi ressemble une page Web avec différentes options d’affichage ou des défaillances visuelles
Recherche	Utilisez l’outil Recherche pour rechercher des fichiers sources spécifiques pour une page web, notamment des fichiers HTML, CSS, JavaScript et des images.	Rechercher des fichiers sources pour une page à l’aide de l’outil Recherche
Sécurité	Inspecte la sécurité d’une page.	Comprendre les problèmes de sécurité à l’aide de l’outil Sécurité
Capteurs	Remplacez la géolocalisation, simulez l’orientation de l’appareil, forcez les événements tactiles lors d’un clic et émulez l’état d’inactivité de l’appareil.	Émuler les capteurs de l’appareil
Source Moniteur Cartes	Utilisez l’outil Surveillance des cartes sources pour surveiller vos cartes sources.	Outil source Moniteur Azure Maps
WebAudio	Utilisez l’outil WebAudio pour surveiller le trafic WebAudio. L’outil WebAudio utilise l’API WebAudio.	Outil WebAudio
WebAuthn	Utilisez l’outil WebAuthn pour créer et interagir avec des authentificateurs virtuels logiciels.	Émuler des authentificateurs et déboguer WebAuthn

Le menu Plus d’outils (+) de la barre d’activités et de la barre d’outils Affichage rapide est dynamique : il omet les outils d’onglet ouverts dans cette barre d’outils.

Autres façons d’accéder aux outils

Les fonctionnalités suivantes sont des moyens supplémentaires d’accéder aux outils :

• Le panneau Affichage rapide est une barre d’outils supplémentaire et une zone permettant de ranger les outils, sous ou à droite du panneau de la barre d’activité .

• Le menu de commande est un moyen d’utiliser directement les fonctionnalités des outils.

• Les pages Paramètres peuvent activer des fonctionnalités supplémentaires des outils.

Outils expérimentaux

Microsoft Edge DevTools inclut éventuellement des outils supplémentaires, si vous cochez la case de la case activée de l’expérience dans les expériences > Paramètres DevTools. Par exemple :

Outil	Objectif	Article
Moniteur de protocole	Affiche les messages de protocole DevTools envoyés et reçus par DevTools, pour déboguer la page inspectée.	Moniteur de protocole dans les fonctionnalités expérimentales.

Outils de barre d’activités et outils Affichage rapide

Les outils de la barre d’activités sont des outils qui s’ouvrent par défaut dans la barre d’activités (le volet supérieur). Les outils Affichage rapide sont des outils qui s’ouvrent par défaut dans le panneau Affichage rapide (volet inférieur). Pour afficher ou masquer le panneau Affichage rapide : lorsque le focus est sur DevTools, appuyez sur Échap.

Le menu de commande répertorie d’abord les outils de la barre d’activité (indiqués par l’étiquette du panneau ), puis les outils Affichage rapide :

Pour déplacer un outil vers l’autre barre d’outils, cliquez avec le bouton droit sur l’onglet de l’outil, puis sélectionnez Déplacer vers la vue rapide du bas, Déplacer vers la vue rapide sur le côté ou Déplacer vers la barre d’activité supérieure :

Pour ouvrir le menu de commande, appuyez sur Ctrl+Maj+P (Windows, Linux) ou Commande+Maj+P (macOS). Vous pouvez également cliquer sur le bouton Personnaliser et contrôler DevTools (), puis sélectionner Exécuter la commande.

Fermer les onglets de l’outil

Pour fermer un onglet d’outil situé dans une barre d’outils, cliquez avec le bouton droit sur l’onglet, puis sélectionnez Supprimer de la barre d’activités ou Supprimer de l’Aperçu rapide :

Les outils Éléments, Console et Sources sont des onglets permanents qui ne peuvent pas être fermés ou déplacés de la barre d’activités vers le panneau Affichage rapide . Vous pouvez faire glisser leurs onglets pour les réorganiser dans la barre d’activité.

L’outil Console est également un onglet permanent de la barre d’outils Affichage rapide . En revanche, l’outil Problèmes de la barre d’outils Affichage rapide peut être supprimé.

Restauration des onglets d’outils par défaut

Pour restaurer tous les onglets d’outil par défaut dans la barre d’activité et la vue rapide :

1. Dans DevTools, sélectionnez Personnaliser et contrôler DevTools () >Paramètres () >Préférences.

2. Cliquez sur le bouton Restaurer les valeurs par défaut et actualiser . DevTools redémarre et les onglets par défaut apparaissent dans les deux barres d’outils.

Voir aussi

• Vue d’ensemble de DevTools - Similaire à cet article, mais couverture plus large, avec une introduction de haut niveau à DevTools.