Inspecter avec les DevTools

Objectifs

À la fin de cette leçon, vous saurez :

• naviguer dans le DOM avec l'onglet Elements ;
• lire les styles calculés et la cascade appliquée ;
• utiliser le mode responsive et la console.

Ouvrir l'atelier

F12 (ou Ctrl+Shift+I) ouvre les DevTools. C'est l'outil de travail quotidien du développeur web : tout ce qui suit se teste en direct, sans toucher à vos fichiers.

Elements : voir le DOM réel

L'onglet Elements montre l'arbre DOM — pas votre fichier : le DOM après corrections du navigateur et modifications JavaScript. Double-cliquez un texte pour l'éditer sur place ; glissez un nœud pour le déplacer. Rien n'est persistant : un F5 restaure tout. C'est l'endroit idéal pour tester une correction de structure avant de l'écrire.

Clic droit → « Inspect » sur n'importe quel élément de page y saute directement.

Styles : la cascade déroulée

Le panneau Styles, à droite d'Elements :

• liste toutes les règles qui s'appliquent, triées par spécificité décroissante ;
• barre les propriétés écrasées — vous voyez LA cascade en action ;
• affiche le modèle de boîte (margin/border/padding/content) en bas.

Cochez/décochez une case de propriété pour tester son effet immédiatement. Ajoutez une règle temporaire via le +. Quand vous comprenez pourquoi un style « ne prend pas », c'est presque toujours visible ici : battu par plus spécifique ou écrasé plus bas dans la cascade.

Console : le laboratoire JavaScript

document.title
document.querySelector("h1").textContent = "Test"

La console exécute du JS dans le contexte de la page : parfait pour expérimenter avant d'écrire le code dans un fichier — exactement ce que fera le chapitre suivant.

Responsive : tester sans téléphone

L'icône d'appareil (Ctrl+Shift+M) bascule le viewport simulé : testez vos media queries à 360px, 768px, 1280px sans quitter le clavier. C'est aussi ici qu'on repère le meta viewport manquant (la page refuse de rétrécir).

Exercice

1. Inspectez le titre de votre CV : modifiez son texte et sa couleur en direct.
2. Dans Styles, trouvez quelle règle fixe la police du body ; désactivez-la.
3. En console, changez le title puis relisez-le.
4. Passez en mode 360px : listez deux problèmes visuels que vous devrez corriger en CSS.

Résumé

• Elements = DOM vivant éditable ; Styles = cascade expliquée.
• Console = JS interactif sur la vraie page.
• Mode responsive + Performance : les yeux du navigateur mis à disposition.