Le Débogage avec les DevTools

1. Comprendre les DevTools

Chaque navigateur moderne possède ses DevTools : Chrome DevTools (le plus complet), Firefox DevTools (excellent pour le CSS), Safari Web Inspector, Edge DevTools (basé sur Chrome). Les fonctionnalités sont similaires.

DEVTOOLS — PANNEAUX PRINCIPAUX
═══════════════════════════════

  ┌─────────────────────────────────────────────┐
  │ Elements/Inspector │ Console │ Sources      │
  │─────────────────────│─────────│──────────────│
  │ • DOM tree           │ • Logs  │ • Fichiers   │
  │ • Styles panel       │ • Erreurs│ • Breakpoints│
  │ • Computed           │ • Commandes│ • Snippets │
  │ • Box Model          │         │              │
  │• Event Listeners     │         │              │
  ├─────────────────────┼─────────┼──────────────┤
  │ Performance │ Lighthouse │ Application     │
  │─────────────│─────────────│─────────────────│
  │ • Frames    │ • Score     │ • LocalStorage  │
  │ • Recording │ • Métriques │ • SessionStorage│
  │ • Paint     │ • Audit     │ • Cookies       │
  │ • Layout    │ • Rapport   │ • Cache         │
  └─────────────────────────────────────────────┘

Ouvrir les DevTools

2. Les panneaux en détail

2.1 Panneau Elements/Inspector

/* Les DevTools vous permettent de modifier le CSS en direct */
/* Les changements sont TEMPORAIRES (pas sauvegardés) */

/* Pour sauvegarder les changements : */
/* 1. Chrome : Ctrl+S dans l'onglet Sources */
/* 2. Firefox : click droit sur le fichier → "Save Changes" */
/* 3. Utiliser les Overrides (Chrome) pour persister */

/* Dans l'onglet Styles, vous pouvez : */
/* - Cliquer sur une valeur pour la modifier */
/* - Cocher/décocher pour activer/désactiver */
/* - Cliquer sur + pour ajouter une nouvelle règle */
/* - Ajouter un sélecteur personnalisé */
/* - Voir les propriétés barrées (écrasées par la cascade) */

2.2 Panneau Styles en détail

/* Ordre d'affichage dans le panneau Styles */
/* ═══════════════════════════════════════════ */

/* 1. element.style { } — styles inline */
/* 2. Règles de classes (.classe) */
/* 3. Règles d'éléments (div, p, etc.) */
/* 4. Héritage (propriétés héritées, en gris) */
/* 5. * { } — propriétés universelles */
/* 6. user agent stylesheet — styles du navigateur */

/* Les propriétés barrées (text-decoration: line-through) */
/* sont écrasées par une règle plus spécifique */

/* Specificity visualization : */
/* Les DevTools affichent la specificty dans l'infobulle */
/* hover sur un sélecteur pour voir sa pondération */

/* Exemple : */
/* .btn            → 0,1,0,0 */
/* #header .btn    → 1,1,0,0 */
/* .btn.active     → 0,2,0,0 */
/* div#header      → 1,0,1,0 */

2.3 Box Model visualizer

2.4 Inspecteur Flexbox et Grid

/* Chrome/Firefox offrent des inspecteurs visuels */
/* pour Flexbox et Grid */

/* FLEXBOX INSPECTOR */
/* 1. Sélectionnez un élément display: flex */
/* 2. Les axes sont surlignés dans l'élément */
/* 3. Le panneau Layout montre : */
/*    - Direction (row/column) */
/*    - Justify-content (axe principal) */
/*    - Align-items (axe secondaire) */
/*    - Gap */
/* 4. Modifiez les valeurs pour voir l'effet en direct */

/* GRID INSPECTOR */
/* 1. Sélectionnez un élément display: grid */
/* 2. L'overlay montre les lignes et colonnes numérotées */
/* 3. Le panneau Layout montre : */
/*    - grid-template-columns / rows */
/*    - gap */
/*    - Taille des tracks */
/* 4. Modifiez les valeurs pour voir la grille en direct */

