Pourquoi Chrome DevTools est votre meilleur allié de développeur

Chrome DevTools est l’outil de débogage le plus puissant disponible directement dans votre navigateur. Plutôt que d’ajouter des console.log() partout dans votre code, DevTools vous permet d’inspecter, modifier et déboguer en temps réel. Ce tutoriel vous montre comment l’utiliser concrètement avec des raccourcis et des techniques que les développeurs professionnels utilisent au quotidien.

Pour ouvrir DevTools : appuyez sur F12 ou Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac).

1. L’onglet Elements : inspecter et modifier le HTML/CSS en direct

L’onglet Elements affiche le DOM (Document Object Model) de votre page. C’est ici que vous inspectez et modifiez le HTML et le CSS en temps réel.

Sélectionner un élément rapidement

Cliquez sur l’icône de sélection (en haut à gauche de DevTools) ou appuyez sur Ctrl+Shift+C, puis cliquez sur n’importe quel élément de la page. DevTools vous amène directement au code HTML correspondant.

Modifier le CSS en direct

Dans le panneau Styles à droite, vous pouvez :

Cliquer sur n’importe quelle valeur CSS pour la modifier instantanément
Cocher/décocher une propriété pour la désactiver temporairement
Cliquer sur element.style {} en haut pour ajouter de nouvelles propriétés
Voir quelles règles CSS sont appliquées et lesquelles sont barrées (overridées)

Astuce pro : Maintenez Shift en cliquant sur un carré de couleur pour basculer entre les formats hex, RGB, HSL.

Exercice pratique

Ouvrez DevTools sur cette page, sélectionnez ce paragraphe, et changez sa couleur en rouge via le panneau Styles. Modifiez aussi le font-size à 20px. Les modifications sont temporaires — rechargez la page pour revenir à l’original.

2. L’onglet Console : bien plus que console.log()

La Console est l’outil de débogage JavaScript par excellence. Voici les méthodes que les pros utilisent au-delà du simple console.log() :

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

// Mesurer le temps d'exécution
console.time('boucle');
for (let i = 0; i < 1000000; i++) {}
console.timeEnd('boucle'); // → boucle: 3.45ms

// Grouper les logs
console.group('Données utilisateur');
console.log('Nom: Alice');
console.log('Email: alice@example.com');
console.groupEnd();

// Afficher un avertissement ou une erreur
console.warn('Attention : valeur manquante');
console.error('Erreur critique : connexion échouée');

// Assertion (n'affiche rien si vrai)
console.assert(1 === 2, 'Ce message apparaît car 1 !== 2');

// Compter les appels
function maFonction() {
  console.count('maFonction appelée');
}
maFonction(); // maFonction appelée: 1
maFonction(); // maFonction appelée: 2

Sélecteurs rapides dans la Console

DevTools offre des raccourcis puissants directement dans la Console :

// Sélectionner un élément (comme document.querySelector)
$('h1')              // Premier h1 de la page
$$('p')              // Tous les paragraphes (comme querySelectorAll)
$0                   // Dernier élément inspecté dans l'onglet Elements
$_                   // Résultat de la dernière expression évaluée

// Surveiller les événements d'un élément
monitorEvents($('button'), 'click');

// Copier un objet dans le presse-papier
copy({nom: 'test', data: [1,2,3]}); // → JSON copié

3. L’onglet Sources : les breakpoints pour un débogage chirurgical

Au lieu de parsemer votre code de console.log(), utilisez les breakpoints pour arrêter l’exécution à un point précis et inspecter l’état de toutes vos variables.

Poser un breakpoint

Ouvrez l’onglet Sources
Trouvez votre fichier JavaScript dans l’arborescence à gauche
Cliquez sur le numéro de ligne où vous voulez arrêter l’exécution → un marqueur bleu apparaît
Déclenchez l’action (clic sur un bouton, soumission de formulaire, etc.)
L’exécution s’arrête au breakpoint. Inspectez les variables dans le panneau Scope à droite

Les contrôles de débogage

F8 — Resume : continuer l’exécution jusqu’au prochain breakpoint
F10 — Step Over : exécuter la ligne courante et passer à la suivante
F11 — Step Into : entrer dans la fonction appelée sur cette ligne
Shift+F11 — Step Out : sortir de la fonction courante

Breakpoints conditionnels

Clic droit sur un numéro de ligne → Add conditional breakpoint. Le breakpoint ne s’active que si la condition est vraie. Exemple : i === 50 pour arrêter une boucle uniquement à la 50e itération.

Le mot-clé debugger

