Personnaliser les Outils de développement

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

Cette page liste les différentes façons de personnaliser les outils pour les développeurs Chrome.

Paramètres

settings Settings > Preferences (Paramètres > Préférences) contient de nombreuses options permettant de personnaliser DevTools.

Consultez les sections Ouvrir les paramètres et Préférences.

Thème sombre

Vous pouvez activer le thème sombre dans Paramètres ou dans le menu de commande.

1. Ouvrez le menu Command (Commande).

2. Commencez à saisir dark, sélectionnez la commande Passer au thème sombre, puis appuyez sur Entrée pour l'exécuter.

   

3. Vous pouvez également définir votre thème dans Paramètres Paramètres > Préférences > Apparence > Thèmes :

Thème dynamique

Les outils de développement peuvent correspondre automatiquement au thème de couleurs de Chrome.

Pour définir un thème :

1. Ouvrez un nouvel onglet, puis cliquez sur Modifier Personnaliser Chrome en bas à droite.
2. Dans Apparence, choisissez un thème via Fond d'écran Changer de thème ou sélectionnez une palette de couleurs.

Panneau

Le volet contient de nombreuses fonctionnalités cachées.

Appuyez sur Échap pour ouvrir ou fermer le panneau.

Cliquez sur more_vert Autres outils pour ouvrir d'autres onglets du volet.

Modifier l'emplacement des outils de développement

Par défaut, les outils de développement sont ancrés à droite de votre fenêtre d'affichage. Vous pouvez également l'ancrer en bas ou à gauche, ou détacher les Outils de développement dans une fenêtre distincte.

Vous pouvez modifier l'emplacement des outils de développement de deux manières:

• Menu principal : ouvrez more_vert Personnaliser et contrôler les outils de développement, puis cliquez sur :
  • ad_group Détacher dans une fenêtre distincte
  • dock_to_right Épingler à gauche
  • dock_to_bottom Épingler en bas
  • dock_to_left Épingler à droite

• Menu de commande :

  1. Ouvrez le menu Command (Commande).
  2. Commencez à saisir dock, puis sélectionnez l'une des options suggérées : ancrer en bas, à gauche, à droite, enlever l'ancrage ou restaurer la dernière position d'ancrage.

Pour activer ou désactiver l'option Restaurer la dernière position d'épinglage à l'aide d'un raccourci clavier, appuyez sur :

• Sous Linux ou Windows : Ctrl+Maj+D
• Sur macOS : Cmd+Maj+D

Réorganiser les panneaux, les onglets et les volets

Pour modifier l'ordre, cliquez sur l'un des éléments suivants, puis faites-le glisser vers la gauche ou la droite:

• Panneaux en haut des outils de développement
• Volets du panneau Éléments, tels que Styles, Compilé, Mise en page, etc.
• Volets du panneau Sources, tels que Page, Workspace, Remplacements, etc.
• Onglets du volet en bas des outils pour les développeurs.

Vous pouvez également déplacer les panneaux et les onglets vers le haut et vers le bas, entre le volet et l'écran. Pour ce faire, effectuez un clic droit sur le panneau ou l'onglet, puis sélectionnez Déplacer vers le haut ou Déplacer vers le bas dans le menu déroulant.

L'ordre de tabulation personnalisé persiste entre les sessions des outils de développement.

Disposition des panneaux

Par défaut, les outils de développement réorganisent automatiquement la disposition de votre panneau en fonction de la taille de la fenêtre. Vous pouvez désactiver le réarrangement automatique. Accédez à Paramètres Paramètres > Préférences > Apparence et modifiez la mise en page du panneau selon vos préférences.

Par exemple, le volet Styles du panneau Éléments se déplacera du côté vers le bas lorsque la taille de l'écran est petite. Si vous souhaitez que le volet de style reste toujours sur le côté, définissez la disposition du panneau sur vertical.

Modifier la langue de l'interface utilisateur des outils de développement

Consultez Paramètres Paramètres > Préférences > Apparence > Langue.

Paramètres de synchronisation

Vous pouvez synchroniser vos paramètres DevTools sur plusieurs appareils.

Pour activer la synchronisation, activez d'abord la synchronisation Chrome. Une fois activés, vos paramètres DevTools sont synchronisés par défaut.

Vous pouvez activer ou désactiver la synchronisation des paramètres DevTools séparément à l'aide de la case settings Settings > Sync > check_box Enable settings sync (Paramètres > Synchroniser > Activer la synchronisation des paramètres).

DevTools synchronise la plupart des paramètres, à l'exception de ceux des onglets Workspace (Espace de travail), Experiments (Expérimentations) et Devices (Appareils), ainsi que de quelques autres paramètres généraux. L'état de la case Activer la synchronisation des paramètres est également synchronisé entre les appareils.

Par exemple, les paramètres Apparence suivants sont synchronisés. Vous bénéficiez ainsi d'une expérience cohérente sur tous les appareils et vous n'avez pas besoin de redéfinir les mêmes paramètres.

Toutefois, le paramètre Dock n'est pas synchronisé, car les développeurs ont des préférences différentes pour le dock lorsqu'ils déboguent des applications sur différents sites.

Personnaliser les raccourcis clavier

Consultez Paramètres > Raccourcis.

Activer les tests

Voir Paramètres > Tests.