L'overlay Grid montre les numéros de lignes et colonnes directement sur la page

2.5 Mode Responsive / Device

/* Le mode Responsive simule différentes tailles d'écran */
/* Raccourci : Ctrl+Shift+M (ou le bouton mobile/tablette) */

/* Fonctionnalités : */
/* 1. Simulation de devices (iPhone, iPad, Galaxy…) */
/* 2. Tailles personnalisées */
/* 3. Simulation tactile (touch events) */
/* 4. DPR (Device Pixel Ratio) */
/* 5. Orientation (portrait/paysage) */
/* 6. Thème (prefers-color-scheme) */
/* 7. Reduced motion (prefers-reduced-motion) */

/* Pour déboguer le responsive : */
/* 1. Activer le mode Responsive */
/* 2. Redimensionner la zone de rendu */
/* 3. Observer quand les media queries s'activent */
/* 4. L'overlay affiche la taille actuelle */
/* 5. Tester les breakpoints un par un */

2.6 Panneau Performance

/* L'onglet Performance mesure le rendu en temps réel */
/* Raccourci : Ctrl+Shift+P → "Performance" */

/* Fonctionnalités clés : */
/* 1. Enregistrement d'une session d'activité */
/* 2. FPS meter en temps réel */
/* 3. Paint flashing (surbrillance verte) */
/* 4. Layout shift regions */
/* 5. Layer borders */
/* 6. Rendering metrics */

/* Pour activer les overlays de debug : */
/* Chrome DevTools → Rendering panel (Ctrl+Shift+P → "Rendering") */

/* Options utiles : */
/* - Paint flashing     : souligne les régions peintes en vert */
/* - Layout shift regions : montre les zones de CLS en bleu */
/* - Layer borders      : affiche les bordures des calques GPU */
/* - FPS meter          : affiche les FPS en haut à droite */
/* - Emulate CSS media  : simule prefers-color-scheme, etc. */

2.7 Outil de couverture CSS

/* Chrome : Ctrl+Shift+P → "Coverage" */
/* Firefox : Onglet "Toggle Coverage" dans la toolbar */

/* L'outil de couverture montre : */
/* - Le % de CSS utilisé vs inutilisé */
/* - Ligne par ligne, les parties inutilisées (en rouge) */
/* - Permet d'identifier le CSS à supprimer ou reporter */

/* Comment l'utiliser : */
/* 1. Ouvrir l'outil Coverage */
/* 2. Cliquer sur le bouton d'enregistrement */
/* 3. Naviguer sur la page (interagir) */
/* 4. Arrêter l'enregistrement */
/* 5. Voir le rapport : % utilisé par fichier */
/* 6. Identifier les sélecteurs/propriétés inutilisés */

/* Exemple de résultat : */
/* styles.css:    45% utilisé ████████░░░░ */
/* critical.css:  92% utilisé ████████████ */
/* components.css: 30% utilisé ██████░░░░░░ */

2.8 Déboguer les problèmes CSS courants

/* DÉBOGAGE PAR DÉFAUT — ajouter temporairement */
* { outline: 1px solid red; }    /* Voir tous les éléments */
* { background: rgba(255,0,0,0.1); } /* Zones rouges semi-transparentes */
* { box-shadow: 0 0 0 1px red; } /* Bordures sur tout */

/* DÉBOGAGE DES SPECIFICITÉS */
/* Ajouter une règle avec une valeur impossible */
.debug-specif {
  color: magenta !important;  /* Si elle s'applique, c'est la bonne */
  /* Si elle ne s'applique pas, une règle plus spécifique gagne */
}

/* DÉBOGAGE DES VARIABLES CSS */
.debug-var {
  outline: 2px solid var(--ma-variable, magenta);
  /* Si l'outline est magenta, la variable n'est pas définie */
}

