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.

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

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

Cette vidéo montre 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.

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.

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

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.

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.

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

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

Vous devez actualiser les outils de développement.

Cette vidéo montre comment plier des blocs de code lorsque vous activez cette option.

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

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.

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

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

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

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.

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

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

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.

Désactiver le cache dans le panneau Network (Réseau). Désactive le cache du navigateur.

Case à cocher "Désactiver le cache".

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.

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" : 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.

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

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.

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.

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.

Debugger

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

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.

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.

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.