Préférences

Sofia Emelianova
Sofia Emelianova

Configurez l'apparence et le comportement de DevTools et de ses panneaux à l'aide de Paramètres. Settings (Paramètres) > Preferences (Préférences). Cet onglet liste à la fois des options de personnalisation générales et des options spécifiques au panneau.

Pour définir des préférences, ouvrez Paramètres. Paramètres > Préférences, puis faites défiler la page jusqu'à l'une des sections décrites ci-dessous.

Section "Apparence" de l'onglet "Préférences".

Pour connaître 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:

  • Case à cocher. Cases à cocher
  • Listes déroulantes Liste déroulante.
  • Obsolète. (obsolète)

Pour rétablir les préférences par défaut, faites défiler l'onglet Préférences jusqu'en bas, puis cliquez sur Rétablir les valeurs par défaut et actualiser.

Apparence

Cette section liste les options permettant de personnaliser l'apparence des outils de développement.

Thèmes Liste déroulante. définit un thème de couleur pour l'interface utilisateur des outils pour les développeurs.

Thèmes : Modification du thème DevTools de la préférence système au thème sombre, puis au thème clair.
  • Préférence système
  • Clair
  • Sombre

La mise en page en panneaux Liste déroulante. organise les volets dans des panneaux.

Affecte les onglets Éléments > Styles et les onglets associés, ainsi que le volet Sources > Débogueur. L'option auto fait dépendre la mise en page de la largeur des outils de développement.

Disposition des panneaux: Modification de la mise en page du panneau de l'élément de horizontale à verticale.
  • horizontale
  • verticale
  • auto

Language (Langue) Liste déroulante. 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.

Langue : Panneau des paramètres en chinois.
  • Langue de l'UI du navigateur
  • L'une des options de paramètres régionaux, dans cet exemple, le chinois

Case à cocher. Activer le raccourci Ctrl/Cmd + 0-9 pour changer de panneau vous 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.

Case à cocher. Désactiver la superposition d'état suspendu masque la superposition Boutons de lecture et de passer. Suspendu dans le débogueur dans le viewport lorsque l'exécution du code est suspendue.

Case à cocher. Afficher les nouveautés après chaque mise à jour ouvre automatiquement l'onglet du panneau Nouveautés après chaque mise à jour de Chrome.

Onglet "Nouveautés" du panneau de navigation

Sources

Cette section liste les options permettant de personnaliser le panneau Sources.

Case à cocher. 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 un fichier source d'extension.

Case à cocher. Afficher automatiquement les fichiers dans la barre latérale sélectionne les fichiers dans le volet Sources > Page lorsque vous passez d'un onglet à un 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 à un autre.

Case à cocher. 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.

Le panneau "Sources" affiche un lien vers le fichier minimisé dans la barre d'état.

Case à cocher. Activer Tabulation pour déplacer le curseur permet à la touche Touche de tabulation. Tabulation de déplacer le curseur 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 comment insérer des caractères de tabulation à l'aide de la touche Tabulation. Lorsque vous activez cette option et actualisez les outils de développement, la touche Tabulation déplace le focus.

Case à cocher. 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 l'indentation par défaut de huit espaces. Lorsque vous activez cette option, elle remplace l'indentation par défaut par celle du fichier source.

Case à cocher. La saisie semi-automatique permet d'obtenir des suggestions pratiques dans l'Éditeur.

Cette vidéo ne propose aucune suggestion. Lorsque vous activez cette option, l'Éditeur affiche des suggestions pour compléter la commande.

Case à cocher. La fermeture automatique des crochets ajoute automatiquement un crochet ou une balise de fermeture lorsque vous saisissez un crochet ou une balise d'ouverture.

Cette vidéo montre comment saisir des crochets d'ouverture avant et après avoir activé la fermeture automatique des crochets.

Case à cocher. 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.

Accolade sans paire soulignée en rouge.

Case à cocher. La réduction du code vous permet de réduire et de développer des blocs de code entre crochets 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 Liste déroulante. affiche les espaces blancs dans l'Éditeur.

Vous devez actualiser les outils de développement. Les options permettent de:

  • Tout indique que tous les caractères d'espacement sont représentés par des points (...). De plus, l'Éditeur représente le caractère Tabulation par une ligne ().
  • Trailing (Fin) met en surbrillance les espaces blancs à la fin des lignes en rouge clair.
Afficher les espaces blancs: Options sélectionnées : "Tout" et "En fin de ligne".
  • Aucune
  • Toutes (...)
  • En queue

Case à cocher. Afficher les valeurs de variables intégrées lors du débogage affiche les valeurs des variables à côté des instructions d'attribution lorsque l'exécution est mise en pause.

