Aller au contenu principal

Débogage dans VSCode

Ce guide explique comment configurer le débogage de VSCode pour votre propre projet Electron ainsi que pour la base de code natif d'Electron.

Débogage de votre application Electron​

Processus principal​

1. Ouvrez un projet Electron dans VSCode.​

$ git clone git@github.com:electron/electron-quick-start.git
$ code electron-quick-start

2. Ajoutez un fichier .vscode/launch.json avec la configuration suivante :​

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."],
      "outputCapture": "std"
    }
  ]
}

3. Débogage​

Définissez des points d’arrêt dans main.js et démarrez le débogage dans la Vue de Debug. Vous devriez être en mesure maintenant d’atteindre vos points d’arrêt.

Voici un projet pré-configuré que vous pouvez télécharger et déboguer directement dans VSCode : https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start

Débogage du code de base d'Electron​

Cette section vous aidera à tester vos modifications si vous souhaitez générer Electron à partir des sources et modifier le code natif de base d'Electron. .

Si vous ne savez pas comment vous approprier ce code ou comment le générer, Electron's Build Tools automatise et explique la plupart de ce processus. Si vous souhaitez configurer manuellement l’environnement, vous pouvez utiliser ces instructions de génération.

Windows (C++)​

1. Ouvrez un projet Electron dans VSCode.​

$ git clone git@github.com:electron/electron-quick-start.git
$ code electron-quick-start

2. Ajoutez un fichier .vscode/launch.json avec la configuration suivante :​

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "(Windows) Launch",
      "type": "cppvsdbg",
      "request": "launch",
      "program": "${workspaceFolder}\\out\\your-executable-location\\electron.exe",
      "args": ["your-electron-project-path"],
      "stopAtEntry": false,
      "cwd": "${workspaceFolder}",
      "environment": [
          {"name": "ELECTRON_ENABLE_LOGGING", "value": "true"},
          {"name": "ELECTRON_ENABLE_STACK_DUMPING", "value": "true"},
          {"name": "ELECTRON_RUN_AS_NODE", "value": ""},
      ],
      "externalConsole": false,
      "sourceFileMap": {
          "o:\\": "${workspaceFolder}",
      },
    },
  ]
}

Notes sur la configuration

  • cppvsdbg nécessite que l'extension intégrée C/C++ soit activée.
  • ${workspaceFolder} est le chemin complet vers le répertoire src de Chromium.
  • your-executable-location sera l'un des éléments suivants selon le cas:
    • Testing: Si vous utilisez les paramètres par défaut de Electron's Build-Tools ou les instructions par défaut lors de la compilation à partir du source.
    • Release: Si vous avez générerez une version Release plutôt qu’une version Testing.
    • your-directory-name: Si vous avez modifié cela au cours de votre processus de génération par rapport à la valeur par défaut, ce sera donc ce que vous avez spécifié.
  • La chaîne "your-electron-project-path" du tableau args doit être un chemin absolu pointant soit vers le fichier main.js du projet Electron utilisé pour les test, soit vers son répertoire. Dans cet exemple, il s’agira de votre chemin d’accès à electron-quick-start.

3. Débogage​

Définissez d'abord quelques points d'arrêt dans le code natif Electron C++ et commencez à déboguer dans la Vue débogage.