Ouvrir les outils pour les développeurs Chrome

Il existe plusieurs façons d'ouvrir les Outils pour les développeurs Chrome. Choisissez votre méthode préférée parmi cette documentation de référence complète.

Vous pouvez accéder aux outils de développement à l'aide de l'interface utilisateur de Chrome ou du clavier:

• Dans les menus déroulants de Chrome.
• Grâce à des raccourcis dédiés qui ouvrent Éléments, Console ou le dernier panneau que vous avez utilisé.

Découvrez également comment ouvrir automatiquement les outils de développement pour chaque nouvel onglet.

Ouvrir les outils de développement depuis les menus Chrome

Si vous préférez utiliser l'interface utilisateur, vous pouvez accéder aux outils de développement depuis les menus déroulants de Chrome.

Ouvrir le panneau "Elements" pour inspecter le DOM ou le CSS

Pour cela, effectuez un clic droit sur un élément de la page, puis sélectionnez Inspecter.

Les outils de développement ouvrent le panneau Éléments et sélectionne l'élément dans l'arborescence DOM. Dans le volet Styles, vous pouvez voir les règles CSS appliquées à l'élément sélectionné.

Ouvrir le dernier panneau utilisé depuis le menu principal de Chrome

Pour ouvrir le dernier panneau des outils de développement, cliquez sur le bouton à droite de la barre d'adresse, puis sélectionnez Plus d'outils > Outils pour les développeurs.

Vous pouvez également ouvrir le dernier panneau à l'aide d'un raccourci. Pour en savoir plus, consultez la section suivante.

Ouvrir des panneaux contenant des raccourcis: Éléments, Console ou le dernier panneau

Si vous préférez utiliser le clavier, appuyez sur un raccourci dans Chrome en fonction de votre système d'exploitation:

OS	Éléments	Console	Votre dernier panneau
Windows ou Linux	Ctrl+Maj+C	Ctrl+Maj+J	F12 Ctrl+Maj+I
Mac	Cmd + Option + C	Cmd + Option + J	Fn + F12 Cmd + Option + I

Voici un moyen simple de mémoriser les raccourcis:

• C signifie CSS.
• J pour JavaScript
• I désigne votre choix.

Le raccourci C ouvre le panneau Éléments en mode Inspecteur . Ce mode affiche des info-bulles utiles lorsque vous pointez sur les éléments d'une page. Vous pouvez également cliquer sur n'importe quel élément pour afficher son code CSS dans le volet Éléments > Styles.

Pour obtenir la liste complète des raccourcis des outils de développement, consultez Raccourcis clavier.

Ouvrir automatiquement les outils de développement dans chaque nouvel onglet

Exécutez Chrome à partir de la ligne de commande et transmettez l'indicateur --auto-open-devtools-for-tabs:

1. Quittez toutes les instances Chrome en cours d'exécution.

2. Exécutez le terminal ou l'application de ligne de commande de votre choix.

3. En fonction de votre système d'exploitation, exécutez la commande suivante:

• macOS:

  open -a "Google Chrome" --args --auto-open-devtools-for-tabs
  

• Windows :

  start chrome --auto-open-devtools-for-tabs
  

• Linux :

  google-chrome --auto-open-devtools-for-tabs
  

Les outils de développement s'ouvriront automatiquement dans chaque nouvel onglet jusqu'à ce que vous fermiez Chrome.

Étape suivante

Regardez ensuite la vidéo ci-dessous pour découvrir des raccourcis et des paramètres utiles qui vous permettront de naviguer plus rapidement dans les outils de développement.

Pour un apprentissage plus pratique, découvrez comment personnaliser les outils de développement.