Le Déboguage (Debugging)

Le déboguage consiste à trouver, comprendre et corriger les erreurs dans un programme.

Même les développeurs expérimentés font du debugging tous les jours.

Le debugging est une compétence essentielle en programmation.

1. Pourquoi faire du debugging

Un programme peut produire :

• Des erreurs
• Des comportements inattendus
• Des mauvaises valeurs
• Des bugs difficiles à comprendre

Le debugging permet de comprendre ce qui se passe réellement dans le programme.

2. console.log()

La méthode console.log() est l’outil de debugging le plus utilisé.

const username = "Fred";

console.log(username);

console.log() permet d’afficher des valeurs dans la console du navigateur.

3. Vérifier une variable

console.log() est souvent utilisé pour vérifier le contenu d’une variable.

const age = 18;

console.log(age);

Cette technique aide à comprendre si une valeur est correcte.

4. Vérifier une fonction

Le debugging peut aussi servir à vérifier le résultat d’une fonction.

function add(a, b) {

    return a + b;

}

console.log(add(2, 2));

Ici, la console affiche le résultat retourné par la fonction.

5. Trouver une erreur logique

Certaines erreurs ne produisent pas de message, mais donnent un mauvais résultat.

function multiply(a, b) {

    return a + b;

}

console.log(multiply(2, 3));

Ici, la fonction contient une erreur logique : elle additionne au lieu de multiplier.

6. Lire les erreurs JavaScript

Quand une erreur survient, JavaScript affiche un message dans la console.

console.log(user);

Ce message indique que la variable n’existe pas.

7. Stack trace

Lorsqu’une erreur se produit, JavaScript affiche souvent une stack trace.

Une stack trace montre :

• Où l’erreur s’est produite
• Les fonctions appelées
• Le fichier concerné
• Le numéro de ligne

Lire une stack trace est une compétence importante.

8. Le debugger navigateur

Les navigateurs modernes possèdent des outils de debugging intégrés.

Dans Chrome :

• F12
• Onglet Console
• Onglet Sources
• Onglet Network

Ces outils permettent d’inspecter le code JavaScript et le DOM.

9. Les breakpoints

Un breakpoint permet de mettre le programme en pause.

Cela permet d’inspecter :

• Les variables
• Les fonctions
• Le flux du programme

Les breakpoints sont très utilisés dans les gros projets.

10. debugger

JavaScript possède aussi le mot-clé :

debugger;

Lorsque cette instruction est exécutée, le navigateur met le programme en pause.

function test() {

    debugger;

    console.log("Pause");

}

test();

11. Vérifier les types

Le debugging sert souvent à vérifier les types de données.

const age = "18";

console.log(typeof age);

12. Debugging du DOM

console.log() peut vérifier les éléments du DOM.

const button = document.querySelector("button");

console.log(button);

Cela permet de vérifier si un élément a bien été sélectionné.

13. null et undefined

Pendant le debugging, deux valeurs apparaissent souvent :

14. Debugging progressif

Une bonne technique consiste à ajouter plusieurs console.log() à différents endroits.

console.log("Début");

console.log(user);

console.log("Fin");

Cela aide à localiser précisément le problème.

15. Bonnes pratiques

• Lire les erreurs attentivement
• Tester une chose à la fois
• Vérifier les types de données
• Utiliser des console.log() clairs
• Supprimer les console.log() inutiles après le debugging

Résumé rapide