Le débogueur mis en pause pendant l'exécution de la fonction affiche les valeurs des variables à côté des instructions d'attribution.

Case à cocher. 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 hors focus lorsqu'il est mis en pause à un point d'arrêt. Lorsque vous activez cette option, DevTools ouvre l'Éditeur dans le panneau Sources et affiche la ligne de code avec le point d'arrêt.

Case à cocher. Appliquer automatiquement l'impression élégante aux sources minimisées rend ces sources lisibles.

Lorsque l'option Affichage soigné est activée, l'éditeur peut afficher une seule ligne de code longue 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".

Case à cocher. 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.

Le panneau "Sources" affiche les fichiers .scss dans la section "Créé" de l'arborescence de navigation. Le volet "Styles" du panneau "Éléments" affiche des liens vers des sources .scss à côté des règles CSS.

Case à cocher. Autoriser le défilement au-delà de la fin du fichier vous permet de faire défiler la page au-delà de la dernière ligne dans l'Éditeur.

Cette vidéo montre comment faire défiler l'écran au-delà de la fin du fichier lorsque vous activez cette option.

Case à cocher. Autoriser les outils de développement à charger des ressources, comme des cartes 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 laissée désactivée, DevTools enregistre des messages semblables à ceux-ci dans la console:

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é.

Indentation par défaut Liste déroulante. : permet de choisir le nombre d'espaces insérés par la touche Touche de tabulation. Tabulation dans l'Éditeur.

Retrait par défaut: Désactivation des options de forçage et modification de l'indentation par défaut de deux espaces à huit, puis à la touche Tabulation.
  • 2 espaces
  • 4 espaces
  • 8 espaces
  • Caractère de tabulation

Cet exemple montre comment définir l'indentation par défaut sur huit espaces, puis sur un caractère de tabulation.

Éléments

Cette section répertorie les options permettant de personnaliser le panneau Éléments.

Case à cocher. Afficher le Shadow DOM de l'user-agent affiche les nœuds Shadow DOM dans l'arborescence DOM.

Le panneau "Éléments" affiche les nœuds DOM ombragés.

Case à cocher. Le retour à la ligne permet de couper les lignes longues dans l'arborescence DOM et de les placer sur la ligne suivante.

Le panneau "Éléments" divise les lignes longues par mots et les affiche sur la ligne suivante.

Case à cocher. Afficher les commentaires HTML affiche les commentaires HTML dans l'arborescence DOM.

Le panneau "Éléments" affiche les commentaires HTML.

Case à cocher. 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 Inspecter..

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.

Case à cocher. Afficher une info-bulle d'inspection détaillée affiche l'info-bulle dans le viewport en mode d'inspection Inspecter. lorsque vous pointez sur un élément.

Info-bulle détaillée affichée en mode "Inspect" (Inspecter).

Case à cocher. 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.

Règles affichées dans la fenêtre d'affichage.

Case à cocher. Afficher l'info-bulle sur la documentation CSS affiche une info-bulle avec une courte 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 avec la documentation d'une propriété CSS.

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.

Case à cocher. Conserver le journal correspond à Conserver le journal dans le panneau Network (Réseau). Économise les requêtes lors des chargements de page.

Cette vidéo montre d'abord le journal des requêtes actualisé lors de l'actualisation de la page, puis conservé lorsque vous activez cette option.

Case à cocher. Enregistrer le journal réseau est identique à Enregistrez le journal réseau. 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".

Case à cocher. Activer le blocage des requêtes réseau bloque les requêtes qui correspondent aux schémas du panneau Blocage des requêtes réseau.

Cette vidéo montre d'abord que les requêtes 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.

Case à cocher. Désactiver le cache (quand les outils de développement sont ouverts) correspond à Désactiver le cache dans le panneau Network (Réseau). Désactive le cache du navigateur.

Case à cocher "Désactiver le cache".

Case à cocher. Autoriser la génération au format HAR avec des données sensibles ajoute des options au bouton Exporter au format HAR qui vous permettent d'exporter avec ou sans données sensibles (nettoyées).

Les données sensibles sont celles des en-têtes Cookie, Set-Cookie et Authorization.

Les deux options du bouton "Exporter le fichier HAR".

Case à cocher. 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.

Colonne "Cascade" de l'onglet "Réseau" avec et sans codage par couleur.

