Le débogage en Javascript expliqué simplement

Accéder aux outils développeur

Tous les navigateurs web modernes embarquent des outils développeur (souvent appelés DevTools). Pour y accéder et commencer votre session de débogage, plusieurs solutions s’offrent à vous :

• Faire un clic droit n’importe où sur votre page web et sélectionner Inspecter.
• Utiliser le raccourci clavier F12.
• Utiliser le raccourci Ctrl + Maj + I (ou Cmd + Option + I sur Mac).

Une fois le panneau ouvert, deux onglets vont particulièrement nous intéresser pour le débogage JavaScript : l’onglet Console et l’onglet Sources.

Exploiter tout le potentiel de la console JS

La console JS est souvent le premier outil que l’on découvre. Elle affiche les erreurs générées par votre script, mais elle permet d’aller bien plus loin qu’un simple affichage de texte basique.

Différencier les types de messages

Au lieu d’utiliser systématiquement console.log(), vous pouvez catégoriser vos messages pour mieux vous y retrouver lors de l’exécution de vos scripts :

// Pour une information classique
console.log("Le script a démarré.");

// Pour signaler un comportement inattendu mais non bloquant
console.warn("Attention, cette variable est vide.");

// Pour signaler une erreur critique
console.error("Impossible de charger les données de l'utilisateur.");

Afficher des données structurées

Si vous travaillez avec des tableaux ou des objets complexes, la lecture dans la console peut rapidement devenir fastidieuse. La méthode console.table() permet d’afficher ces données sous forme de tableau interactif et lisible :

const utilisateurs = [
    { nom: "Alice", role: "Admin" },
    { nom: "Bob", role: "Éditeur" }
];

console.table(utilisateurs);

Utiliser le debugger Chrome (Onglet Sources)

La véritable puissance du débogage JavaScript réside dans l’onglet Sources (ou Débogueur sur Firefox). Cet outil permet d’arrêter l’exécution de votre code à un moment précis pour analyser l’état de votre application en temps réel.

Créer un bug volontaire pour s’entraîner

Imaginons la fonction suivante, censée calculer le prix total d’un panier, mais qui contient une erreur logique (une addition au lieu d’une multiplication) :

function calculerTotal(prixUnitaire, quantite) {
    let total = prixUnitaire + quantite; // Le bug est ici !
    return total;
}

let prixFinal = calculerTotal(15, 3);
console.log("Le prix final est de :", prixFinal);

Si vous exécutez ce code, la console affichera 18 au lieu de 45. Voyons comment trouver la cause exacte du problème sans modifier tout notre code.

L’instruction magique : debugger

Pour forcer le navigateur à mettre le code en pause, vous pouvez insérer le mot-clé debugger; directement dans votre script :

function calculerTotal(prixUnitaire, quantite) {
    debugger; // L'exécution s'arrêtera sur cette ligne
    let total = prixUnitaire + quantite;
    return total;
}

Rechargez votre page avec les outils développeur ouverts. Le navigateur va figer la page et basculer automatiquement sur l’onglet Sources. C’est ce qu’on appelle un point d’arrêt (ou breakpoint).

Naviguer dans le code pas à pas

Une fois le code en pause, le debugger Chrome vous offre plusieurs contrôles situés en haut à droite du panneau d’inspection, vous permettant de dérouler l’exécution à votre rythme.

Inspecter les variables en temps réel

Passez simplement la souris sur les variables prixUnitaire et quantite dans votre code. Une petite infobulle apparaîtra pour vous indiquer leurs valeurs actuelles (15 et 3). Vous pouvez également consulter le panneau latéral « Scope » (Portée) pour voir toutes les variables disponibles et leurs valeurs à cet instant précis.

Avancer ligne par ligne

Utilisez le bouton Step over next function call (souvent représenté par une flèche courbée passant au-dessus d’un point, ou le raccourci F10). Cela permet d’exécuter la ligne actuelle et de s’arrêter sur la suivante.

En avançant d’une ligne, la variable total est calculée. En l’inspectant, vous verrez qu’elle vaut 18. Vous comprenez alors immédiatement que l’opération mathématique exécutée n’est pas la bonne, sans avoir eu besoin de polluer votre code avec des dizaines de logs.

Erreurs fréquentes lors du débogage

Voici quelques pièges classiques à éviter lorsque vous débutez avec ces outils :

• Oublier d’ouvrir les outils développeur : L’instruction debugger; ne fonctionne que si le panneau d’inspection est ouvert. Dans le cas contraire, le navigateur l’ignore tout simplement.
• Laisser des points d’arrêt en production : N’oubliez pas de retirer vos instructions debugger; avant de mettre votre site en ligne, au risque de bloquer l’expérience de vos utilisateurs s’ils ont leur console ouverte.
• Se tromper de fichier : Assurez-vous d’inspecter le bon fichier JavaScript, particulièrement si vous utilisez un système de cache ou si vos fichiers sont minifiés.

Conclusion

Le débogage JavaScript est une compétence fondamentale pour tout développeur web. En remplaçant progressivement vos affichages textuels par l’utilisation de la console JS avancée et du debugger Chrome, vous allez gagner un temps précieux en efficacité et en précision.

N’hésitez pas à explorer l’onglet Sources lors de votre prochain projet : placez un point d’arrêt, inspectez vos données et prenez le contrôle total sur l’exécution de vos scripts pour traquer le moindre comportement inattendu.