Personnaliser les Outils de développement

Sofia Emelianova
Sofia Emelianova

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

Paramètres

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.

Le thème sombre.

  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.

    Commande du thème sombre.

  3. Vous pouvez également définir votre thème dans 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  Personnaliser Chrome en bas à droite.
  2. Dans Apparence, choisissez un thème via Changer de thème ou sélectionnez une palette de couleurs.

Les outils de développement correspondent au thème de couleurs sélectionné dans "Apparence".

Panneau

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

Appuyez sur Échap pour ouvrir ou fermer le panneau.

Panneau

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

Bouton "Autres outils" qui ouvre d'autres onglets du panneau

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 Personnaliser et contrôler les outils de développement, puis cliquez sur :
    • Détacher dans une fenêtre distincte
    • Épingler à gauche
    • Épingler en bas
    • É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.

Option de docking suggérée dans le menu de commande.

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 > 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 disposition des panneaux

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

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

Pour changer de langue, accédez à "Paramètres", puis "Préférences"

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.

Synchronisation du profil Chrome.

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

Paramètres de synchronisation des outils de développement

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.

Paramètres d'apparence.

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.

La station d'accueil.

Personnaliser les raccourcis clavier

Consultez Paramètres > Raccourcis.

Activer les tests

Voir Paramètres > Tests.