Ouvrir les outils pour les développeurs Chrome

Kayce Basques
Kayce Basques
Jecelyn Yeen
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova

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

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

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

Ouvrir les outils de développement à partir des menus Chrome

Si vous préférez l'interface utilisateur, vous pouvez accéder aux outils de développement à partir des menus déroulants de Chrome.

Ouvrir le panneau "Éléments" pour inspecter le DOM ou le CSS

Pour inspecter, effectuez un clic droit sur un élément d'une page, puis sélectionnez Inspecter.

L'option Inspecter dans un menu déroulant dans Chrome.

Les outils de développement ouvrent le panneau Elements et sélectionnent 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é.

Élément sélectionné dans le panneau "Éléments".

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

Pour ouvrir le dernier panneau "DevTools", cliquez sur le bouton Menu à trois points. à droite de la barre d'adresse, puis sélectionnez More Tools (Plus d'outils) > Outils pour les développeurs.

Option "Outils pour les développeurs" sélectionnée dans le menu à trois points.

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 votre 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 correspond à votre choix.

Le raccourci C ouvre le panneau Éléments en mode Outil d'inspection Inspecter. 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 la section Elements > Volet Styles.

Panneau "Elements" en mode Inspecteur avec une info-bulle

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. Fermez toutes les instances Chrome en cours d'exécution.

  2. Exécutez votre terminal ou votre application de ligne de commande préférée.

  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'ouvrent automatiquement pour chaque nouvel onglet jusqu'à ce que vous fermiez Chrome.

Étape suivante

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

Pour une expérience d'apprentissage plus pratique, découvrez comment personnaliser les outils de développement.