Credit : Illustration backtotheweb.fr

Debugger avec les outils DevTools de Chrome

Ouvrir les DevTools

Ça fait partie des bases, mais c'est souvent mal configuré.

Accedez aux DevTools avec F12, Ctrl+Shift+I (Windows/Linux) ou Cmd+Option+I (macOS). Vous pouvez aussi faire clic droit > Inspecter sur n'importe quel element.

L'onglet Console

La Console est votre terminal JavaScript dans le navigateur. Au-dela du simple console.log(), exploitez les methodes avancees :

// Afficher un tableau formate
console.table([{nom: 'Alice', age: 30}, {nom: 'Bob', age: 25}]);

// Mesurer le temps d'execution
console.time('fetch-api');
await fetch('/api/products');
console.timeEnd('fetch-api');
// fetch-api: 142.3ms

// Grouper les logs
console.group('Chargement page');
console.log('DOM ready');
console.log('Images chargees');
console.groupEnd();

// Assertion conditionnelle
console.assert(document.querySelector('.header'), 'Header manquant !');

// Selectionner un element comme en jQuery
$('.mon-element');  // equivalent de document.querySelector
$('.mes-elements'); // equivalent de document.querySelectorAll

L'onglet Network

L'onglet Network enregistre toutes les requetes HTTP. Voici comment l'utiliser efficacement :

• Filtrer par type : XHR, JS, CSS, Img, Media, Font, Doc
• Throttling : simulez une connexion 3G pour tester sur mobile
• Bloquer une requete : clic droit > Block request URL (utile pour tester sans un script tiers)

Analysez le waterfall pour identifier les goulets d'etranglement :

• TTFB (Time To First Byte) eleve : probleme serveur
• Content Download long : fichiers trop volumineux
• Stalled : trop de connexions simultanees au meme domaine

Copiez une requete comme commande cURL :

1. Clic droit sur la requete
2. Copy > Copy as cURL
3. Collez dans votre terminal pour reproduire

L'onglet Performance

Enregistrez un profil de performance pour identifier les problemes de rendu :

1. Cliquez sur le bouton Record
2. Interagissez avec la page (scroll, clics)
3. Arretez l'enregistrement

Le flame chart montre :

• Main : les taches JavaScript sur le thread principal
• Frames : le nombre de FPS (ciblez 60 FPS)
• Layout shifts : les elements qui bougent de maniere inattendue

Recherchez les Long Tasks (barre rouge au-dessus de 50ms) qui bloquent l'interface.

L'onglet Lighthouse

Lighthouse audite automatiquement votre page sur 5 axes :

• Performance : LCP, FID, CLS
• Accessibilite : contrastes, labels, navigation clavier
• Bonnes pratiques : HTTPS, images optimisees
• SEO : balises meta, structure
• PWA : manifest, service worker

Lancez un audit :

1. Ouvrez Lighthouse dans DevTools
2. Selectionnez Mobile et les categories souhaitees
3. Cliquez sur Analyser le chargement de la page

Chaque recommandation inclut l'impact estime et les instructions pour corriger.

L'onglet Sources : debugger le JavaScript

Placez des breakpoints pour stopper l'execution ligne par ligne :

// Breakpoint conditionnel dans le code
if (user.role === 'admin') {
    debugger; // Le navigateur s'arrete ici
}

Dans l'onglet Sources :

• Cliquez sur le numero de ligne pour ajouter un breakpoint
• Clic droit > Add conditional breakpoint pour ne s'arreter que si une condition est vraie
• Utilisez Watch pour surveiller la valeur d'une variable
• Call Stack montre la pile d'appels qui a mene au point d'arret

Commandes de navigation :

Astuces bonus

• Device Mode (Ctrl+Shift+M) : testez le responsive sans appareil mobile
• Coverage (Ctrl+Shift+P > Coverage) : identifiez le CSS et JS inutilise
• Local Overrides : modifiez les fichiers d'un site distant et conservez les changements entre les rechargements

Les DevTools sont l'outil le plus puissant du developpeur web. Investir du temps a les maitriser accelere considerablement le debogage et l'optimisation de vos projets.

Si ça vous a été utile, partagez-le à un collègue qui galère.