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 pour les développeurs peuvent automatiquement correspondre au thème de couleur 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.

Pour désactiver la thématisation dynamique, effacez settings Settings > Preferences > Appearance > check_box_outline_blank Match Chrome color scheme (Paramètres > Paramètres > Préférences > Apparence > Correspondre au jeu de couleurs Chrome) et actualisez DevTools.

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 le détacher 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: Command+Maj+D

Réorganiser les panneaux, les onglets et les volets

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

• Panneaux en haut des outils pour les développeurs.
• 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 Placer en première position ou Placer en dernière position dans le menu déroulant.

L'ordre des onglets personnalisés est conservé entre les sessions DevTools.

Mise en page du panneau

Par défaut, DevTools réorganise automatiquement la mise en page de vos panneaux 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 passe du côté au 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 mise en page du panneau sur verticale.

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, commencez par activer 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 Espace de travail, Tests et 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 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

Consultez Paramètres > Tests.