Déboguer comme un pro avec les outils intégrés de VS Code

Tout développeur JavaScript commence avec console.log(). C’est rapide, ça fonctionne et c’est familier. Mais lorsque vous traquez un bug à travers plusieurs appels de fonctions, des opérations asynchrones ou des changements d’état complexes, les logs dans la console deviennent un jeu de tape-taupe. Vous parsemez votre code d’instructions de log, vous recompilez constamment et vous passez encore à côté de la vue d’ensemble.

Le débogueur intégré de VS Code change la donne. Au lieu de deviner ce que fait votre code, vous pouvez mettre en pause l’exécution, inspecter les variables à n’importe quel moment, parcourir les fonctions ligne par ligne et comprendre exactement comment se comporte votre application. Cet article vous montre comment exploiter ces outils puissants pour le débogage JavaScript, TypeScript, React et Node.js — transformant des heures de frustration en quelques minutes de résolution de problèmes ciblée.

Configuration du débogage VS Code pour JavaScript et TypeScript

Création de votre configuration launch.json

Le cœur du débogage dans VS Code est le fichier launch.json. Appuyez sur F5 dans n’importe quel projet JavaScript, et VS Code vous invite à en créer un. Voici une configuration de base pour déboguer JavaScript dans VS Code :

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Current File",
      "program": "${file}",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Pour TypeScript, ajoutez la prise en charge des source maps à votre configuration :

{
  "type": "node",
  "request": "launch",
  "name": "Debug TypeScript",
  "program": "${file}",
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "sourceMaps": true,
  "skipFiles": ["<node_internals>/**"]
}

Contrôles de débogage essentiels

Une fois configuré, le débogage devient simple :

• Définir des points d’arrêt en cliquant à gauche de n’importe quel numéro de ligne (ou appuyez sur F9)
• Démarrer le débogage avec F5
• Passer au-dessus du code avec F10 (exécuter la ligne courante)
• Entrer dans les fonctions avec F11 (plonger dans les appels de fonction)
• Sortir avec Shift+F11 (terminer la fonction courante)

Le panneau Variables affiche toutes les variables locales et globales dans la portée. Le panneau Watch vous permet de suivre des expressions spécifiques. La pile d’appels (Call Stack) montre votre chemin d’exécution — inestimable pour comprendre comment vous êtes arrivé à un point particulier.

Techniques avancées de points d’arrêt

Points d’arrêt conditionnels

Faites un clic droit sur n’importe quel point d’arrêt et sélectionnez « Modifier le point d’arrêt » pour ajouter des conditions. Le débogueur ne s’arrête que lorsque votre condition est évaluée à true :

// Breakpoint condition: user.role === 'admin'
// Only stops for admin users

Logpoints : la meilleure alternative à Console.log

Les logpoints affichent dans la console de débogage sans arrêter l’exécution. Faites un clic droit dans la gouttière et sélectionnez « Ajouter un Logpoint ». Utilisez des accolades pour les expressions :

User {user.name} triggered action at {new Date().toISOString()}

Plus besoin de supprimer les console.logs avant de commiter — les logpoints n’existent que pendant votre session de débogage.

Débogage React avec l’intégration navigateur

Configuration du débogage navigateur pour React

Pour les applications React, utilisez le débogueur JavaScript intégré de VS Code (l’extension Debugger for Chrome est maintenant obsolète). Configurez-le pour les applications React utilisant Vite ou Create React App :

{
  "type": "pwa-chrome",
  "request": "launch",
  "name": "Debug React App",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/src",
  "sourceMaps": true
}

Démarrez votre serveur de développement (npm start), puis appuyez sur F5. VS Code lance Chrome et connecte le débogueur. Définissez des points d’arrêt directement dans vos composants React, inspectez les props et l’état, et parcourez les rendus — le tout depuis VS Code.

Débogage de l’état des composants React

Placez des points d’arrêt à l’intérieur des hooks useEffect, des gestionnaires d’événements ou des fonctions de composant. Le panneau Variables affiche les valeurs actuelles des props, de l’état et des dépendances des hooks. Utilisez la console de débogage pour tester des expressions dans le contexte actuel de votre composant.

Fonctionnalités du débogueur Node.js dans VS Code

Auto Attach pour un débogage rapide

Activez Auto Attach depuis la palette de commandes (Ctrl+Shift+P > « Toggle Auto Attach »). Réglez-le en mode « smart ». Désormais, tout processus Node.js démarré depuis le terminal de VS Code se connecte automatiquement au débogueur — aucune configuration nécessaire.

Débogage des opérations asynchrones

L’intégration du débogueur Node.js dans VS Code excelle dans le débogage asynchrone. Définissez des points d’arrêt à l’intérieur des fonctions async, des chaînes de Promises ou des callbacks. La pile d’appels montre clairement le chemin d’exécution asynchrone, facilitant le traçage à travers des flux asynchrones complexes.

Optimisation de votre workflow de débogage

Utilisation efficace de la console de débogage

La console de débogage n’est pas seulement pour l’affichage — c’est un REPL connecté à votre contexte d’exécution en pause. Testez des corrections, inspectez des objets ou appelez des fonctions directement :

// While paused at a breakpoint:
// > user.permissions
// ['read', 'write']
// > calculateTotal(cart.items)
// 45.99

Ignorer des fichiers pour se concentrer sur votre code

Ajoutez ceci à votre launch.json pour ignorer le code des bibliothèques :

"skipFiles": [
  "<node_internals>/**",
  "node_modules/**"
]

Le débogueur n’entrera pas dans ces fichiers, vous gardant concentré sur la logique de votre application.

Conclusion

Les outils de débogage de VS Code transforment la façon dont vous comprenez et corrigez le code. Au lieu de console.logs éparpillés, vous obtenez une vue complète de l’état de votre application à tout moment. Les points d’arrêt conditionnels et les logpoints réduisent le bruit du débogage. L’intégration navigateur apporte le débogage frontend dans votre éditeur. Auto Attach rend le débogage Node.js sans effort.

Commencez petit — remplacez votre prochain console.log() par un point d’arrêt. Parcourez le code. Inspectez les variables. Une fois que vous aurez expérimenté la clarté des outils de débogage appropriés, vous vous demanderez comment vous avez pu vous en passer. Le temps investi dans l’apprentissage de ces fonctionnalités est immédiatement rentabilisé par des corrections de bugs plus rapides et une compréhension plus approfondie du code.

FAQ

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.