Case à cocher. Regrouper le journal réseau par frame est identique à Grouper par frames (Regrouper par frames) dans le panneau Network (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.

Case à cocher. 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é.

Performances

Cette section liste les options permettant de personnaliser le panneau Performances.

Action de la molette de la souris pour les graphiques de type "flamme" Liste déroulante. attribue une action de défilement ou de zoom à la molette de la souris lorsque vous parcourez le graphique de type "flamme".

Action de la molette de la souris pour les graphiques de type "flamme" : Modification de l'action de la molette de la souris pour passer du défilement au zoom pour le graphique de flammes.
  • Faire défiler
  • Zoom

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 des paramètres de la console.

Options similaires dans la console et dans les paramètres.

Case à cocher. 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 Paramètres. Settings (Paramètres) et dans Console Settings (Paramètres de la console).

Case à cocher. Contexte sélectionné uniquement permet à la console d'afficher des messages uniquement pour le contexte sélectionné : "top", "iframe", "worker" ou "extension".

Cette vidéo explique comment activer cette option dans Paramètres. Paramètres et Console > Paramètres, puis sélectionner le contexte dans la console.

Case à cocher. Consigner les XMLHttpRequests permet à la console de consigner les requêtes XHR et de récupération.

Cette vidéo montre comment activer cette option dans Paramètres. Settings (Paramètres) et Console > Settings (Console > Paramètres), et comment consigner les messages XHR finished loading dans la console.

Case à cocher. Afficher l'horodatage permet à la console d'afficher des codes temporels à côté des messages.

Messages avec codes temporels indiqués dans la console

Case à cocher. La saisie semi-automatique à partir de l'historique permet à la console de suggérer les commandes que vous avez exécutées précédemment à mesure que vous saisissez du texte.

Vous trouverez la même option sous Console > Paramètres.

Liste déroulante de saisie semi-automatique avec une option de commande de l'historique de la console.

Case à cocher. Accepter la suggestion de saisie semi-automatique lorsque vous appuyez 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 avoir activé cette option.

Case à cocher. Regrouper les messages similaires dans la console permet à la console de regrouper les messages similaires.

Vous trouverez la même option sous Console > Paramètres.

Messages similaires regroupés dans la console

Case à cocher. Afficher les erreurs CORS dans la console permet à la console d'afficher les erreurs CORS enregistrées.

Vous trouverez la même option sous Console > Paramètres.

La console affiche des erreurs CORS.

Case à cocher. L'évaluation anticipée permet à la console d'afficher un aperçu d'une sortie lorsque vous saisissez une commande.

Vous trouverez la même option sous Console > Paramètres.

Cette vidéo présente différents aperçus de sortie.

Case à cocher. 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 sous 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.

Case à cocher. Développer automatiquement les messages console.trace() permet à la console d'afficher les messages console.trace() développés lorsqu'elle les consigne.

Message console.trace() développé dans la console.

Case à cocher. 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 sous Console > Paramètres.

La console affiche les messages "Accédé à" et enregistre les journaux sur différentes pages.

Extension

Cette section liste les options qui personnalisent la gestion des liens pour les extensions Chrome DevTools.

Gestion des liens: Choisir une option pour ouvrir les liens
  • Auto. Ouvre les fichiers dans le panneau Sources par défaut.
  • Option arbitraire pouvant être ajoutée par une extension DevTools.

Persistance

Cette section liste les options qui contrôlent la façon dont DevTools enregistre les modifications que vous apportez.

Case à cocher. Activer les remplacements locaux permet aux outils de développement de conserver les modifications que vous apportez aux sources lors des chargements de page.

Pour en savoir plus, consultez la section Forcer des valeurs locales.

Debugger

Cette section liste les options qui contrôlent le comportement du débogueur.

Case à cocher. Désactiver JavaScript vous permet de voir à quoi ressemble votre page Web et comment elle 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 JavaScript a été désactivé. correspondante dans la barre d'adresse, et DevTools affiche une icône d'avertissement 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.

Case à cocher. Désactiver les traces de pile asynchrones masque l'intégralité de l'opération asynchrone dans la pile d'appels.

Par défaut, le débogueur tente de tracer les opérations asynchrones si le framework que vous utilisez est compatible avec ce traçage.

Opération asynchrone dans la pile d'appels.

Pour en savoir plus, consultez Afficher les traces de pile asynchrones.

Monde

Cette section répertorie les options ayant des effets globaux dans DevTools.

Cette vidéo montre d'abord comment cliquer sur un lien et ouvrir un nouvel onglet *sans* les outils de développement. Lorsque vous activez cette option, un nouvel onglet s'ouvre *avec* les outils de développement.

Case à cocher. Rechercher à mesure que vous saisissez du texte permet à DevTools de passer au premier résultat de recherche lorsque vous saisissez votre requête de recherche. Si cette option est désactivée, DevTools ne vous redirigera vers le résultat que lorsque vous appuierez 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.

Case à cocher. Activer la synchronisation des paramètres vous permet de synchroniser les paramètres DevTools 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.