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 répertorie les options de personnalisation générales et spécifiques aux panneaux.

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

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

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.

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

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.

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

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.

Cette vidéo ne présente aucune suggestion. Ensuite, lorsque vous activez cette option, l'Éditeur affiche des suggestions pour exécuter des commandes.

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 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.
Afficher les espaces blancs: Options sélectionnées : "Tout" et "En fin de ligne".
  • Aucun
  • Toutes (...)
  • En queue

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.

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".
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 vous montre comment faire défiler la page au-delà de la fin du fichier lorsque vous activez cette option.

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é.
Retrait par défaut: Désactivation des options de remplacement et modification du retrait par défaut de deux espaces à huit, puis de la touche Tab.
  • 2 espaces
  • 4 espaces
  • 8 espaces
  • Caractère de tabulation

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.

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

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.

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 en forme de flamme.
  • 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 fournies dans les 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. Paramètres et Console > Paramètres, et comment enregistrer 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 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.

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 via une extension des outils de développement.

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

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 les outils de développement affichent 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, 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.

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.

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.

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.