🐞 Deboguer facilement son code Javascript avec Visual Studio Code et Chrome

Dernière mise à jour : 30 Jun 2024

Exemple de fichier de configuration Visual Studio Code pour faire du debug de code NodeJS

Voici un exemple de configuration pour le débogage de code Node.js avec Visual Studio Code :

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug app.js",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/app.js",
            "cwd": "${workspaceFolder}"
        }
    ]
}

Ce fichier de configuration doit être enregistré dans votre workspace Visual Studio Code sous le nom .vscode/launch.json. Il permet de configurer une configuration de débogage pour Node.js.

Le paramètre type doit être défini sur node pour indiquer que la configuration concerne le débogage Node.js. Le paramètre request doit être défini sur launch pour indiquer que la configuration concerne le lancement d’un débogage.

Le paramètre program doit être défini sur le chemin d’accès complet vers le script Node.js à déboguer. Le paramètre cwd doit être défini sur le répertoire de travail courant (current working directory) à utiliser lors du débogage.

Pour plus d’informations sur la configuration de Visual Studio Code pour le débogage Node.js, consultez la documentation de Visual Studio Code.

Exemple de fichier de configuration Visual Studio Code pour faire le debug du code Javascript de mon navigateur chrome

Voici un exemple de configuration pour le débogage du code JavaScript d’un navigateur Chrome avec Visual Studio Code :

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/public"
        }
    ]
}

Ce fichier de configuration doit être enregistré dans votre workspace Visual Studio Code sous le nom .vscode/launch.json. Il permet de configurer une configuration de débogage pour le code JavaScript d’un navigateur Chrome.

Le paramètre type doit être défini sur chrome pour indiquer que la configuration concerne le débogage du code JavaScript d’un navigateur Chrome. Le paramètre request doit être défini sur launch pour indiquer que la configuration concerne le lancement d’un débogage.

Le paramètre url doit être défini sur l’URL de la page Web à charger dans le navigateur Chrome lors du débogage. Le paramètre webRoot doit être défini sur le répertoire racine des fichiers de code source JavaScript à déboguer.

Pour plus d’informations sur la configuration de Visual Studio Code pour le débogage du code JavaScript d’un navigateur Chrome, consultez la documentation de Visual Studio Code.

Exemple de fichier de configuration Visual Studio Code pour faire du debug de code Python

Voici un exemple de configuration pour le débogage de code Python avec Visual Studio Code :

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug app.py",
            "type": "python",
            "request": "launch",
            "program": "${workspaceFolder}/app.py"
        }
    ]
}

Ce fichier de configuration doit être enregistré dans votre workspace Visual Studio Code sous le nom .vscode/launch.json. Il permet de configurer une configuration de débogage pour Python.

Le paramètre type doit être défini sur python pour indiquer que la configuration concerne le débogage Python. Le paramètre request doit être défini sur launch pour indiquer que la configuration concerne le lancement d’un débogage.

Le paramètre program doit être défini sur le chemin d’accès complet vers le script Python à déboguer.

Pour plus d’informations sur la configuration de Visual Studio Code pour le débogage Python, consultez la documentation de Visual Studio Code.

Exemple de fichier de configuration Visual Studio Code pour faire du debug de script Bash

Voici un exemple de configuration pour le débogage de scripts Bash avec Visual Studio Code :

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug script.sh",
            "type": "bash",
            "request": "launch",
            "program": "${workspaceFolder}/script.sh"
        }
    ]
}

Ce fichier de configuration doit être enregistré dans votre workspace Visual Studio Code sous le nom .vscode/launch.json. Il permet de configurer une configuration de débogage pour les scripts Bash.

Le paramètre type doit être défini sur bash pour indiquer que la configuration concerne le débogage des scripts Bash. Le paramètre request doit être défini sur launch pour indiquer que la configuration concerne le lancement d’un débogage.

Le paramètre program doit être défini sur le chemin d’accès complet vers le script Bash à déboguer.

Pour plus d’informations sur la configuration de Visual Studio Code pour le débogage des scripts Bash, consultez la documentation de Visual Studio Code.

Exemple de fichier de configuration Visual Studio Code pour faire du debug de script Bash avec bashdb

Voici les étapes générales que vous devriez suivre pour configurer le débogage de scripts Bash dans Visual Studio Code:

  1. Assurez-vous d’avoir installé Visual Studio Code et bashdb sur votre ordinateur.

  2. Ouvrez Visual Studio Code et cliquez sur l’icône Extensions dans la barre latérale à gauche.

  3. Dans la zone de recherche en haut de la fenêtre, tapez bashdb et installez l’extension Bash Debug.

  4. Ouvrez le script Bash que vous souhaitez déboguer dans Visual Studio Code.

  5. Cliquez sur le bouton Debug dans la barre latérale à gauche, puis cliquez sur le bouton Configurer le débogueur en haut de la fenêtre.

Voici un exemple de configuration de fichier launch.json pour Visual Studio Code qui permet de déboguer des scripts Bash avec bashdb :

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Bash Script",
      "type": "bashdb",
      "request": "launch",
      "program": "${file}",
      "stopOnEntry": false,
      "cwd": "${workspaceFolder}"
    }
  ]
}

Pour utiliser cette configuration, placez le fichier launch.json dans le dossier .vscode de votre projet, puis ouvrez votre script Bash dans Visual Studio Code. Vous pouvez ensuite lancer le débogage en sélectionnant Debug Bash Script dans la liste des configurations de débogage et en cliquant sur le bouton Démarrer le débogage (ou en utilisant le raccourci clavier F5).