Inspecter avec les DevTools

Objectifs

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

• naviguer dans le DOM réel avec l'onglet Elements et l'éditer à chaud ;
• lire les styles calculés, la cascade appliquée et le box model ;
• expérimenter du JavaScript en console sur la vraie page ;
• tester le responsive et mesurer les performances.

🔗 Pour vous rafraîchir la mémoire : du HTML aux pixels

Ouvrir l'atelier

F12 (ou Ctrl+Shift+I) ouvre les DevTools. C'est l'atelier quotidien du développeur web : tout ce qui suit se teste en direct sur la page réelle, sans toucher à vos fichiers. Installez-vous sur votre CV du chapitre 13 — chaque panneau sera illustré dessus.

Elements : voir le DOM réel — pas votre fichier

L'onglet Elements montre l'arbre DOM tel que construit par le navigateur : après corrections de parsing ET modifications JavaScript. La distinction vue hier est ici tangible : si votre HTML contenait une balise mal fermée, c'est la version RÉPARÉE que vous voyez.

Trois gestes quotidiens :

• clic droit → Inspect sur n'importe quel élément visible : y saute directement (le réflexe n°1) ;
• double-clic sur un texte ou un attribut : édition sur place ;
• glisser-déposer d'un nœud pour le déplacer.

Tout est éphémère : F5 restaure tout. C'est précisément ce qui en fait un laboratoire idéal — testez une correction de structure AVANT de l'écrire dans vos fichiers.

Styles : la cascade déroulée sous vos yeux

Le panneau Styles, à droite d'Elements, est l'outil pédagogique ultime du CSS :

• liste toutes les règles qui visent l'élément sélectionné, du plus spécifique au plus général ;
• barre les propriétés écrasées — vous voyez littéralement la cascade arbitrer (souvenez-vous des règles barrées de la leçon 14-01) ;
• affiche en bas le diagramme de box model avec les valeurs réelles de chaque côté ;
• coche/décoche chaque propriété pour tester son effet immédiatement ;
• permet d'ajouter une règle temporaire via le bouton +.

Quand « mon style ne prend pas », la réponse est presque toujours VISIBLE ici : battu par une règle plus spécifique (barrée), écrasée plus bas dans la cascade, ou tout simplement absente (sélecteur mal orthographié → cherchez-le dans la liste ; s'il n'y est pas, votre sélecteur ne matche rien).

Console : le laboratoire JavaScript

document.title
// 'CV — Paul Exemple'
document.querySelector("h1").textContent = "Test en direct"

La console exécute du JavaScript DANS le contexte de la page : le second exemple vient réellement de changer le titre affiché. C'est exactement le terrain de jeu du chapitre suivant — testez chaque idée en console avant de l'écrire dans vos fichiers, comme au REPL Node.

Deux réflexes utiles dès maintenant :

document.querySelectorAll("li")     // liste tous les éléments li
console.log("coucou")               // ...affiché dans cette même console

Responsive et Performance : les autres panneaux

Mode responsive (Ctrl+Shift+M) : viewport simulé réglable au pixel, presets d'appareils. Testez 360px / 768px / 1280px sans quitter le clavier — et repérez le meta viewport manquant (la page refuse de rétrécir).

Performance (onglet du même nom) : enregistrez pendant un rechargement pour voir la chaîne de rendu de la leçon précédente en action — blocs Layout violets, Paint verts. Sur votre CV, tout tient en quelques millisecondes ; l'habitude de lecture se prend sur les pages simples.

Le workflow professionnel

1. OBSERVER   dans DevTools (c'est le DOM réel, pas vos fichiers)
2. EXPÉRIMENTER à chaud : styles, structure, JS
3. REPRODUIRE le changement gagnant DANS vos fichiers
4. VERSIONNER via Git

Le sens compte : DevTools vers les fichiers, jamais l'inverse. Tout ce que vous faites dans DevTools disparaît au rechargement — corriger « dans le navigateur » puis chercher comment sauvegarder est le classique du débutant. Expérimenter vite, pérenniser proprement.

Exercice

1. Inspectez le titre de votre CV : modifiez son texte, sa couleur, sa taille en direct.
2. Dans Styles, trouvez la règle qui fixe la police du body ; désactivez-la (décochez) ; observez la pile de secours.
3. En console : changez document.title, ajoutez un élément (document.querySelector("footer").append("v1.0")), vérifiez visuellement.
4. Passez en mode 360px : listez deux problèmes visuels que le CSS devra corriger.
5. Question de réflexion : pourquoi la règle temporaire ajoutée via + dans Styles disparaît-elle au rechargement ?

Résumé

• Elements = DOM vivant éditable (pas vos fichiers) ; Inspect = le raccourci universel.
• Styles = cascade expliquée : règles barrées, styles calculés, box model.
• Console = JS interactif sur la vraie page ; terrain de jeu avant le fichier.
• Responsive + Performance complètent la trousse ; workflow = observer → expérimenter → reproduire → versionner.