Déboguer JavaScript avec les DevTools et gérer les erreurs

Déboguer, c'est trouver pourquoi un programme ne fait pas ce qu'on attend, puis le corriger ; dans le navigateur, on s'appuie pour cela sur les outils de développement (DevTools) : la console, le débogueur et l'onglet Réseau. Ce chapitre montre comment lire un message d'erreur, poser un point d'arrêt et avancer pas à pas, analyser une requête, puis comment ton propre code doit lever et intercepter les erreurs avec throw et try…catch. La démarche générale (trace d'exécution, jeux d'essai) est expliquée dans le chapitre Trace d'exécution et débogage du cours d'algorithmique.

Ouvrir les outils de développement

F12, ou Ctrl + Maj + I (Windows, Linux), Cmd + Option + I (macOS). Les onglets portent des noms un peu différents selon le navigateur :

Les exemples de ce chapitre suivent Chrome et Edge, qui partagent les mêmes outils ; les fonctions existent sous un autre nom dans Firefox et Safari.

La console, au-delà de console.log

console.table(pieces);                 // le stock en tableau lisible
console.log({ quantite, seuil });      // { quantite: 3, seuil: 4 } au lieu de « 3 4 »

Dans la console de Chrome, $0 désigne l'élément sélectionné dans l'onglet Éléments : pratique pour tester $0.textContent ou $0.classList.

Avant de livrer, retire les console.log de débogage : ils encombrent la console et peuvent afficher des données que l'utilisateur n'a pas à voir.

Lire un message d'erreur

Quand une erreur n'est pas interceptée, le script s'arrête et la console affiche une ligne rouge qui contient le type d'erreur, un message et l'endroit (fichier et ligne, cliquables). En dessous, la pile d'appels (stack trace) indique quelle fonction a appelé quelle autre : lis-la de haut en bas, la première ligne qui pointe vers ton code est en général celle à corriger.

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at main.js:27:16

Les messages que tu rencontreras le plus souvent (formulation de Chrome, Edge et Node.js) :

Points d'arrêt et exécution pas à pas

Multiplier les console.log finit par être lent. Un point d'arrêt (breakpoint) met le programme en pause sur une ligne : tu vois alors la valeur de toutes les variables à cet instant, et tu avances instruction par instruction.

1. Ouvre l'onglet Sources, retrouve ton fichier dans l'arborescence (ou Ctrl + P pour le chercher par son nom).
2. Clique sur le numéro de ligne : un marqueur bleu apparaît.
3. Déclenche l'action (clique sur le bouton, recharge la page). L'exécution s'arrête avant cette ligne.
4. Survole une variable pour voir sa valeur, ou regarde le panneau Portée (Scope) à droite.
5. Avance avec les boutons de contrôle :

Quelques variantes très utiles :

• Point d'arrêt conditionnel (clic droit sur le numéro de ligne) : ne s'arrête que si une condition est vraie, par exemple p.ref === 'CHG-65' dans une boucle de 500 pièces.
• Point de journalisation (logpoint) : affiche un message dans la console sans modifier ton code, ni pause.
• Expressions surveillées (Watch) : une expression recalculée à chaque pas, comme etat.pieces.length.
• Pause sur exception : arrête l'exécution à l'endroit précis où une erreur est levée, avant qu'elle ne remonte.
• L'instruction debugger; dans ton code agit comme un point d'arrêt quand les outils de développement sont ouverts. Ne l'oublie pas avant de livrer.

Dans VS Code, tu peux poser les mêmes points d'arrêt directement dans l'éditeur : c'est le même mécanisme, utilisé aussi pour déboguer du Node.js.

L'onglet Réseau : inspecter les requêtes

Dès qu'un fetch est en jeu, l'onglet Réseau est le premier endroit où regarder. Filtre sur Fetch/XHR pour ne voir que les appels d'API, puis clique sur une requête :

Trois réglages en haut de l'onglet servent à tester ton code dans des conditions difficiles :

• Désactiver le cache, pour être sûr de voir la dernière version de tes fichiers.
• Limitation de bande passante (throttling) : choisis « 3G » pour voir ton message de chargement, ou « Hors connexion » pour vérifier que l'erreur réseau est bien gérée.
• Conserver le journal (Preserve log) : garde les requêtes après un rechargement ou un envoi de formulaire.

Une erreur CORS n'apparaît pas dans la réponse (JavaScript n'y a pas accès) mais dans la console, avec la raison exacte : has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header…. La correction se fait sur le serveur (CORS).

