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 où aller chercher ce code 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 le chemin absolu vers soit le répertoire soit le fichier main.js du projet Electron que vous utilisez pour les tests. Dans cet exemple, il devrait s’agir 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.