Configurez l'apparence et le comportement de DevTools et de ses panneaux à l'aide de Settings (Paramètres) > Preferences (Préférences). Cet onglet répertorie les options de personnalisation générales et spécifiques aux panneaux.
Pour définir des préférences, ouvrez Paramètres > Préférences, puis faites défiler la page jusqu'à l'une des sections décrites ci-dessous.
Pour en savoir plus sur la fonction de chaque paramètre, recherchez son nom sur cette page et
développez sa description.Cette référence indique différents paramètres à l'aide des icônes suivantes :
Cases à cocher
- Listes déroulantes
obsolète
Pour rétablir les préférences par défaut, faites défiler l'écran jusqu'à la fin de l'onglet Préférences, puis cliquez sur Restaurer les paramètres par défaut et actualiser.
Apparence
Cette section liste les options permettant de personnaliser l'apparence des outils de développement.
La mise en page en panneaux
organise les volets dans des panneaux.
Affecte les onglets Éléments > Styles et les onglets associés, ainsi que le volet Sources > Débogueur. Avec l'option auto, la mise en page dépend de la largeur des outils de développement.
Language (Langue)
définit les paramètres régionaux de l'interface utilisateur des outils pour les développeurs.
Pour appliquer ce paramètre, actualisez les Outils de développement.
Activer le raccourci Ctrl/Cmd+0-9 pour changer de panneau vous permet d'ouvrir les panneaux à l'aide du clavier.
Cette vidéo explique comment passer d'un onglet à l'autre à l'aide des raccourcis clavier correspondants.
Sources
Cette section liste les options permettant de personnaliser le panneau Sources.
Rechercher dans les scripts anonymes et de contenu vous permet de rechercher dans tous les fichiers JavaScript chargés, y compris ceux des extensions Chrome, à l'aide de l'onglet Rechercher.
Cette vidéo montre comment rechercher du texte dans le fichier source d'une extension.
L'option Afficher automatiquement les fichiers dans la barre latérale sélectionne les fichiers dans le volet Sources > Page lorsque vous passez d'un onglet à l'autre dans l'Éditeur.
Cette vidéo montre comment, lorsque cette option est activée, le panneau Sources sélectionne les fichiers dans l'arborescence de navigation lorsque vous passez d'un onglet à l'autre.
Activer Tabulation pour déplacer le curseur permet à la touche
Tabulation de déplacer le focus dans DevTools au lieu d'insérer un caractère de tabulation dans l'éditeur.
Vous devez actualiser les outils de développement.
Cette vidéo montre d'abord les caractères de tabulation insérés avec la touche Tab. Lorsque vous activez cette option et actualisez les outils de développement, la touche Tabulation déplace le focus.
Détecter l'indentation définit l'indentation sur celle du fichier source ouvert dans l'Éditeur.
Vous devez actualiser les outils de développement.
Cette vidéo montre d’abord le retrait par défaut de huit espaces. Lorsque vous activez cette option, elle remplace l'indentation par défaut par celle du fichier source.
La saisie semi-automatique active les suggestions pratiques dans l'éditeur.
Cette vidéo ne présente aucune suggestion. Ensuite, lorsque vous activez cette option, l'Éditeur affiche des suggestions pour exécuter des commandes.
La fermeture automatique des crochets ajoute automatiquement une parenthèse fermante ou une balise lorsque vous en saisissez une ouvrante.
Cette vidéo montre comment saisir des crochets d'ouverture avant et après avoir activé la fermeture automatique des crochets.
Le pliage de code vous permet de plier et de déplier des blocs de code entre accolades dans l'éditeur.
Vous devez actualiser les outils de développement.
Cette vidéo montre comment plier des blocs de code lorsque vous activez cette option.
Afficher les espaces blancs
affiche les espaces blancs dans l'Éditeur.
Vous devez actualiser les outils de développement. Les options sont les suivantes:
- All désigne tous les espaces blancs par des points (
...
). De plus, Editor (Éditeur) indique la tabulation comme une ligne (—
). - Le paramètre Tracé met en surbrillance les espaces blancs en rouge clair à la fin des lignes.
Ouvrir le panneau "Sources" au déclenchement d'un point d'arrêt ouvre Sources > Éditeur à la ligne contenant le point d'arrêt qui a mis l'exécution en pause.
Cette vidéo montre d'abord le panneau Sources qui n'est pas au premier plan lorsqu'il est mis en pause au niveau d'un point d'arrêt. Ensuite, lorsque vous activez cette option, les outils de développement ouvrent l'éditeur dans le panneau Sources et affichent la ligne de code avec le point d'arrêt.
L'impression élégante des sources minimisées rend ces sources lisibles.
En cas d'impression élégante, l'éditeur peut afficher une longue ligne de code sur plusieurs lignes, précédée de -
pour indiquer qu'il s'agit d'une continuation de ligne.
![Code mis en forme dans le panneau "Sources".](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/pretty-print.png?hl=fr)
L'option Autoriser le défilement au-delà de la fin du fichier vous permet de faire défiler l'écran plus loin que la dernière ligne dans l'Éditeur.
Cette vidéo vous montre comment faire défiler la page au-delà de la fin du fichier lorsque vous activez cette option.
Autorisez les outils de développement à charger des ressources, telles que des mappages sources, à partir de chemins d'accès aux fichiers distants. Désactivé par défaut pour des raisons de sécurité.
Si cette option est désactivée, les outils de développement consignent dans la console des messages semblables à ceux-ci:
![Message dans la console indiquant que le chargement à partir d'un chemin d'accès à un fichier distant est interdit pour des raisons de sécurité.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/a-message-the-console-in-052f2c13b3dc.png?hl=fr)
Retrait par défaut
permet de choisir le nombre d'espaces que la touche de tabulation
insère dans l'Éditeur.
Cet exemple montre comment définir le retrait par défaut sur huit espaces d'abord, puis sur un caractère de tabulation.
Éléments
Cette section répertorie les options permettant de personnaliser le panneau Éléments.
Afficher le nœud DOM lorsque vous pointez dessus sélectionne le nœud correspondant dans l'arborescence DOM lorsque vous pointez sur un élément dans le viewport en mode d'inspection
.
Cette vidéo montre d'abord que les nœuds DOM ne sont pas sélectionnés dans l'arborescence DOM. Lorsque vous activez cette option, le panneau Éléments sélectionne les nœuds lorsque vous pointez dessus.
L'option Afficher l'info-bulle de la documentation CSS affiche une info-bulle avec une brève description lorsque vous pointez sur une propriété dans le volet Styles.
Le lien En savoir plus vous permet d'accéder à la documentation de référence CSS MDN sur la propriété.
![Info-bulle contenant de la documentation sur une propriété CSS.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-tooltip-documentatio-7c33fb7ae9d4e.png?hl=fr)
Réseau
Cette section liste les options permettant de personnaliser le panneau Network (Réseau). La plupart des options sont identiques à celles des paramètres du panneau.
Conserver le journal correspond à Conserver le journal dans le panneau Network (Réseau). Enregistre les requêtes pour tous les chargements de page.
Cette vidéo montre d'abord le journal des requêtes actualisé lors du rechargement de la page, puis conservé lorsque vous activez cette option.
Enregistrer le journal réseau est identique à
Enregistrer le journal réseau dans le panneau Réseau. Démarre ou arrête l'enregistrement des requêtes dans le journal réseau.
![Bouton "Enregistrer le journal réseau" dans le panneau "Réseau".](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-record-network-log-bu-ae1f7d1e69e3.png?hl=fr)
L'option Activer le blocage des requêtes réseau bloque les requêtes correspondant aux formats indiqués dans le panneau Blocage des requêtes réseau.
Cette vidéo montre d'abord que les demandes ne sont pas bloquées. Une fois cette option activée, un schéma dans le panneau Blocage de requête réseau les bloque.
Désactiver le cache (lorsque les outils de développement sont ouverts) revient à Désactiver le cache dans le panneau Réseau. Désactive le cache du navigateur.
![La case à cocher Désactiver le cache](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-disable-cache-checkbo-f09250026a0aa.png?hl=fr)
L'option Autoriser à générer des fichiers HAR avec des données sensibles ajoute des options au bouton Exporter le fichier HAR. Elle vous permet d'exporter avec ou sans données sensibles (nettoyées).
Les données sensibles correspondent aux données des en-têtes Cookie
, Set-Cookie
et Authorization
.
![Les deux options du bouton "Exporter au format HAR".](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/export-har-button.png?hl=fr)
Regrouper le journal réseau par trame revient à Grouper par trames dans le panneau Réseau. Cette option regroupe les requêtes lancées par des frames intégrés.
![Journal des requêtes réseau avec les requêtes regroupées par frames intégrés.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-network-request-log-8ecfc9e3f8259.png?hl=fr)
Forcer le blocage d'annonces sur ce site bloque les annonces détectées sur la page lorsque les outils pour les développeurs sont ouverts.
![Requête réseau liée à une annonce affichée dans le panneau "Network" (Réseau) avec le filtre "Blocked Requests" (Requêtes bloquées) activé.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/an-ad-related-network-req-3e1c284d89cd5.png?hl=fr)
Performances
Cette section liste les options permettant de personnaliser le panneau Performances.
Action de la molette de la souris pour Flamechart
attribue une action de défilement ou de zoom à la molette de la souris lorsque vous parcourez le graphique de flammes.
Cet exemple montre les actions de défilement et de zoom de la molette de la souris sur un graphique en forme de flamme dans le panneau Performances.
Console
Cette section liste les options permettant de personnaliser la console. La plupart des options sont identiques à celles fournies dans les paramètres de la console.
Masquer les messages réseau permet de masquer les messages réseau dans la console.
Cette vidéo montre comment masquer les messages réseau avec cette option dans Settings (Paramètres) et dans Console Settings (Paramètres de la console).
Avec l'option Contexte sélectionné uniquement, la Console n'affiche les messages que pour le contexte sélectionné: supérieur, iFrame, nœud de calcul ou extension.
Cette vidéo explique comment activer cette option dans Paramètres et Console > Paramètres, puis sélectionner le contexte dans la console.
La fonction Log XMLHttpRequests permet à la Console de consigner des requêtes XHR et d'extraction.
Cette vidéo montre comment activer cette option dans Paramètres et Console > Paramètres, et comment enregistrer les messages
XHR finished loading
dans la Console.
Afficher les codes temporels permet à la console d'afficher les codes temporels à côté des messages.
![Messages avec codes temporels indiqués dans la console](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/messages-timestamps-list-040be725ea68b.png?hl=fr)
Avec la fonctionnalité Saisie semi-automatique à partir de l'historique, la console suggère des commandes que vous avez exécutées précédemment au fur et à mesure de la saisie.
Vous trouverez la même option sous Console > Paramètres.
![Menu déroulant de saisie semi-automatique avec une option de commande de l'historique de la console.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/autocomplete-drop-down-a-6e0a4dc95d8d5.png?hl=fr)
Si vous sélectionnez Accepter la suggestion de saisie semi-automatique lorsque vous appuyez sur Entrée, la Console accepte la suggestion sélectionnée dans le menu déroulant lorsque vous appuyez sur Entrée.
Cette vidéo montre ce qui se passe lorsque vous appuyez sur Entrée avant et après l'activation de cette option.
L'option Regrouper les messages similaires dans la console permet de regrouper les messages similaires dans la console.
Vous trouverez la même option dans Console > Paramètres.
![Messages similaires regroupés dans la console](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/similar-messages-the-con-2026bc985883e.png?hl=fr)
L'option Afficher les erreurs CORS dans la console permet d'afficher les erreurs CORS enregistrées dans la console.
Vous trouverez la même option dans Console > Paramètres.
![La console affiche les erreurs CORS.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/console-shows-cors-errors-57f9bea2680a4.png?hl=fr)
L'évaluation eager permet à la console d'afficher un aperçu du résultat à mesure que vous saisissez une commande.
Vous trouverez la même option dans Console > Paramètres.
Cette vidéo présente différents aperçus de sortie.
Traiter l'évaluation du code comme une action de l'utilisateur transforme toute commande que vous exécutez dans la console en interaction utilisateur.
En d'autres termes, il définit navigator.userActivation.isActive
sur true
lors de l'évaluation. Vous trouverez la même option dans Console > Paramètres.
Cette vidéo montre le résultat de l'évaluation de navigator.userActivation.isActive
avant et après l'activation de cette option.
Conserver le journal lors de la navigation permet à la console de consigner un message Navigated to
à chaque navigation et d'enregistrer les journaux sur toutes les pages.
Vous trouverez la même option dans Console > Paramètres.
![La console affiche les messages "Accédé à" et enregistre les journaux sur différentes pages.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-console-shows-naviga-f4bc36001187f.png?hl=fr)
Extension
Cette section liste les options qui personnalisent la gestion des liens pour les extensions Chrome DevTools.
Persistance
Cette section liste les options qui contrôlent la façon dont DevTools enregistre les modifications que vous apportez.
Activer les remplacements locaux permet aux outils pour les développeurs de conserver les modifications que vous apportez aux sources lors des chargements de page.
Pour en savoir plus, consultez la section Remplacements locaux.
Debugger
Cette section liste les options qui contrôlent le comportement de Debugger.
L'option Désactiver JavaScript vous permet de voir comment votre page Web se présente et se comporte lorsque JavaScript est désactivé.
Actualisez la page pour voir si elle dépend de JavaScript et comment.
Lorsque JavaScript est désactivé, Chrome affiche l'icône correspondante dans la barre d'adresse, et les outils de développement affichent une icône d'avertissement
à côté de Sources.
![Une icône dans la barre d'adresse et une icône d'avertissement à côté de "Sources" dans les outils de développement.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/an-icon-the-address-bar-92ceba2ae707c.png?hl=fr)
L'option Désactiver les traces de la pile asynchrones masque l'intégralité de l'opération asynchrone dans la pile d'appels.
Par défaut, Debugger tente de tracer les opérations asynchrones si le framework que vous utilisez prend en charge ce traçage.
![Opération asynchrone dans la pile d'appels.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-async-operation-the-7d1209cb7afdd.png?hl=fr)
Pour en savoir plus, consultez Afficher les traces de pile asynchrones.
Monde
Cette section liste les options ayant un effet global dans les outils de développement.
Ouvrir automatiquement les outils de développement pour les fenêtres pop-up permet d'ouvrir les outils de développement lorsque vous cliquez sur des liens qui ouvrent de nouveaux onglets. Autrement dit, tous les liens avec target=_blank
.
Cette vidéo montre tout d'abord comment cliquer sur un lien et ouvrir un nouvel onglet *sans* les outils de développement. Ensuite, lorsque vous activez cette option, un nouvel onglet s'ouvre *avec* DevTools.
Avec Recherche en cours de saisie, les outils de développement peuvent accéder directement au premier résultat de recherche à mesure que vous saisissez votre requête. Si cette option est désactivée, les outils de développement n'accèdent au résultat que lorsque vous appuyez sur Entrée.
Cette vidéo montre d'abord comment DevTools "saute" lorsque vous saisissez une requête de recherche. Lorsque vous activez cette option, DevTools vous redirige vers le premier résultat lorsque vous appuyez sur Entrée.
Synchroniser
Cette section vous permet de configurer la synchronisation des paramètres entre les appareils.
L'option Activer la synchronisation des paramètres vous permet de synchroniser les paramètres des outils de développement sur plusieurs appareils.
Pour utiliser ce paramètre, commencez par activer la synchronisation Chrome. Pour en savoir plus, consultez la section Paramètres de synchronisation.