Vue d’ensemble de DevTools

Le navigateur Microsoft Edge est fourni avec des outils de développement web intégrés, appelés Microsoft Edge DevTools. DevTools est un ensemble d’outils de développement web qui apparaît à côté d’une page web rendue dans le navigateur.

Contenu détaillé :

Introduction

DevTools offre un moyen puissant d’inspecter et de déboguer des pages web et des applications web. Vous pouvez même modifier des fichiers sources et créer des projets de site Web, le tout dans l’environnement DevTools.

Avec DevTools, vous pouvez effectuer les opérations suivantes :

  • Inspectez, ajustez et modifiez les styles des éléments de la page Web à l’aide d’outils en direct avec une interface visuelle. Inspectez l’emplacement où le navigateur a stocké le contenu pour construire la page web, y compris .htmlles formats , .css.js, et .png de fichier.

  • Émulez le comportement de votre site Web sur différents appareils et simulez un environnement mobile, avec différentes conditions de réseau. Inspectez le trafic réseau et voyez l’emplacement des problèmes.

  • Déboguez votre JavaScript à l’aide du débogage par points d’arrêt et avec la console en direct. Recherchez les problèmes de mémoire et les problèmes de rendu avec vos applications web.

  • Recherchez les problèmes d’accessibilité, de performances, de compatibilité et de sécurité dans vos produits et utilisez DevTools pour résoudre les problèmes d’accessibilité détectés.

  • Utilisez un environnement de développement pour synchroniser les modifications dans DevTools avec le système de fichiers et à partir du web.

Vidéo : Comprendre l’interface utilisateur de DevTools

Image miniature de la vidéo « Comprendre l’interface utilisateur de DevTools »

Cette vidéo légèrement plus ancienne, datant de septembre 2022, montre l’interface utilisateur héritée de DevTools :

  • Au lieu de la barre d’activité, la vidéo montre la barre d’outils principale héritée.
  • Au lieu du panneau Affichage rapide (en bas de DevTools), la vidéo montre le tiroir.

Ouvrir DevTools

Dans Microsoft Edge, vous pouvez ouvrir DevTools à l’aide de la souris ou du clavier, de l’une des manières suivantes. L’outil qui est ouvert dépend de la façon dont vous ouvrez DevTools.

Principaux moyens :

Action Outil résultant
Cliquez avec le bouton droit sur un élément d’une page Web, puis sélectionnez Inspecter. L’outil Elements , avec l’arborescence DOM développée pour afficher l’élément de page cliqué avec le bouton droit.
Appuyez sur Ctrl+Maj+I (Windows, Linux) ou Commande+Option+I (macOS). L’outil utilisé précédemment ou l’outil d’accueil .
Appuyez sur F12. L’outil utilisé précédemment ou l’outil d’accueil .

Autres manières :

Action Outil résultant
Dans la barre d’outils Microsoft Edge, sélectionnez Paramètres et plus (icône> « Paramètres et plus ») Autres outils> :Outils de développement. L’outil utilisé précédemment ou l’outil d’accueil .
Appuyez sur Ctrl+Maj+J (Windows, Linux) ou sur Commande+Option+J (macOS). L’outil Console .
Appuyez sur Ctrl+Maj+C (Windows, Linux) ou Commande+Option+C (macOS). L’outil Elements , avec l’arborescence DOM développée pour afficher l’élément <body> .
Appuyez sur Maj+F10 pour ouvrir le menu contextuel. Pour sélectionner la commande Inspecter , appuyez sur Flèche vers le haut , puis sur Entrée. L’outil Elements , avec l’arborescence DOM développée pour afficher l’élément <html> .
Appuyez sur Tab ou Maj+Tab pour mettre le focus sur un élément de page. Appuyez ensuite sur Maj+F10 pour ouvrir le menu contextuel. Pour sélectionner la commande Inspecter , appuyez sur Flèche vers le haut , puis sur Entrée. L’outil Éléments , avec l’arborescence DOM développée pour afficher l’élément de page ciblé.