3. Visualisation

3.1 Résumé des raccourcis DevTools

3.2 Flux de débogage CSS

FLUX DE DÉBOGAGE CSS
════════════════════

  1. IDENTIFIER le problème
     └── Qu'est-ce qui ne va pas visuellement ?

  2. INSPECTER l'élément
     ├── Clic droit → Inspecter
     ├── Ou Ctrl+Shift+C → cliquer sur l'élément
     └── Voir le DOM tree et les styles

  3. ANALYSER les styles
     ├── Le panneau Styles montre toutes les règles
     ├── Les propriétés barrées sont écrasées
     └── Le panneau Computed montre la valeur finale

  4. VÉRIFIER la cascade
     ├── Quel sélecteur gagne ? (spécificité)
     ├── L'ordre d'importance est-il correct ?
     └── Y a-t-il un !important ?

  5. MODIFIER en direct
     ├── Cliquer sur une valeur pour éditer
     ├── Ajouter une nouvelle règle (+)
     ├── Activer/désactiver (checkbox)
     └── Toggle les classes (.cls)

  6. TESTER les états
     ├── :hover, :focus, :active
     ├── :disabled, :checked
     ├── :nth-child, :first-child
     └── Mode responsive

  7. VALIDER
     ├── Tester sur différentes tailles
     ├── Vérifier les contrastes
     ├── Mesurer les performances
     └── Copier le code corrigé

3.3 Outils de debug par problème

4. Exemples progressifs

4.1 Étape par étape : Déboguer un menu cassé

4.2 Techniques de debug CSS

/* === TECHNIQUE 1 : Surbrillance de tous les éléments === */
/* Dans la console DevTools : */
$0.style.outline = "1px solid red";
// $0 = l'élément sélectionné dans l'onglet Elements

/* Pour tous les éléments : */
document.querySelectorAll('*').forEach(el => {
  el.style.outline = "1px solid rgba(255,0,0,0.2)";
});

/* === TECHNIQUE 2 : Identifier le z-index === */
/* Dans le panneau Computed → z-index */
/* Ou dans la console : */
getComputedStyle($0).zIndex;

/* === TECHNIQUE 3 : Voir les variables CSS === */
/* Dans le panneau Styles → :root */
/* Ou dans la console : */
getComputedStyle(document.documentElement)
  .getPropertyValue('--ma-variable');

/* === TECHNIQUE 4 : Simuler un état === */
/* Panneau Styles → Toggle :hover, :focus, etc. */
/* Ou ajouter temporairement une classe : */
$0.classList.add('is-active');

/* === TECHNIQUE 5 : Mesurer une distance === */
/* Outil Measure (Chrome) : Ctrl+Shift+P → "Show Ruler" */
/* Ou l'outil de measuring dans le panneau Computed */

4.3 Debugging des media queries

/* Dans le mode Responsive (Ctrl+Shift+M) : */
/* 1. L'overlay montre la taille actuelle */
/* 2. Les media queries actives sont listées */
/* 3. Vous pouvez voir quel breakpoint s'applique */

/* Vérifications courantes : */
/* 1. Le viewport meta est-il présent ? */
/* <meta name="viewport" content="width=device-width, initial-scale=1.0"> */

/* 2. L'ordre des media queries est-il correct ? */
/* Mobile-first : @media (min-width: 768px) {} */
/* Desktop-first : @media (max-width: 767px) {} */
/* ⚠️ Mélanger les deux crée des conflits */

/* 3. Les unités sont-elles responsives ? */
/* ✅ rem, em, %, vw, vh, clamp() */
/* ❌ px fixes pour les tailles de texte */

4.4 Debugging de la performance

/* Chrome DevTools → Rendering (Ctrl+Shift+P → "Rendering") */

/* 1. Paint Flipping (surbrillance verte) */
/* Activez → naviguez → les zones vertes = repaint */
/* Si trop de zones vertes = problème de performance */

