Outils de développement (DevTools)

Les DevTools (outils de développement) sont votre meilleur allié en développement JavaScript. Ils vous permettent d'inspecter, déboguer et analyser votre code en temps réel.

Ouvrir les DevTools

Les DevTools sont intégrés à tous les navigateurs modernes.

Raccourcis clavier :

• Windows/Linux : F12 ou Ctrl + Shift + I
• macOS : Cmd + Option + I

Astuce : Vous pouvez aussi faire clic droit sur n'importe quel élément de la page → "Inspecter" pour ouvrir directement les DevTools sur cet élément.

Les onglets principaux

1. Console - Votre outil de débogage JavaScript

La console affiche les messages, erreurs, warnings et vous permet de tester du code JavaScript.

Méthodes console courantes

// Message simple
console.log('Message informatif');

// Afficher plusieurs valeurs
const name = 'Alice';
const age = 25;
console.log('Utilisateur:', name, 'Age:', age);

// Warning (jaune)
console.warn('Attention : Cette fonction est dépréciée');

// Erreur (rouge)
console.error('Erreur : Impossible de charger les données');

// Afficher un objet de manière lisible
const user = { name: 'Alice', age: 25, role: 'admin' };
console.log(user);

// Tableau formaté
const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
];
console.table(users);

// Grouper des logs
console.group('Détails utilisateur');
console.log('Nom: Alice');
console.log('Email: alice@example.com');
console.log('Rôle: Admin');
console.groupEnd();

// Mesurer le temps d'exécution
console.time('Calcul');
// ... code à mesurer ...
console.timeEnd('Calcul'); // Affiche: "Calcul: 15.2ms"

// Afficher la pile d'appels
console.trace('Trace de l'exécution');

Exemple pratique : Déboguer une fonction

function calculateTotal(items) {
  console.log('📦 Calcul du total pour', items.length, 'articles');

  let total = 0;
  items.forEach((item, index) => {
    console.log(`  Article ${index + 1}:`, item.name, '-', item.price + '€');
    total += item.price;
  });

  console.log('💰 Total final:', total + '€');
  return total;
}

const cart = [
  { name: 'Laptop', price: 999 },
  { name: 'Mouse', price: 25 },
  { name: 'Keyboard', price: 75 }
];

calculateTotal(cart);

Sortie console :

📦 Calcul du total pour 3 articles
  Article 1: Laptop - 999€
  Article 2: Mouse - 25€
  Article 3: Keyboard - 75€
💰 Total final: 1099€

Tester du code directement dans la console

La console est un REPL (Read-Eval-Print Loop) - vous pouvez exécuter du JavaScript directement :

// Essayez dans la console de ce site :
document.querySelector('h1').textContent
// Retourne le texte du premier h1

Array.from({length: 5}, (_, i) => i * 2)
// [0, 2, 4, 6, 8]

fetch('https://api.github.com/users/octocat')
  .then(r => r.json())
  .then(data => console.log(data))
// Affiche les données de l'utilisateur GitHub

2. Elements - Inspecter le HTML et CSS

L'onglet Elements (ou Inspecteur sur Firefox) permet de :

• Voir le HTML rendu en temps réel
• Modifier le contenu et les attributs (temporaire, pour tester)
• Inspecter les styles CSS appliqués
• Voir l'ordre de priorité des règles CSS (spécificité)
• Visualiser le box model (margin, padding, border)
• Voir les événements JavaScript attachés aux éléments

Astuce : Survolez un élément dans le panneau Elements pour le mettre en surbrillance sur la page.

3. Sources - Déboguer le JavaScript

L'onglet Sources (ou Débogueur sur Firefox) est l'outil de débogage le plus puissant.

Points d'arrêt (Breakpoints)

Les breakpoints mettent le code en pause pour inspecter l'état de l'application.

Comment ajouter un breakpoint :

1. Ouvrez l'onglet Sources
2. Trouvez votre fichier JavaScript dans l'arborescence
3. Cliquez sur le numéro de ligne où vous voulez arrêter l'exécution

function addToCart(item) {
  // Breakpoint ici (ligne 2)
  console.log('Ajout au panier:', item);

  const cart = getCart();
  cart.push(item); // Breakpoint ici (ligne 5)

  saveCart(cart);
  return cart;
}

Quand le code atteint un breakpoint :

• ✅ L'exécution se met en pause
• ✅ Vous pouvez inspecter les variables locales
• ✅ Vous pouvez exécuter du code dans la console
• ✅ Vous pouvez avancer pas à pas

Contrôles de débogage

Déboguer avec debugger

Vous pouvez aussi ajouter le mot-clé debugger directement dans votre code :

function complexCalculation(data) {
  const result = data.map(x => x * 2);

  debugger; // Le code s'arrête ici si les DevTools sont ouverts

  return result.reduce((sum, val) => sum + val, 0);
}

Watch Expressions

Vous pouvez surveiller des expressions en temps réel :

1. Dans l'onglet Sources, trouvez la section Watch
2. Cliquez sur + et ajoutez une expression : cart.length, user.isAuthenticated, etc.
3. Quand le code est en pause, les valeurs s'affichent automatiquement

4. Network - Analyser les requêtes réseau

L'onglet Network montre toutes les requêtes HTTP :

• Requêtes API (fetch, axios)
• Chargement des images, scripts, CSS
• Temps de chargement
• Statut HTTP (200, 404, 500, etc.)
• Headers et payload

Utile pour :

• Déboguer les appels API
• Voir les données envoyées/reçues
• Comprendre pourquoi une ressource ne charge pas
• Analyser les performances

5. Application - Stockage et état

L'onglet Application (Chrome/Edge) ou Stockage (Firefox) permet d'inspecter :

• Local Storage - Données persistantes (clé-valeur)
• Session Storage - Données temporaires (session)
• Cookies - Cookies HTTP
• Cache - Ressources en cache
• IndexedDB - Base de données côté client

En React : Vous pourrez aussi voir l'état de vos composants avec React Developer Tools (extension).

Erreurs JavaScript courantes

TypeError

const user = null;
console.log(user.name);
// TypeError: Cannot read property 'name' of null

Cause : Tentative d'accès à une propriété sur null ou undefined.

Solution : Vérifier que l'objet existe avant d'y accéder.

// ✅ Bon
if (user) {
  console.log(user.name);
}

// ✅ Encore mieux (optional chaining)
console.log(user?.name);

ReferenceError

console.log(myVariable);
// ReferenceError: myVariable is not defined

Cause : Variable non déclarée ou hors de portée (scope).

Solution : Vérifier l'orthographe et déclarer la variable.

SyntaxError

const user = { name: 'Alice' age: 25 };
// SyntaxError: Unexpected identifier

Cause : Erreur de syntaxe (virgule manquante, parenthèse, etc.).

Solution : Lire attentivement le message d'erreur qui indique la ligne.

Async Errors

async function fetchData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  console.log(data.users.length);
  // TypeError si data.users est undefined
}