Ouvrez DevTools en cliquant avec le bouton droit sur un élément d’une page Web

Une bonne façon d’ouvrir DevTools consiste à cliquer avec le bouton droit sur un élément d’une page Web, puis à sélectionner Inspecter :

Cliquer avec le bouton droit sur un lien À propos de nous dans une page web de démonstration, puis sélectionner la commande Inspecter

DevTools s’ouvre, avec l’élément cliqué avec le bouton droit mis en évidence dans l’arborescence DOM de l’outil Éléments :

DevTools s’est ouvert sur le côté droit de Microsoft Edge, avec un élément DOM sélectionné dans l’arborescence DOM de l’outil Éléments

Ouvrir DevTools à l’aide de la barre d’outils Microsoft Edge

Dans la barre d’outils Microsoft Edge, sélectionnez Paramètres et plus (...) >Autres outils> :Outils de développement :

Le menu « Paramètres et plus » de Microsoft Edge, avec le sous-menu « Autres outils » et la commande « Outils de développement »

DevTools s’ouvre automatiquement lorsque vous ouvrez un nouvel onglet

Pour que DevTools s’ouvre automatiquement chaque fois que vous ouvrez un nouvel onglet dans le navigateur :

  1. Sur la ligne de commande, ouvrez Microsoft Edge en passant l’indicateur --auto-open-devtools-for-tabs , comme suit :

    Invite de commandes Windows :

    start msedge --auto-open-devtools-for-tabs

    Windows PowerShell :

    Start-Process -FilePath "msedge" -ArgumentList "--auto-open-devtools-for-tabs"

    Terminal macOS :

    /Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --auto-open-devtools-for-tabs

    Bash shell sur Linux :

    microsoft-edge --auto-open-devtools-for-tabs
Désactivation de démarrage rapide

Important : Il ne doit y avoir aucun processus Microsoft Edge en cours d’exécution lors du lancement via auto-open-devtools-for-tabs, vous devrez donc peut-être désactiver démarrage rapide dans edge://settings/system.

La fonctionnalité d’accélération du démarrage conserve un processus Microsoft Edge minimal en arrière-plan. Cela interfère avec la auto-open-devtools-for-tabs fonctionnalité et devrait être désactivé pour l’utiliser. Pour plus d’informations, consultez Obtenir de l’aide sur démarrage rapide.

Désactivation du raccourci clavier F12

Pour empêcher d’appuyer sur F12 pour ouvrir DevTools :

  1. Dans Microsoft Edge, accédez à edge://settings/system.

  2. Faites défiler vers le bas jusqu’à la section Outils de développement, puis désactivez la touche Utiliser F12 pour ouvrir le bouton bascule Outils de développement.

    La page Paramètres Edge, avec la section Outils de développement et le bouton bascule pour désactiver la touche F12

Prise en charge du clavier

Vous pouvez interagir avec DevTools à l’aide de la souris ou du clavier. Les raccourcis clavier offrent un moyen rapide d’accéder aux fonctionnalités et sont nécessaires pour l’accessibilité. Divers outils sont de plus en plus accessibles via le clavier et les technologies d’assistance telles que les lecteurs d’écran.

Consultez Raccourcis clavier et Parcourir DevTools avec la technologie d’assistance.

Modifier l’emplacement d’ancrage de DevTools dans le navigateur

Vous pouvez ancrer DevTools à droite, à gauche ou en bas du navigateur, ou le détacher dans une fenêtre séparée. Consultez Modifier le placement de DevTools (Détacher, Ancrer en bas, Ancrer à gauche).

Zoom avant ou arrière de DevTools

L’interface utilisateur DevTools est implémentée à l’aide de HTML et CSS, comme les pages web, de sorte que vous pouvez effectuer un zoom avant et arrière à l’aide des raccourcis clavier standard. Les niveaux de zoom de DevTools et de la page rendue sont indépendants.