/* 2. Layout Shift Regions (zones bleues) */
/* Activez → naviguez → les zones bleues = CLS */
/* Chaque zone bleue = un layout shift mesuré */

/* 3. Layer Borders */
/* Activez → les calques GPU sont entourés de bordures */
/* Utile pour vérifier will-change et layer promotion */

/* 4. FPS Meter */
/* Activez → affiche les FPS en temps réel en haut */
/* Idéal : 60fps constant, pas de dips */

/* 5. Emulate CSS media features */
/* Simule prefers-color-scheme, prefers-reduced-motion, etc. */
/* Utile pour tester les media queries sans changer les settings */

5. Erreurs fréquentes

/* FAUX — les modifications dans les DevTools sont TEMPORAIRES */
/* Elles disparaissent au rechargement de la page */
/* Pour sauvegarder : utiliser les Overrides (Chrome) */
/* ou copier le code corrigé dans le fichier source */

/* CORRECT — sauvegarder les changements */
/* Chrome : Sources → Overrides → choisir un dossier */
/* Les modifications seront persistées dans ce dossier */

/* FAUX — seulement regarder le panneau Styles */
/* Le panneau Styles montre les règles, pas la valeur finale */

/* CORRECT — toujours vérifier le Computed */
/* Le panneau Computed montre la VALEUR FINALE */
/* après cascade, héritage et calc() */

/* FAUX — ne regarder que le style de l'élément */
/* Certaines propriétés sont héritées du parent */
/* Elles apparaissent en gris dans le panneau Styles */

/* CORRECT — remonter dans l'arbre DOM */
/* Si une propriété est héritée, vérifiez le parent */
/* color, font-*, line-height, visibility sont héritées */

/* FAUX — chercher visuellement les variables */
/* dans le panneau Styles de chaque élément */

/* CORRECT — utiliser la console */
const styles = getComputedStyle(document.documentElement);
console.log(styles.getPropertyValue('--ma-variable'));
// Affiche la valeur calculée de la variable

/* FAUX — seulement regarder l'état normal */
/* Beaucoup de bugs sont dans les états :hover, :focus */

/* CORRECT — activer les pseudo-classes dans les DevTools */
/* Styles panel → ':hov' → cocher :hover, :focus, etc. */
/* Ou utiliser Ctrl+Shift+P → "Toggle element state" */

/* FAUX — ignorer les messages de la console */
/* Les erreurs CSS (propriétés invalides) apparaissent en jaune */

/* CORRECT — toujours vérifier la console */
/* Les erreurs CSS indiquent : */
/* - Propriété inconnue (faute de frappe ?) */
/* - Valeur invalide (unité manquante ?) */
/* - Variable non définie (fallback manquant ?) */

/* FAUX — ne tester que sur desktop */
/* Le problème peut être invisible sur une seule taille */

/* CORRECT — systématiquement tester le Responsive */
/* Ctrl+Shift+M → tester au moins sur : */
/* - 320px (mobile petit) */
/* - 375px (mobile standard) */
/* - 768px (tablette) */
/* - 1024px (desktop) */
/* - 1440px (grand écran) */

/* FAUX — garder tout le CSS sans le vérifier */
/* Beaucoup de CSS est inutilisé (30-70% en moyenne) */

/* CORRECT — auditer avec Coverage */
/* Ctrl+Shift+P → "Coverage" → enregistrer → naviguer */
/* Identifier le CSS mort pour le supprimer ou reporter */

6. Bonnes pratiques

/* Chrome DevTools — le plus complet */
/* → Elements, Styles, Computed, Box Model, Console */
/* → Rendering panel, Coverage, Performance */

/* Firefox DevTools — excellent pour le CSS */
/* → Inspector, Rule view, Fonts panel */
/* → Grid inspector (le meilleur) */
/* → Animations panel */

