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.
Themes 
définit un thème de couleurs pour l'interface utilisateur 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.
Désactiver la superposition de l'état mis en pause masque la superposition En pause dans le débogueur 
dans la fenêtre d'affichage lorsque l'exécution du code est suspendue.
Afficher les nouveautés après chaque mise à jour ouvre automatiquement l'onglet du panneau Nouveautés après chaque mise à jour de Chrome.
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 les cartes sources JavaScript permet aux outils de développement de trouver les sources des fichiers JavaScript générés ou minifiés.
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.
La mise en correspondance des crochets souligne et met en surbrillance en rouge clair dans l'Éditeur un crochet, une accolade ou une parenthèse sans paire.
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.
L'option Afficher les valeurs de variables intégrées pendant le débogage affiche les valeurs des variables à côté des instructions d'attribution lorsque l'exécution est suspendue.
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.
Activer les cartes sources CSS permet à DevTools de trouver les sources des fichiers CSS générés, par exemple .scss, et de vous les afficher.
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:
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 Shadow DOM de l'user-agent affiche les nœuds Shadow DOM dans l'arborescence DOM.
Le renvoi à la ligne automatique permet de couper les longues lignes dans l'arborescence DOM et de les renvoyer à la ligne suivante.
L'option Afficher les commentaires HTML permet d'afficher les commentaires HTML dans l'arborescence DOM.
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 d'inspection détaillée affiche l'info-bulle dans la fenêtre d'affichage en mode d'inspection 
lorsque vous pointez sur un élément.
Afficher les règles au passage du pointeur affiche les règles dans la fenêtre d'affichage lorsque vous pointez sur des éléments de l'arborescence DOM.
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é.
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.
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.
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.
Attribuer un code couleur aux types de ressources met en évidence les requêtes de différentes couleurs selon leur type dans la colonne Cascade du journal réseau.
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.
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.
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.
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.
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.
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.
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.
Développer automatiquement les messages console.trace() permet d'afficher les messages console.trace() développés dans la console lorsqu'elle les consigne.
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.
Extension
Cette section liste les options qui personnalisent la gestion des liens pour les extensions Chrome DevTools.
Gestion des liens 
définit une option permettant d'ouvrir les fichiers lorsque vous cliquez sur un lien vers un fichier source, par exemple dans le volet Éléments > Styles.
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.
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.
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.