Ouvrir Chrome DevTools

Par Kayce Basques

Rédacteur technique, Chrome DevTools & Phare

Il existe plusieurs façons d’ouvrir Chrome DevTools, car différents utilisateurs veulent un accès rapide à différentes parties de l’interface utilisateur DevTools.

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

Lorsque vous voulez inspecter les styles ou les attributs d’un nœud DOM, cliquez avec le bouton droit de la souris sur l’élément et sélectionnez Inspecter.

Ou appuyez sur Command+Option+C (Mac) ouControl+Shift+C (Windows, Linux, Chrome OS).

Voir Démarrer avec l’affichage et la modification des CSS.

Ouvrir le panneau Console pour afficher les messages enregistrés ou exécuter JavaScript

Appuyez sur Command+Option+J(Mac) ou Control+Shift+J (Windows, Linux, Chrome OS) pour sauter directement dans le panneau Console.

Voir Démarrer avec la console.

Ouvrir le dernier panneau que vous aviez ouvert

Appuyer sur Command+Option+I (Mac) ouControl+Shift+I.

Ouvrir DevTools dans le menu principal de Chrome

Cliquez sur Personnaliser et contrôler Google Chrome puis sélectionnez Plus d’outils > Developer Tools.

Figure 2. Ouverture de DevTools depuis le menu principal de Chrome

Ouvrir automatiquement DevTools à chaque nouvel onglet

Ouvrir Chrome depuis la ligne de commande et passer le drapeau --auto-open-devtools-for-tabs.

Mac:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs

Feedback

Cette page vous a-t-elle été utile ?

Oui

Quel a été le meilleur aspect de cette page ?

Elle m’a aidé à atteindre mon ou mes objectifs

Merci pour vos commentaires. Si vous avez des idées spécifiques sur la façon d’améliorer cette page, veuillez créer un problème.

Il contenait les informations dont j’avais besoin

Merci pour les commentaires. Si vous avez des idées spécifiques sur la façon d’améliorer cette page, veuillez créer un problème.

Il contenait des informations précises