Pour effectuer un zoom sur la partie DevTools du navigateur :

  1. Si le focus n’est pas déjà sur DevTools, cliquez quelque part dans DevTools.
  2. Appuyez sur Ctrl++ ou Ctrl+- (Windows ou Linux). Ou appuyez sur Commande++ ou Commande+- (macOS).

Zoom arrière de DevTools

Pour effectuer un zoom sur la page rendue, cliquez sur la page, puis utilisez les mêmes raccourcis clavier que ci-dessus.

Pour rétablir le zoom à 100 % :

  1. Assurez-vous que le focus est placé sur la partie souhaitée du navigateur, soit DevTools, soit la page rendue.
  2. Appuyez sur Ctrl+0 ou Ctrl+Pavé numérique0 (Windows ou Linux), ou Cmd+0 (macOS).

Pour effectuer un zoom Paramètres DevTools :

  1. Dans les paramètres DevTools, cliquez sur Fermer (x) dans le coin supérieur droit.
  2. Modifiez le niveau de zoom de DevTools, comme décrit ci-dessus.
  3. Cliquez sur le bouton Paramètres (icône Paramètres).

Pour effectuer un zoom sur DevTools à l’aide du menu de commande :

  1. Cliquez sur le bouton de menu Personnaliser et contrôler DevTools (icône Personnaliser), puis sélectionnez Exécuter la commande.
  2. Dans le menu de commande, commencez à taper zoom, puis sélectionnez une commande zoom :
    • Réinitialiser le niveau de zoom
    • Zoom avant
    • Zoom arrière

Vue d’ensemble de l’interface utilisateur

L’interface utilisateur de DevTools comprend les domaines principaux suivants :

  • La barre d’activités en haut qui contient des icônes utilisées pour accéder aux outils, paramètres, documentation, etc.

    • Zone d’outils actuelle, où apparaît l’outil actuellement sélectionné dans la barre d’activité .

  • La barre d’outils Affichage rapide , en bas, qui contient les onglets utilisés pour accéder aux outils.

    • Zone d’outils du bas, où se trouve l’outil actuellement sélectionné dans la barre d’outils Affichage rapide .

Microsoft Edge, avec DevTools ouvert sur le côté, avec les 4 principales zones d’interface utilisateur mises en surbrillance

Par défaut, la barre d’activité contient les outils suivants :

  • Bouton bascule Inspecter l’outil (icône Inspecter l’outil).

  • Outil d’émulation de périphérique (icône d’émulation de périphérique).

  • Outil d’accueil (icône de l’outil d’accueil).

  • Outil Éléments (icône de l’outil Éléments).

  • Outil console (icône de l’outil console).

  • Outil Sources (icône de l’outil Sources).

  • Outil réseau (icône de l’outil Réseau).

  • Outil Performances (icône de l’outil Performances).

  • Outil Mémoire (icône de l’outil Mémoire).

  • Outil de l’application (icône de l’outil d’application).

Par défaut, la barre d’outils Affichage rapide contient les outils suivants :

  • Outil console (icône de l’outil console).

  • Outil Problèmes (icône de l’outil Problèmes).

Dans la barre d’activité, les onglets d’outils contiennent soit le nom et l’icône de l’outil, soit simplement l’icône de l’outil, en fonction de la largeur de la fenêtre DevTools. Si la fenêtre est suffisamment large, le nom de l’outil et l’icône s’affichent. Si la fenêtre est trop étroite, seule l’icône de l’outil s’affiche et le nom de l’outil s’affiche lorsque vous pointez sur l’icône de l’outil.

Modifier l’emplacement de l’Aperçu rapide

Par défaut, le panneau Affichage rapide se trouve en bas de DevTools. Vous pouvez également placer le panneau Affichage rapide sur le côté droit de DevTools.

Pour afficher le panneau Affichage rapide , appuyez sur Échap.

Pour modifier l’emplacement du panneau Affichage rapide , dans la barre d’outils Affichage rapide , cliquez sur le bouton Affichage rapide du Dock à droite (icône « Affichage rapide du Dock à droite ») ou sur le bouton Affichage rapide du Dock en bas :