/* Extensions utiles : */
/* - axe DevTools (accessibilité) */
/* - Wappalyzer (technologies utilisées) */
/* - CSS Grid Overlay (visualisation de grille) */
/* - WhatFont (identification des polices) */
/* - VisBug (outil de design interactif) */

/* Outils en ligne : */
/* - Chrome DevTools Remote Debug */
/* - polypane.app (multi-viewport) */
/* - responsivedesignchecker.com */

7. Mini-défi

/* Créez ce conflit et inspectez : */
.primaire { color: blue; }       /* spec: 0,1,0 */
.div.primaire { color: red; }    /* spec: 0,2,0 — gagne ! */

/* Dans les DevTools, vous verrez : */
/* - color: blue barré (écrasé) */
/* - color: red actif */

/* La spécificité de .div.primaire est plus haute */

/* Symptôme : un élément déborde à droite */
/* Dans les DevTools : */
/* 1. Sélectionner l'élément */
/* 2. Voir le Box Model : width + padding + border > parent */
/* 3. Vérifier box-sizing : content-box vs border-box */
/* 4. Solution : box-sizing: border-box ou width réduit */

/* Étapes : */
/* 1. Ctrl+Shift+P → "Coverage" */
/* 2. Cliquer sur le bouton d'enregistrement */
/* 3. Naviguer sur la page (scroller, hover, cliquer) */
/* 4. Arrêter l'enregistrement */
/* 5. Voir le rapport par fichier */
/* 6. Les lignes en rouge = CSS inutilisé */

/* Étapes : */
/* 1. Ctrl+Shift+M pour activer le mode Responsive */
/* 2. Réduire progressivement la largeur */
/* 3. Observer quand le layout change */
/* 4. Noter la largeur exacte du breakpoint */
/* 5. Vérifier quel media query correspond */

/* Lire une variable CSS */
const styles = getComputedStyle(document.documentElement);
const primary = styles.getPropertyValue('--color-primary');
console.log('Valeur actuelle:', primary);

/* Modifier une variable CSS */
document.documentElement.style.setProperty('--color-primary', '#7c3aed');

/* Vérifier que le changement est appliqué */
const newVal = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-primary');
console.log('Nouvelle valeur:', newVal);

8. Projets pratiques

9. Révision

Récapitulatif des concepts clés

Quiz rapide

1. Quel raccourci ouvre les DevTools ?
2. Quel panneau montre la valeur finale d'une propriété CSS ?
3. Comment activer l'état :hover dans les DevTools ?
4. Quel outil mesure le CSS inutilisé ?
5. Comment simuler un iPhone dans les DevTools ?
6. Quel est le raccourci pour le mode inspecter ?
7. Comment lire une variable CSS via la console ?
8. Quel panneau affiche le modèle de boîte ?
9. Comment identifier les Layout Shifts ?
10. Les modifications dans les DevTools sont-elles permanentes ?

Cheat sheet rapide

/* === RACCOURCIS DEVTOOLS === */
F12               Ouvrir les DevTools
Ctrl+Shift+C      Mode inspecter
Ctrl+Shift+M      Mode Responsive
Ctrl+Shift+P      Command palette
Ctrl+F            Rechercher
Ctrl+Z            Annuler un changement CSS
Esc               Console ou fermer panneau

/* === DEBUG CSS === */
/* Inspecter : clic droit → Inspecter */
/* Modifier : cliquer sur une valeur dans Styles */
/* Ajouter : bouton + dans Styles */
/* États : Styles → :hov → cocher :hover, :focus */
/* Classes : bouton .cls pour ajouter/retirer */
/* Variables : getComputedStyle(el).getPropertyValue('--var') */
/* computed : onglet Computed → valeur finale */
/* Box Model : onglet Computed → cliquer sur le diagramme */
/* Responsive : Ctrl+Shift+M → redimensionner */
/* Performance : Rendering → Paint flashing, FPS */
/* Couverture : Coverage → identifier CSS inutilisé */