Ajoutez debugger; dans votre code JavaScript. Quand DevTools est ouvert, l’exécution s’arrête automatiquement à cette ligne :

function calculerTotal(items) {
  let total = 0;
  for (const item of items) {
    debugger; // L'exécution s'arrête ici à chaque itération
    total += item.prix * item.quantite;
  }
  return total;
}

4. L’onglet Network : analyser les requêtes HTTP

L’onglet Network enregistre toutes les requêtes HTTP effectuées par la page. Indispensable pour déboguer les appels API, identifier les ressources lentes, et comprendre le chargement de votre page.

Filtrer les requêtes

Utilisez les boutons de filtre : XHR (appels AJAX/fetch), JS, CSS, Img, Doc. Pour déboguer un appel API, filtrez par XHR ou tapez le nom de l’endpoint dans la barre de recherche.

Inspecter une requête

Cliquez sur une requête pour voir :

Headers : URL, méthode (GET/POST), code de statut (200, 404, 500), headers envoyés et reçus
Payload : les données envoyées (body de la requête POST)
Preview : la réponse formatée (pratique pour le JSON)
Response : la réponse brute du serveur
Timing : le temps de chaque phase (DNS, connexion, attente, téléchargement)

Simuler une connexion lente

Le menu déroulant « Throttling » (par défaut « No throttling ») permet de simuler des connexions 3G ou lentes. Essentiel pour tester votre site dans les conditions réseau réelles au Sénégal.

5. L’onglet Performance : identifier les goulots d’étranglement

Cliquez sur le bouton d’enregistrement (cercle gris), interagissez avec votre page, puis arrêtez l’enregistrement. DevTools génère un profil détaillé montrant :

Les tâches longues (Long Tasks) marquées en rouge — les fonctions qui bloquent le thread principal pendant plus de 50ms
Le flame chart qui montre l’empilement des appels de fonctions et leur durée
Les layouts et repaints déclenchés par vos modifications DOM/CSS

Règle d’or : si une interaction utilisateur (clic, scroll) déclenche une tâche de plus de 100ms, votre interface paraît lente. Optimisez cette fonction en priorité.

6. L’onglet Application : stockage local et cookies

Inspectez et modifiez en direct :

Local Storage et Session Storage : voir, modifier et supprimer les données stockées par votre application
Cookies : voir les cookies du domaine, leur date d’expiration, et les flags HttpOnly/Secure
IndexedDB : explorer les bases de données côté client
Cache Storage : voir les fichiers mis en cache par un Service Worker

7. Responsive Design : le mode mobile

Appuyez sur Ctrl+Shift+M pour basculer en mode responsive. Vous pouvez :

Choisir un appareil prédéfini (iPhone 14, Galaxy S21, iPad, etc.)
Définir une résolution personnalisée
Simuler un écran tactile
Tester les orientations portrait/paysage

Récapitulatif des raccourcis essentiels

Raccourci	Action
`F12`	Ouvrir/fermer DevTools
`Ctrl+Shift+C`	Sélectionner un élément dans la page
`Ctrl+Shift+M`	Mode responsive
`Ctrl+Shift+J`	Ouvrir directement la Console
`Ctrl+P` (dans Sources)	Rechercher un fichier par nom
`Ctrl+Shift+F`	Rechercher dans tous les fichiers
`F8`	Resume (continuer après breakpoint)
`F10`	Step Over (ligne suivante)
`F11`	Step Into (entrer dans la fonction)

Défi pratique : déboguez ce code

Ouvrez la console de votre navigateur et collez ce code. Il contient un bug. Utilisez un breakpoint conditionnel ou console.table() pour trouver l’erreur :

const produits = [
  { nom: 'Laptop', prix: 450000, quantite: 2 },
  { nom: 'Souris', prix: 5000, quantite: '3' },  // Bug caché ici
  { nom: 'Clavier', prix: 15000, quantite: 1 }
];

function calculerTotal(produits) {
  return produits.reduce((total, p) => total + p.prix * p.quantite, 0);
}

console.log('Total:', calculerTotal(produits));
// Le résultat n'est pas ce que vous attendez. Pourquoi ?
// Indice : inspectez le type de chaque quantite avec typeof

Réponse : la quantité de la souris est une chaîne "3" au lieu d’un nombre. La multiplication 5000 * "3" fonctionne en JavaScript (coercion), mais dans un cas plus complexe avec +, cela causerait une concaténation. Utilisez console.table(produits) pour repérer visuellement le problème et parseInt() ou Number() pour le corriger.

Comment déboguer efficacement avec Chrome DevTools