Outils de développement Chrome : guide pratique de DevTools

Chrome DevTools est l’ensemble d’outils de développement web intégré à Google Chrome. On l’ouvre avec F12, Ctrl + Maj + I sous Windows et Linux, ou Cmd + Option + I sur Mac. Il permet d’inspecter et de modifier en direct le HTML et le CSS d’une page, d’exécuter du JavaScript, de voir chaque requête réseau, de mesurer les performances, d’émuler des téléphones et d’auditer des pages. Ce guide présente les panneaux les plus utilisés, dans l’ordre où l’on en a besoin, ainsi que les raccourcis les plus rentables.

Ouvrir DevTools et s’y retrouver

En plus des raccourcis clavier, vous pouvez faire un clic droit sur n’importe quel élément et choisir Inspecter : DevTools s’ouvre avec cet élément sélectionné. Le menu de Chrome propose aussi Plus d’outils > Outils de développement.

Trois commandes comptent dès le départ :

• Les onglets des panneaux en haut (Elements, Console, Sources, Network, etc.). Les panneaux moins utilisés se cachent derrière la flèche >>.
• La position du panneau dans le menu à trois points : à droite, en bas, à gauche ou dans une fenêtre séparée. La fenêtre séparée est pratique avec deux écrans.
• Le menu de commandes : Ctrl + Maj + P (Cmd + Maj + P sur Mac). Tapez le nom d’une fonction (« screenshot », « disable JavaScript », « dark mode ») pour la trouver. C’est le moyen le plus rapide de découvrir ce que sait faire DevTools.

Elements : inspecter et modifier le HTML et le CSS

Le panneau Elements affiche le DOM en direct, pas le code source d’origine : il inclut donc tout ce que le JavaScript a ajouté. Sélectionnez un nœud et le volet Styles à droite affiche toutes les règles CSS qui s’appliquent, celle qui l’emporte et celles qui sont barrées.

À essayer :

• Cliquez sur une valeur dans Styles pour la modifier et voir le résultat immédiatement. Les changements disparaissent au rechargement, sauf si vous configurez des local overrides.
• Activez des états comme :hover et :focus avec le bouton :hov pour styliser les états interactifs sans garder la souris immobile.
• Cliquez sur la pastille à côté d’une couleur pour ouvrir le sélecteur, qui indique aussi le ratio de contraste du texte.
• Ouvrez l’onglet Computed pour voir la valeur finale de chaque propriété et le modèle de boîte.
• Repérez les badges flex et grid à côté des éléments : un clic superpose les lignes de mise en page sur la page.

Console : exécuter du JavaScript et lire les erreurs

La Console affiche les erreurs, les avertissements et les sorties console.log de la page, et permet d’exécuter du JavaScript dans son contexte. Quelques aides utiles :

• $0 désigne l’élément sélectionné dans le panneau Elements.
• $$('a') renvoie sous forme de tableau tous les éléments correspondant à un sélecteur.
• copy(obj) copie une valeur dans le presse-papiers.
• Filtrez par niveau (erreurs, avertissements) et par texte pour réduire le bruit.

Sources : déboguer le JavaScript

Le panneau Sources affiche les fichiers de la page ; c’est là que l’on place les points d’arrêt. Cliquez sur un numéro de ligne pour mettre l’exécution en pause, puis avancez pas à pas et inspectez les variables. Les points d’arrêt conditionnels (clic droit sur un numéro de ligne) ne s’arrêtent que si une expression est vraie. Les Event listener breakpoints mettent en pause à chaque clic, frappe de touche ou autre événement, ce qui aide quand on ne sait pas quel code s’exécute.

Network : voir chaque requête

Le panneau Network liste toutes les requêtes de la page : documents, scripts, images, polices et appels d’API, avec leur statut, leur taille et leur durée. Cliquez sur une requête pour voir ses en-têtes, sa charge utile, sa réponse et le détail du temps.

Usages concrets :

• Cochez Disable cache pour toujours charger des fichiers frais tant que DevTools est ouvert.
• Utilisez la liste Throttling pour simuler une connexion mobile lente.
• Filtrez par type (Fetch/XHR, JS, Img) pour trouver la requête qui vous intéresse.
• Faites un clic droit sur une requête et copiez-la en fetch ou en cURL pour la rejouer ailleurs.

Performance : trouver ce qui ralentit une page

Enregistrez un chargement de page ou une interaction : le panneau Performance affiche la chronologie de ce que le navigateur a fait (scripts, rendu, peinture, réseau). Les tâches longues sont signalées en rouge. Le panneau affiche aussi les Core Web Vitals en direct (LCP, CLS et INP) pour vos propres interactions, ainsi que des pistes sur les causes probables. Pour des résultats proches d’un mobile, réglez le ralentissement CPU sur 4x ou 6x avant d’enregistrer. Plus de détails dans le guide du test de vitesse mobile.

Application : stockage, cookies et service workers

Le panneau Application montre ce que la page stocke : cookies, local et session storage, IndexedDB, cache storage et service workers enregistrés. Vous pouvez modifier ou supprimer des entrées, ce qui est le moyen le plus rapide de réinitialiser une connexion ou de tester une première visite. Clear site data efface tout pour l’origine courante.

Lighthouse : auditer une page

Le panneau Lighthouse lance des audits automatiques de performance, d’accessibilité, de bonnes pratiques et de SEO, en mode mobile ou ordinateur. Marche à suivre : comment lancer un audit Lighthouse mobile.

Mode appareil : émuler téléphones et tablettes

La barre d’appareils (Ctrl + Maj + M ou Cmd + Maj + M, DevTools ayant le focus) affiche la page comme sur un téléphone ou une tablette, avec le viewport, la densité de pixels, le user agent et les événements tactiles correspondants. Tout est détaillé dans le guide de l’émulateur mobile Chrome. Pour des vérifications visuelles rapides sans ouvrir DevTools, Mobile View Extension offre le même type d’aperçu depuis un bouton de la barre d’outils.

Les raccourcis à retenir

Étendre DevTools

Des extensions Chrome peuvent ajouter leurs propres panneaux à DevTools : devtools pour React, Vue, Angular et Redux, ou vérificateurs d’accessibilité comme axe DevTools. Une courte sélection se trouve dans extensions Chrome pour développeur web.

Questions fréquentes

Comment ouvrir les outils de développement dans Chrome ?

Appuyez sur F12 ou Ctrl + Maj + I sous Windows et Linux, sur Cmd + Option + I sur Mac, ou faites un clic droit sur la page et choisissez Inspecter.

Peut-on modifier un site avec Chrome DevTools ?

Vous pouvez modifier le HTML et le CSS de la page dans votre propre navigateur pour tester des changements. Ces modifications sont locales et disparaissent au rechargement ; elles ne changent pas le vrai site.

Chrome DevTools est-il gratuit ?

Oui. DevTools fait partie de Chrome et de tous les navigateurs basés sur Chromium, comme Edge, Brave et Opera, sans téléchargement supplémentaire.