Il existe de nombreuses façons d'ouvrir les outils pour les développeurs Chrome. Choisissez votre méthode préférée dans cette référence complète.
Vous pouvez accéder aux outils de développement à l'aide de l'interface utilisateur ou du clavier Chrome :
- À partir des menus déroulants de Chrome.
- À l'aide de 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 pour les développeurs 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 pour les développeurs à partir des menus déroulants de Chrome.
Ouvrir le panneau "Éléments" pour inspecter le DOM ou le CSS
Pour inspecter un élément, effectuez un clic droit sur celui-ci dans une page, puis sélectionnez Inspecter.
Les outils de développement ouvrent le panneau Éléments et sélectionnent l'élément dans l'arborescence DOM. Dans l'onglet Styles, vous pouvez voir les règles CSS appliquées à l'élément sélectionné.
Ouvrir le dernier panneau utilisé à partir du 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 à l'aide de raccourcis : Éléments, Console ou votre dernier panneau
Si vous préférez 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 signifie 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 des éléments d'une page. Vous pouvez également cliquer sur n'importe quel élément pour afficher son code CSS dans l'onglet Éléments > Styles.
Pour obtenir la liste complète des raccourcis des outils pour les développeurs, consultez Raccourcis clavier.
Lorsque les outils de développement sont ouverts, actualiser la page avec ou sans cache
Lorsque les outils de développement sont ouverts, vous pouvez actualiser votre page de trois manières. Dans la barre d'actions principale de la fenêtre Chrome, appuyez de manière prolongée sur le bouton Actualiser , puis choisissez l'une des options suivantes :
Actualisation normale Utilise le cache pour accélérer le temps d'actualisation.
Raccourci : Cmd+R (macOS) ou Ctrl+R (Windows/Linux).
Actualisation forcée Ignore le cache, mais ne le vide pas.
Raccourci : Cmd+Maj+R (macOS) ou Ctrl+Maj+R (Windows/Linux).
Vider le cache et effectuer une actualisation forcée Vide le cache de tous les sites avant l'actualisation.
Ouvrir automatiquement les outils de développement dans chaque nouvel onglet
Exécutez Chrome à partir de la ligne de commande et transmettez l'option --auto-open-devtools-for-tabs :
Quittez toutes les instances Chrome en cours d'exécution.
Exécutez votre application de terminal ou de ligne de commande préférée.
En fonction de votre système d'exploitation, exécutez la commande suivante :
macOS:
open -a "Google Chrome" --args --auto-open-devtools-for-tabsWindows:
start chrome --auto-open-devtools-for-tabsLinux:
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
Ensuite, regardez la vidéo suivante pour découvrir des raccourcis et des paramètres utiles pour une navigation plus rapide dans les outils pour les développeurs.
Pour une expérience d'apprentissage plus pratique, découvrez comment personnaliser les outils pour les développeurs.