L’icône Affichage rapide du Dock, affichée dans la barre d’outils Aperçu rapide, au bas de DevTool

Fonctionnalités de la barre d’activités

DevTools vous donne un pouvoir incroyable pour inspecter, déboguer et modifier le site web actuellement affiché dans le navigateur. La plupart des outils affichent les modifications en direct. Les mises à jour en direct rendent les outils utiles pour affiner l’apparence et la navigation ou la fonctionnalité d’une page web sans devoir la rafraîchir ou la construire.

Panneaux d’outils à onglets contenant des onglets et des pages

Outre l’outil d’inspection et l’émulation de périphérique, DevTools est divisé en un ensemble d’outils à onglets, tels que l’outil Éléments , l’outil Console et l’outil Sources . Dans le menu de commande, les outils sont appelés panneaux. Un onglet d’outil contient un panneau qui contient l’interface utilisateur de l’outil.

Onglets de niveau supérieur :

Les outils sont organisés en onglets sur la barre d’activités et sur la barre d’outils Affichage rapide . La plupart des outils sont également appelés panneaux. Un panneau est l’interface utilisateur interne d’un outil. Un outil possède un onglet qui peut être présent dans la barre d’activité et la barre d’outils Affichage rapide .

Onglets de niveau inférieur :

Dans le panneau de certains outils, il existe un ou plusieurs ensembles d’onglets (volets à onglets). Par exemple, l’outil Éléments contient un ensemble d’onglets qui comprend les onglets Styles, Détecteurs d’événements et Accessibilité . Pour les autres outils, le panneau de l’outil comporte des pages répertoriées sur le côté gauche.

La barre d’activité et la barre d’outils Affichage rapide

Il existe deux barres d’outils : la barre d’activité en haut de DevTools et la barre d’outils Affichage rapide en bas lorsque vous appuyez sur Échap.

La barre d’activités contient les fonctionnalités suivantes :

  • Outils d’icône :
    • Bouton bascule Inspecter l’outil (icône Inspecter l’outil).
    • Bouton Émulation de périphérique (icône Émulation de périphérique).

  • Onglets d’outils :

    • Outil d’accueil .
    • Outil Éléments . Permanent.
    • Outil console . Permanent.
    • Outil Sources . Permanent.
    • Outil réseau .
    • Outil de performances .
    • Outil Mémoire .
    • Outil d’application .

  • Icônes :

    • Bouton Autres outils (icône Plus d’outils).
    • Personnaliser et contrôler le bouton de menu DevTools (icône Personnaliser).
    • Bouton Aide (icône Aide).
    • Fermer Bouton DevTools (Fermer l’icône DevTools).

Barre d’activité, avec des étiquettes qui identifient ses fonctionnalités

Les fonctionnalités de la barre d’activités sont décrites ci-dessous.

Épingler et réorganiser des outils dans la barre d’activité

Outre les outils permanents Elements, Console et Sources , vous pouvez contrôler les outils qui apparaissent dans la barre d’activité, afin de personnaliser DevTools pour vous concentrer sur vos activités actuelles.

  1. Cliquez sur le bouton Autres outils (icône Autres outils) pour répertorier tous les outils disponibles :

    Le menu Plus d’outils dans la barre d’activité, avec la liste étendue de tous les outils

  2. Sélectionnez un outil pour l’épingler à la barre d’activité. L’outil est alors présent dans la barre d’activité chaque fois que DevTools est ouvert.

S’il n’y a pas assez d’espace dans la barre d’activités pour afficher tous les outils épinglés, les outils ouverts mais non affichés sont déplacés dans le menu Plus d’outils :

Le menu Plus d’outils, montrant certains outils épinglés qui ne pouvaient pas tenir dans la barre d’activité

Pour détacher un outil de la barre d’activité, cliquez avec le bouton droit sur l’onglet de l’outil, puis sélectionnez Supprimer de la barre d’activité :

Le menu contextuel de l’onglet Performances permet de supprimer l’outil de la barre d’activités