Solution : Toujours vérifier la structure des données reçues.

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();

    if (data.users && Array.isArray(data.users)) {
      console.log(data.users.length);
    } else {
      console.error('Format de données invalide:', data);
    }
  } catch (error) {
    console.error('Erreur lors du fetch:', error);
  }
}

Workflow de débogage

Quand votre code ne fonctionne pas comme prévu :

1. Ouvrir la console

• Y a-t-il des erreurs en rouge ?
• Lire le message d'erreur et la ligne indiquée

2. Ajouter des console.log()

• Avant et après la zone problématique
• Afficher les valeurs des variables
• Confirmer que le code s'exécute

3. Utiliser un breakpoint

• Mettre en pause au bon endroit
• Inspecter les variables dans le panneau Scope
• Avancer pas à pas pour comprendre le flux

4. Tester dans la console

• Exécuter du code pour tester des hypothèses
• Modifier temporairement des valeurs
• Appeler des fonctions avec différents paramètres

5. Vérifier le Network

• Si le problème vient d'une API
• Vérifier le statut HTTP (200 = OK, 404 = Not Found, 500 = Erreur serveur)
• Inspecter les données reçues

Extensions DevTools utiles

React Developer Tools

Extension officielle pour déboguer les applications React :

• Voir l'arbre de composants
• Inspecter les props et le state
• Suivre les re-renders
• Analyser les performances

Installation : Chrome / Firefox

Redux DevTools

Si vous utilisez Redux pour la gestion d'état :

• Time-travel debugging
• Voir toutes les actions dispatchées
• Inspecter le state global

Bonnes pratiques

✅ À faire

• Toujours garder les DevTools ouverts pendant le développement
• Utiliser des messages console descriptifs : console.log('User data:', user) plutôt que console.log(user)
• Retirer les console.log() avant de committer le code
• Utiliser des breakpoints pour les bugs complexes
• Consulter la documentation (MDN) quand vous ne comprenez pas une erreur

❌ À éviter

• Ignorer les warnings (jaunes) dans la console
• Ne pas lire les messages d'erreur complètement
• Laisser des console.log() dans le code de production
• Utiliser alert() pour déboguer (bloque l'exécution)
• Ne jamais ouvrir les DevTools et coder "à l'aveugle"

Ressources