Déboguer avec l'inspecteur du navigateur

Les raccourcis à mémoriser

• F12 ou Cmd+Option+I (Mac) / Ctrl+Shift+I (Windows/Linux) : ouvre les DevTools
• Cmd+Shift+C / Ctrl+Shift+C : pour inspecter un élément précis directement
• Cmd+Shift+M / Ctrl+Shift+M : bascule en mode responsive
• Échap : ouvre/ferme le tiroir Console depuis n'importe quel panneau

Le Command Menu

Le raccourci le plus rentable des DevTools : Cmd+Shift+P / Ctrl+Shift+P. Tu tapes screenshot, disable JavaScript, coverage... Tu pilotes tout au clavier sans chercher dans les menus.

Firefox aussi

Mêmes raccourcis, mêmes panneaux principaux (Inspecteur, Console, Réseau, Débogueur, Stockage). Si tu sais déboguer dans Chrome, tu sais déboguer dans Firefox.

Manipuler le DOM

• Double-clic sur un attribut pour l'éditer
• Clic droit sur un élément → Edit as HTML pour modifier le markup
• Faire glisser un élément dans l'arbre pour le déplacer
• Touche Delete pour supprimer un nœud (test rapide)

Le panneau Styles

• Ajouter une règle CSS en cliquant dans la zone (autocomplétion incluse)
• Désactiver/activer une propriété en décochant la case
• Forcer un état : :hover, :focus, :focus-visible, :active
• Color picker avec ratio de contraste WCAG AA/AAA intégré

Flexbox et Grid debugger

Quand un élément est un conteneur Flex ou Grid, un badge flex ou grid apparaît à côté dans le DOM. Clique dessus : les lignes de la grille s'affichent en couleur sur la page. Indispensable pour comprendre un layout cassé.

// Tableau d'objets affiché en colonnes triables
console.table(users);

// Grouper des logs liés
console.group('Traitement commande');
console.log('Étape 1 : validation');
console.log('Étape 2 : paiement');
console.groupEnd();

// Mesurer une durée
console.time('chargement');
// ... du code ...
console.timeEnd('chargement');  // "chargement: 234ms"

// Log conditionnel sans casser le flux
console.assert(user.age >= 18, 'User trop jeune', user);

// Stack trace à un endroit précis (sans throw)
console.trace('passé par ici');

Live expressions

L'icône œil en haut de la Console : tu y mets une expression et tu la vois en temps réel. Exemple : document.activeElement pour suivre le focus pendant que tu navigues au clavier.

Poser un breakpoint

• Clic sur le numéro de ligne pour un breakpoint classique
• Clic droit → Add conditional breakpoint : ne s'arrête que si une condition est vraie
• Clic droit → Add logpoint : log une valeur sans modifier le code, sans arrêter
• Breakpoint sur exception : pause automatique sur toute erreur (case Pause on exceptions)

Les touches du pas-à-pas

• F8 : Resume (continuer l'exécution)
• F10 : Step over (passer à la ligne suivante sans entrer dans les fonctions)
• F11 : Step into (entrer dans la fonction appelée)
• Shift+F11 : Step out (sortir de la fonction courante)

Scope, Watch, Call Stack

• Scope : toutes les variables visibles à l'arrêt courant
• Watch : tu y ajoutes des expressions à suivre (user.email, cart.length)
• Call Stack : la pile d'appels qui t'a amené ici, cliquable pour remonter

Breakpoints DOM

Clic droit sur un élément dans Elements → Break on → subtree modifications / attribute modifications / node removal. Le débogueur se déclenche dès que cet élément change. Magique pour traquer un JS tiers qui modifie ton DOM mystérieusement.

Filtres essentiels

• Boutons en haut : Fetch/XHR (les appels API), JS, CSS, Img, Doc
• Filtre texte avancé : status-code:404, method:POST, domain:api.example.com
• Preserve log coché : garde l'historique même quand tu navigues vers une autre page
• Disable cache coché : utile en dev, à décocher en debug de prod

Détail d'une requête

• Headers : ce qui a été envoyé (request) et reçu (response)
• Payload : le corps de la requête (utile pour vérifier ce qui est envoyé)
• Response : le corps de la réponse (souvent du JSON)
• Timing : décomposition (DNS, TCP, TLS, request, response, download)
• Initiator : qui a déclenché la requête (cliquable pour aller au code source)

Throttling : simuler la lenteur

Menu déroulant No throttling en haut → Slow 4G, Fast 3G, ou un profil custom. Indispensable pour tester ce que voit un·e utilisateur·ice sur une connexion mobile lente.

Storage

• LocalStorage : persistant entre sessions, ~10 Mo
• SessionStorage : effacé à la fermeture de l'onglet
• IndexedDB : base de données structurée côté navigateur
• Cache Storage : ressources mises en cache par un Service Worker

Cookies

Vérifier les flags critiques : HttpOnly (inaccessible en JS, mitige le XSS), Secure (HTTPS uniquement), SameSite (Strict/Lax/None, mitige le CSRF). Si tu vois un cookie d'authentification sans HttpOnly, c'est un signal d'alarme.

Service Workers

• Liste des SW enregistrés, leur statut (installed, activated)
• Update on reload : force la mise à jour à chaque reload (utile en dev)
• Unregister : supprime un SW qui pose problème
• Offline : simule la déconnexion (test du fallback)

Panneau Performance

• Bouton Record rouge, navigue dans ta page, Stop
• Panneau Insights : LCP, INP, CLS (les Core Web Vitals)
• Repère les Long tasks (rectangles rouges sur la timeline)
• Compare avant/après une optimisation : visuel immédiat

Accessibility tree

Dans Elements, onglet Accessibility. Tu vois l'arbre tel que perçu par un lecteur d'écran : nom accessible, rôle, états ARIA calculés. Si le nom accessible est (empty) sur un bouton, tu as un problème.

Lighthouse en 1 clic

Onglet Lighthouse. Coche les audits voulus (Performance, Accessibility, Best Practices, SEO, PWA), bouton Analyze page load. En 30 secondes tu as un rapport avec des recos concrètes et priorisées.

Coverage : code mort

Via le Command Menu : Coverage. Tu navigues dans ta page, l'outil te dit quel pourcentage de chaque fichier JS/CSS est réellement utilisé. Excellent pour traquer le code mort à supprimer.