Personnaliser les Outils de développement

Sofia Emelianova
Sofia Emelianova

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

Paramètres

Paramètres. Paramètres > Préférences contient de nombreuses options permettant de personnaliser les outils de développement.

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

Thème sombre

Vous pouvez l'activer dans Paramètres ou dans le menu Commandes.

Le thème sombre.

  1. Ouvrez le menu de commandes.
  2. Commencez à saisir dark, sélectionnez la commande Passer au thème sombre, puis appuyez sur Entrée pour exécuter la commande.

    Commande du thème sombre.

  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 automatiquement correspondre 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 à l'aide du fond d'écran, puis sélectionnez Modifier les thèmes ou sélectionnez une palette de couleurs.

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

Panneau

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

Appuyez sur Échap pour ouvrir ou fermer le panneau.

Le tiroir

Cliquez sur Plus d'outils. Plus d'outils pour ouvrir d'autres onglets du panneau.

Bouton "Plus d'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:

  • Main Menu (Menu principal) : ouvrez Plus. Customize And Control DevTools (Personnaliser et contrôler les outils de développement), puis cliquez sur :
    • Détachez la station. Détacher dans une fenêtre distincte
    • Épingler à gauche Station d'accueil à gauche
    • Épingler en bas. Station d'accueil en bas
    • Épingler à droite Station d'accueil à droite
  • Menu Commandes:

    1. Ouvrez le menu de commandes.
    2. Commencez à saisir dock et sélectionnez l'une des options suggérées: ancrer en bas, à gauche, à droite, détacher ou restaurer la dernière position d'ancrage.

Option d'ancrage suggérée dans le menu de commandes.

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

  • Sous Linux ou Windows: Ctrl+Maj+D
  • Sous 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 et faites-le glisser vers la gauche ou vers la droite:

  • Panneaux en haut des outils de développement.
  • Volets du panneau Éléments, tels que Styles, Calculés et Mise en page
  • Volets du panneau Sources tels que Page, Espace de travail, Remplacements, etc.
  • Onglets du panneau en bas des outils de développement.

Vous pouvez également déplacer des panneaux et des onglets vers le haut et vers le bas depuis et vers le panneau. 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.

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

Disposition du panneau

Par défaut, les outils de développement réorganisent automatiquement la disposition des panneaux en fonction de la taille de la fenêtre. Vous pouvez désactiver la réorganisation automatique. Accédez à Paramètres > mettez à jour la disposition des panneaux en fonction de vos préférences.

Par exemple, le volet Styles du panneau Éléments se déplacera de bas en bas lorsque la taille de l'écran est petite. Si vous souhaitez que le volet "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. Paramètres > Préférences > Apparence > Langue.

Changez de langue en accédant à Paramètres > Préférences

Paramètres de synchronisation

Vous pouvez synchroniser les paramètres des outils de développement sur plusieurs appareils.

Pour activer la synchronisation, activez d'abord la synchronisation Chrome. Une fois activés, les paramètres des outils de développement sont synchronisés par défaut.

Synchronisation du profil Chrome.

Vous pouvez activer ou désactiver la synchronisation des paramètres des outils de développement séparément en cochant la case Paramètres. Paramètres > Synchronisation > Case à cocher. Activer la synchronisation des paramètres.

Paramètres de synchronisation des outils de développement

Les Outils de développement synchronisent 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 à cocher Activer la synchronisation des paramètres est également synchronisé sur tous 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.

Paramètres d'apparence.

Toutefois, le paramètre borne n'est pas synchronisé, car les développeurs ont des préférences différentes pour la station d'accueil lors du débogage sur différents sites.

La station d'accueil.

Personnaliser les raccourcis clavier

Consultez Paramètres > Raccourcis.

Activer les tests

Accédez à Paramètres > Tests.