Inspecter l’outil

Lorsque vous cliquez sur le bouton Inspecter l’outil (icône de l’outil Inspecter), vous pouvez sélectionner un élément de la page Web actuelle. Lorsque l’outil Inspecter est actif, vous pouvez déplacer votre souris sur différentes parties de la page Web pour obtenir des informations détaillées sur les éléments de page, ainsi qu’une superposition multicolore qui montre les dimensions de la disposition, le remplissage et la marge de l’élément de page.

L’outil Inspecter en pointant sur le premier titre de cet article

Émulation d’appareil

Cliquez sur le bouton Émulation d’appareil (icône Émulation d’appareil) pour afficher le site Web actuel dans un mode d’appareil émulé. L’outil d’émulation de périphérique vous permet d’exécuter et de tester la réaction de votre produit lorsque vous redimensionnez le navigateur. Il vous donne également une estimation de la mise en page et du comportement sur un appareil mobile.

Affichage DevTools de cet article dans un téléphone mobile émulé

Voir Émuler des appareils mobiles (émulation d’appareil).

Outil d’accueil

Comprend des informations sur les nouvelles fonctionnalités de DevTools, sur la manière de contacter l’équipe, et fournit des informations sur certaines fonctionnalités.

Outil Éléments

Vous permet d’inspecter, d’éditer et de déboguer votre HTML et CSS. Vous pouvez modifier dans l’outil tout en affichant les modifications en direct dans le navigateur.

L’outil Éléments est toujours présent dans la barre d’activité.

Outil console

Dans l’outil Console , vous pouvez :

  • Affichez et filtrez les messages enregistrés à partir de demandes réseau ou d’instructions de journal JavaScript.
  • Entrez des instructions JavaScript pour évaluer en temps réel. Les expressions sont évaluées dans le contexte actuel, par exemple lorsque le débogueur JavaScript de l’outil Sources est suspendu à un point d’arrêt.

L’outil Console est toujours présent dans la barre d’activités et dans la barre d’outils Affichage rapide .

Voir Console.

Outil sources

L’outil Sources est un éditeur de code et un débogueur JavaScript. Vous pouvez éditer des projets, gérer des extraits et déboguer votre projet en cours.

L’outil Sources est toujours présent dans la barre d’activité.

Outil réseau

L’outil Réseau vous permet de surveiller et d’inspecter les demandes ou les réponses du réseau et du cache du navigateur. Vous pouvez filtrer les demandes et les réponses pour répondre à vos besoins et simuler différentes conditions de réseau.

Voir Inspecter l’activité réseau.

Outil Performances

Voir Analyser les performances runtime (didacticiel).

Outil Mémoire

Voir Résoudre les problèmes de mémoire.

Outil de l’application

Voir Afficher, modifier et supprimer des cookies.

Bouton Plus d’outils

Pour ajouter un outil à la barre d’activité, cliquez sur le bouton Autres outils (icône Autres outils).

Personnaliser et contrôler le menu DevTools

Le bouton Personnaliser et contrôler DevTools (Personnaliser et contrôler DevTools) ouvre un menu déroulant pour :

  • Dock DevTools.
  • Ancrez la barre d’activité.
  • Sélectionnez un thème.
  • Afficher les raccourcis clavier.
  • Modifiez les paramètres de DevTools.
  • Ouvrir l’émulation d’appareil.
  • Activer/désactiver le panneau Affichage rapide .
  • Exécutez une commande.
  • Rechercher du code.
  • Ouvrez un fichier.

Bouton Aide

Le bouton Aide (icône Aide) ouvre un menu déroulant contenant les éléments suivants :

Fermer le bouton DevTools

Cliquez sur le bouton Fermer DevTools (icône Fermer DevTools) dans le coin supérieur droit de DevTools pour fermer DevTools et utiliser toute la fenêtre pour afficher la page web actuelle.

Fonctionnalités de la barre d’outils Affichage rapide

