Configurez l'apparence et le comportement des outils de développement et de ses panneaux en accédant à 
Paramètres > Préférences. Cet onglet répertorie les options de personnalisation générales et spécifiques au panneau.
Pour définir vos préférences, accédez à Paramètres > Préférences 
, puis faites défiler l'écran jusqu'à l'une des sections décrites ci-dessous.
Pour en savoir plus sur la fonction de chaque paramètre, recherchez le nom du paramètre sur cette page et développez sa description.
Cette référence indique différents paramètres avec les icônes suivantes:
cases à cocher- Listes déroulantes
(obsolète)
Pour rétablir les préférences par défaut, faites défiler la page jusqu'au bas 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 (Thèmes) 
définit une palette de couleurs pour l'interface utilisateur des outils de développement.
Disposition des panneaux 
organise les volets dans les panneaux.
Affecte les onglets Éléments > Styles et 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.
Format de couleur 
définit le format des valeurs de couleur CSS dans Éléments > Styles.
Les outils de développement convertit automatiquement toute valeur de couleur valide dans le format choisi.
La langue 
définit les paramètres régionaux de l'interface utilisateur des outils de développement.
Pour appliquer ce paramètre, actualisez les outils de développement.
Activer le raccourci Ctrl/Cmd+0-9 pour changer de panneau permet d'ouvrir des panneaux à l'aide du clavier.
Cette vidéo montre comment passer d'un onglet à l'autre à l'aide des raccourcis clavier correspondants.
Désactiver la superposition d'état mis en veille masque la superposition Mise en veille dans le débogueur 
dans la fenêtre d'affichage lorsque l'exécution du code est suspendue.
L'option 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 répertorie les options permettant de personnaliser le panneau Sources.
L'option Rechercher dans les scripts de contenu et dans les scripts anonymes vous permet d'effectuer une recherche dans tous les fichiers JavaScript chargés, y compris dans les extensions Chrome, à l'aide de l'onglet Rechercher.
Cette vidéo montre comment rechercher du texte dans un fichier source d'extension.
L'option Afficher automatiquement les fichiers dans la barre latérale permet de sélectionner des 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 des fichiers dans l'arborescence de navigation lorsque vous passez d'un onglet à l'autre.
L'option Activer les cartes sources JavaScript permet aux outils de développement de trouver les sources des fichiers JavaScript générés ou dont la taille a été réduite.
Activer le déplacement de la touche de tabulation permet de déplacer le curseur de la touche 
Tabulation dans les outils de développement 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 de tabulation. Ensuite, lorsque vous activez cette option et actualisez les outils de développement, la touche Tabulation déplace le curseur.
Détecter les retraits définit le retrait sur celui 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, le retrait par défaut est remplacé par celui du fichier source.
La saisie semi-automatique permet d'obtenir des suggestions pratiques dans l'Éditeur.
Cette vidéo ne montre d'abord aucune suggestion. Lorsque vous activez cette option, l'éditeur affiche des suggestions pour l'exécution des commandes.
La correspondance entre 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 les 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 permettent d'effectuer les opérations suivantes:
- Tout indique tous les espaces blancs sous forme de points (
...). De plus, Éditeur indique le caractère Tabulation sous forme de ligne (—). - L'option Fin de ligne met en surbrillance les espaces blancs en fin de ligne en rouge clair.
L'option Afficher les valeurs de variable intégrées lors du débogage vous montre les valeurs de variable à côté des instructions d'attribution lorsque l'exécution est suspendue.
Le panneau "Focus Sources" (Sources de sélection) lors du déclenchement d'un point d'arrêt ouvre Sources > Editor (Sources > Éditeur) au niveau de la ligne contenant le point d'arrêt qui a mis en pause l'exécution.
Cette vidéo montre d'abord que le panneau Sources est flou 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'option Activer les mappages de sources CSS permet aux outils de développement de trouver les sources des fichiers CSS générés (.scss, par exemple) et de les afficher.
L'option Autoriser le défilement au-delà de la fin du fichier vous permet de faire défiler la page 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 les mappages sources à partir de chemins d'accès aux fichiers distants. Désactivé par défaut pour des raisons de sécurité.
Si cette règle est désactivée, les outils de développement consignent dans la console des messages semblables à ce qui suit:
Retrait par défaut 
vous permet de choisir le nombre d'espaces que la touche 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.
L'option Show user-agent Shadow DOM (Afficher le user-agent Shadow DOM) affiche les nœuds Shadow DOM dans l'arborescence DOM.
La fonctionnalité de retour à la ligne 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.
L'option Afficher le nœud DOM lors du survol sélectionne le nœud correspondant dans l'arborescence DOM lorsque vous passez la souris sur un élément dans la fenêtre d'affichage 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. Ensuite, lorsque vous activez cette option, le panneau Éléments sélectionne les nœuds lorsque l'utilisateur pointe dessus.
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.
L'option Afficher les règles lors du survol permet d'afficher les règles dans la fenêtre d'affichage lorsque vous passez la souris sur les é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 à une référence CSS sur le MN sur la propriété.
Réseau
Cette section répertorie les options permettant de personnaliser le panneau Network. La plupart des options sont les mêmes que dans les paramètres du panneau.
L'option Conserver le journal est identique à Conserver le journal du panneau Réseau. Enregistre les requêtes lors des chargements de page.
Cette vidéo montre d'abord que le journal des requêtes est actualisé lors de l'actualisation de la page, puis conservé lorsque vous activez cette option.
Enregistrer un journal réseau est identique à 
Enregistrer un 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 qui correspondent aux formats du panneau Blocage des requêtes réseau.
Cette vidéo montre d'abord que les requêtes ne sont pas bloquées. Ensuite, une fois cette option activée, elles sont bloquées par un schéma dans le panneau Blocage des requêtes réseau.
L'option Désactiver le cache (lorsque les Outils de développement est ouvert) équivaut à Désactiver le cache dans le panneau Réseau. Désactive le cache du navigateur.
Dans la colonne Waterfall (Cascade d'annonces) du journal réseau, les types de ressources par code couleur mettent en évidence les requêtes dans différentes couleurs en fonction de leur type.
L'option Regrouper le journal du réseau par frame est identique à 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 des annonces sur ce site permet de bloquer les annonces détectées sur la page tant que les outils de développement sont ouverts.
Performances
Cette section présente les options permettant de personnaliser le panneau Performances.
Action de la molette de la souris pour les graphiques de type "flamme" 
attribue une action de défilement ou de zoom à la molette de la souris lorsque vous parcourez le graphique de type "flamme".
Cet exemple illustre les actions de défilement et de zoom à l'aide de la molette de la souris sur un graphique de type "flamme" dans le panneau Performance.
Console
Cette section répertorie les options permettant de personnaliser la console. La plupart des options sont les mêmes que dans Paramètres de la console.
L'option Masquer les messages réseau permet de masquer les messages du réseau dans la console.
Cette vidéo montre comment masquer les messages réseau avec cette option dans les Paramètres 
et dans les Paramètres de la console
Contexte sélectionné uniquement : la console n'affiche des messages que pour le contexte sélectionné : haut, iFrame, nœud de calcul ou extension.
Cette vidéo montre comment activer cette option dans Paramètres 
et dans Console > Paramètres, et comment sélectionner le contexte dans la Console.
La fonction Log XMLHttpRequests effectue les requêtes XHR et de récupération des journaux de la Console.
Cette vidéo montre comment activer cette option dans Paramètres 
et dans Console > Paramètres, et comment consigner les messages XHR finished loading dans la console.
L'option Afficher les codes temporels permet d'afficher les codes temporels à côté des messages dans la console.
Avec la fonctionnalité Saisie semi-automatique à partir de l'historique, la console vous suggère les commandes que vous avez exécutées précédemment à mesure que vous saisissez du texte.
Vous trouverez la même option dans Console > Paramètres.
Accepter la suggestion de saisie semi-automatique sur Entrée permet à la console d'accepter la suggestion sélectionnée dans le menu déroulant de saisie semi-automatique 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 à la Console de regrouper les messages similaires.
Vous trouverez la même option dans Console > Paramètres.
L'option Afficher les erreurs CORS dans la console permet à la console d'afficher les erreurs CORS qu'elle a enregistrées.
Vous trouverez la même option dans Console > Paramètres.
Avec l'évaluation rapide, la Console affiche 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.
Considérez l'évaluation du code comme une action de l'utilisateur transforme toute commande exécutée dans la console en une interaction de l'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.
L'option Développer automatiquement les messages console.trace() permet à la console d'afficher les messages console.trace() développés lorsqu'elle les consigne.
Avec l'option Préserver le journal lors de la navigation, la Console consigne un message Navigated to à chaque navigation et enregistre les journaux sur toutes les pages.
Vous trouverez la même option dans Console > Paramètres.
Extension
Cette section répertorie les options permettant de personnaliser la gestion des liens pour les extensions des outils pour les développeurs Chrome.
Gestion des liens 
définit une option pour 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 permettant de contrôler la façon dont les outils de développement enregistrent les modifications que vous apportez.
L'option Activer les remplacements locaux permet aux outils de développement de conserver les modifications apportées aux sources lors des chargements de pages.
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 vérifier l'apparence et le comportement de votre page Web lorsque JavaScript est désactivé.
Actualisez la page pour voir si elle dépend de JavaScript lors du chargement, et dans quelle mesure.
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 pile asynchrones masque l'histoire complète de l'opération asynchrone dans la pile d'appel.
Par défaut, Debugger tente de suivre les opérations asynchrones si le framework que vous utilisez est compatible avec ce type de traçage.
Pour en savoir plus, consultez Afficher les traces de pile asynchrones.
Globaux
Cette section liste les options qui s'appliquent de façon globale dans les outils de développement.
L'option Ouvrir automatiquement les outils de développement pour les pop-ups ouvre les outils de développement lorsque vous cliquez sur des liens permettant d'ouvrir de nouveaux onglets. Autrement dit, tous les liens avec target=_blank.
Cette vidéo montre d'abord comment cliquer sur un lien et ouvrir un nouvel onglet sans outils de développement. Lorsque vous activez cette option, un nouvel onglet contenant les outils de développement s'ouvre.
Avec la fonctionnalité Rechercher en cours de saisie, les outils de développement "accèdent" 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 ne vous permettent d'accéder au résultat que lorsque vous appuyez sur Entrée.
Cette vidéo montre d'abord comment les outils de développement se "sauter" à mesure que vous saisissez une requête de recherche. Ensuite, lorsque vous activez cette option, les outils de développement affichent 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 Paramètres de synchronisation.