Gérer les erreurs : try, catch et throw

Les outils de développement servent à trouver tes bugs. Mais certaines erreurs ne sont pas des bugs : le réseau tombe, l'utilisateur saisit n'importe quoi, le stockage est plein. Ton code doit les prévoir.

throw lève une erreur : l'exécution s'arrête et remonte la pile d'appels jusqu'au premier try…catch qui l'intercepte.

function retirer(piece, n) {
  if (n > piece.quantite) {
    throw new Error(`Stock insuffisant pour ${piece.ref} : ${piece.quantite} disponible(s)`);
  }
  return { ...piece, quantite: piece.quantite - n };
}

try {
  const apres = retirer({ ref: 'RAM-16', quantite: 3 }, 5);
  console.log(apres.quantite);
} catch (erreur) {
  console.log(erreur.message);   // Stock insuffisant pour RAM-16 : 3 disponible(s)
} finally {
  console.log('Opération terminée');   // s'exécute dans tous les cas
}

Lève toujours un objet Error (ou d'une classe dérivée), jamais une simple chaîne (throw 'erreur') : un Error porte un nom, un message et la pile d'appels qui permet de retrouver son origine.

Les erreurs intégrées au langage ont des types différents, que tu peux tester avec instanceof ou erreur.name :

Tu peux créer tes propres types d'erreur avec une classe (chapitre 11) pour distinguer une erreur de validation, à montrer à l'utilisateur, d'une panne, à signaler autrement :

class ErreurValidation extends Error {
  constructor(champ, message) {
    super(message);
    this.name = 'ErreurValidation';
    this.champ = champ;
  }
}

try {
  throw new ErreurValidation('prix', 'Le prix est obligatoire');
} catch (erreur) {
  if (erreur instanceof ErreurValidation) {
    console.log(`Champ ${erreur.champ} : ${erreur.message}`);   // Champ prix : Le prix est obligatoire
  } else {
    throw erreur;   // pas une erreur prévue : on la laisse remonter
  }
}

En dernier recours, deux écouteurs globaux attrapent ce qui a échappé à tous les try…catch. Ils ne réparent rien, mais ils permettent d'afficher un message générique ou d'envoyer l'erreur à un outil de suivi :

window.addEventListener('error', (event) => {
  console.error('Erreur non interceptée :', event.message);
});
window.addEventListener('unhandledrejection', (event) => {
  console.error('Promesse rompue non interceptée :', event.reason);
});

Une méthode de débogage

1. Reproduire le bug à coup sûr : quelles actions, quelles données ? Un bug qu'on ne sait pas reproduire ne se corrige pas.
2. Lire le message d'erreur et la ligne indiquée, s'il y en a un.
3. Localiser : pose un point d'arrêt avant l'endroit suspect, vérifie les valeurs. Si tout est juste, avance ; sinon, remonte.
4. Formuler une hypothèse (« quantite est une chaîne ») et la vérifier, plutôt que modifier le code au hasard.
5. Corriger, puis retester le cas qui plantait et les cas qui marchaient déjà. Un test automatique (chapitre 14) évite que le bug revienne.

Pour l'E6, garde une trace des bugs marquants et de leur résolution : expliquer comment tu as trouvé un problème est un excellent sujet d'échange avec le jury.

Exercices

async function demarrer() {
  try {
    const pieces = await chargerPiecesApi('/api/pieces');
    afficherPieces(tbody, pieces);
    afficherResume(resume, pieces);
  } catch (e) {}
}

async function demarrer() {
  let pieces;
  try {
    pieces = await chargerPiecesApi('/api/pieces');
  } catch (erreur) {
    resume.textContent = `Impossible de charger le stock : ${erreur.message}`;
    console.error(erreur);
    return;
  }
  afficherPieces(tbody, pieces);
  afficherResume(resume, pieces);
}

function appliquerRemise(prix, taux) {
  if (typeof prix !== 'number' || Number.isNaN(prix)) {
    throw new TypeError(`Prix invalide : ${prix}`);
  }
  if (taux < 0 || taux > 50) {
    throw new RangeError(`Taux hors limites (0 à 50) : ${taux}`);
  }
  return prix * (1 - taux / 100);
}

try {
  console.log(appliquerRemise(89, 10));    // 80.10000000000001
  console.log(appliquerRemise(89, 70));
} catch (erreur) {
  console.log(`${erreur.name} : ${erreur.message}`);   // RangeError : Taux hors limites (0 à 50) : 70
}