Utilisez le panneau Aperçu rapide pour ouvrir un deuxième outil sous ou à droite de l’outil déjà sélectionné dans la barre d’activités :

  1. Sélectionnez un outil dans la barre d’activité.

  2. Dans la barre d’outils Affichage rapide , cliquez sur Autres outils (icône Autres outils), puis sélectionnez un autre outil dans la liste.

Par exemple, ouvrez l’outil Rendu dans le panneau Affichage rapide , sous l’outil Réseau ouvert dans la barre d’activités :

DevTools avec l’outil Réseau en haut et l’outil Rendu en bas

Pour masquer ou développer la vue rapide, cliquez sur Réduire la vue rapide (icône Réduire) ou Développer la vue rapide (icône Développer), ou appuyez sur la touche Échap .

Vue d’ensemble de tous les outils

Pour obtenir un résumé de chaque outil, reportez-vous à la section À propos de la liste des outils.

Outil, onglet ou panneau

Les mots « outil », « onglet » et « panneau » sont quelque peu interchangeables. Dans le menu de commande, les outils sont appelés panneaux ; par exemple, l’outil Éléments est appelé panneau Éléments . Pour passer à l’outil Éléments , vous cliquez sur l’onglet Éléments . Un bouton et une liste Plus d’outils (icône Plus d’outils) sont utilisés pour sélectionner les outils. Les outils DevTools sont également appelés panneaux DevTools.

Vous pouvez personnaliser chacun des outils et le contenu d’un outil peut changer en fonction du contexte.

À propos des outils Barre d’activité et Affichage rapide

Le bouton Plus d’outils (icône Plus d’outils) s’affiche à la fois dans la barre d’activités et dans la barre d’outils Affichage rapide . Lorsque vous ouvrez un outil à partir de la liste Autres outils située dans la barre d’activité, l’outil apparaît dans la barre d’activité. Lorsque vous ouvrez un outil à partir de la liste Autres outils de la barre d’outils Affichage rapide , l’outil est ouvert dans le panneau Affichage rapide .

Tâche Étapes
Ouvrir un outil dans la barre d’activité en haut de DevTools Dans la barre d’activité en haut de DevTools, cliquez sur Autres outils (icône Plus d’outils), puis sélectionnez un outil.
Ouvrir un outil dans la barre d’outils Affichage rapide Lorsque DevTools a le focus, appuyez sur Échap pour afficher la barre d’outils Affichage rapide si ce n’est pas encore fait. Dans la barre d’outils Affichage rapide , cliquez sur le bouton Autres outils (icône Plus d’outils), puis sélectionnez un outil.
Déplacer un outil de la barre d’outils Affichage rapide vers la barre d’activités Lorsque DevTools a le focus, appuyez sur Échap pour afficher la vue rapide. Dans la barre d’outils Affichage rapide , cliquez avec le bouton droit sur l’onglet de l’outil, puis sélectionnez Déplacer vers la barre d’activité supérieure.
Déplacer un outil de la barre d’activités vers la barre d’outils Affichage rapide Dans la barre d’activité, cliquez avec le bouton droit sur l’onglet de l’outil, puis sélectionnez Déplacer vers la vue rapide du bas ou Déplacer vers la vue rapide latérale.
Ouvrir un outil dans sa barre d’outils par défaut (barre d’activité ou aperçu rapide) Lorsque DevTools a le focus, ouvrez le menu Commande en appuyant sur Ctrl+Maj+P (Windows, Linux) ou Commande+Maj+P (macOS). Tapez le nom de l’outil, puis sélectionnez une commande Afficher <l’outil> .

Outre les outils Barre d’activité et Affichage rapide , DevTools comprend les outils suivants :

Voir aussi

Conseil : utilisez le menu de commande

DevTools offre de nombreuses caractéristiques et fonctionnalités à utiliser avec votre site Web. Vous pouvez accéder aux différentes parties de DevTools de plusieurs façons, mais le menu de commande est souvent un moyen rapide.

le menu de commande dans DevTools

Dans le menu de commande, les outils sont appelés « panneaux » ; par exemple, l’outil Éléments est appelé panneau Éléments . Pour passer à l’outil Éléments , vous sélectionnez l’onglet Éléments .

  1. Pour ouvrir le menu de commande, effectuez l’une des opérations suivantes :

    • Cliquez sur le bouton Personnaliser et contrôler DevTools (Personnaliser et contrôler DevTools), puis sélectionnez la commande Exécuter.
    • Appuyez sur Ctrl+Maj+P (Windows, Linux) ou Commande+Maj+P (macOS).

    Le menu Commande vous permet de saisir des commandes pour afficher, masquer ou exécuter des fonctions dans DevTools.

  2. Dans le menu de commande, commencez à taper le nom d’un outil, par exemple Modifications, puis sélectionnez une commande Afficher , telle que Afficher les modifications. Le menu de commande affiche les commandes correspondantes :

    Le menu de commande affiche les options après avoir tapé « cha », y compris « Afficher l’outil Modifications dans la vue rapide »

  3. Appuyez sur Entrée pour sélectionner une commande Afficher , telle que Afficher les modifications. L’outil sélectionné s’ouvre dans le panneau Aperçu rapide , en bas :

    DevTools avec l’outil Changements ouvert dans le panneau Aperçu rapide

    L’outil Modifications est utile lorsque vous modifiez des CSS. Dans cet exemple, le menu de commande offre une alternative rapide à la sélection de Plus d’outils (icône Autres outils), puis de la sélection de Modifications. Cet exemple fournit également une alternative à la modification d’un .js fichier dans l’outil Sources , puis au clic droit et à la sélection des modifications locales.

Voir aussi Exécuter des commandes avec le menu de commande DevTools de Microsoft Edge.

Personnalisation de DevTools

Vous pouvez personnaliser DevTools pour répondre à vos besoins pour votre façon de travailler. Pour modifier les paramètres, cliquez sur le bouton Personnaliser et contrôler DevTools (Personnaliser et contrôler DevTools), puis sélectionnez Paramètres (icône Paramètres) ou appuyez sur F1.

Dans la> pageParamètres Préférences, vous pouvez modifier plusieurs éléments de DevTools. Par exemple, vous pouvez utiliser le paramètre de langue de l’interface utilisateur du navigateur pour utiliser dans DevTools la même langue que celle utilisée dans votre navigateur. Pour un autre exemple, utilisez le paramètre Thème pour modifier le thème de couleur de DevTools.

Tous les paramètres de DevTools

Vous pouvez également modifier les paramètres des fonctions avancées, telles que :

  • Ajouter des fichiers locaux à un espace de travail.
  • Filtrer le code de la bibliothèque à l’aide de la liste Ignorer.
  • Définissez les appareils que vous souhaitez inclure dans le mode test et de simulation d’appareil. Pour plus d’informations, consultez Émuler des appareils mobiles (émulation d’appareil).
  • Sélectionnez un profil de limitation du réseau.
  • Définir les emplacements simulés.
  • Personnalisez les raccourcis clavier. Par exemple, pour utiliser les mêmes raccourcis dans DevTools que dans Visual Studio Code, sélectionnez les raccourcis Match dans le préréglage> :Visual Studio Code.

Tous les raccourcis clavier et le menu permettant de faire correspondre chacun d’eux aux raccourcis dans Visual Studio Code

Essai de fonctions expérimentales

L’équipe DevTools fournit de nouvelles fonctionnalités sous forme d’expériences dans DevTools. Vous pouvez activer ou désactiver chacune des expériences. Pour afficher la liste complète des fonctionnalités expérimentales dans Microsoft Edge DevTools, dans DevTools, sélectionnez Paramètres (icône paramètres), puis sélectionnez Expériences.

Pour afficher un aperçu des dernières fonctionnalités disponibles sur DevTools, téléchargez Microsoft Edge Canary, qui se construit chaque soir.

Voir aussi :

Voir aussi

  • Dernière mise à jour :