Comment déboguer Electron-vue avec VSCode

Dans ce billet, nous allons voir comment déboguer un application de Electron-vue avec VSCode. D’abord,  écrire comme ceci sur launch.js de ".vscode".

{
   // Use IntelliSense to learn about possible attributes.
   // Hover to view descriptions of existing attributes.
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
       {
           "type": "node",
           "request": "attach",
           "name": "Attach to electron main",
           "port": 5858,
           "timeout": 30000,
           "sourceMaps": true,
           "outFiles": [
             "${workspaceRoot}/src/main/index.js"
           ]
       }
   ]
}

Et ajouter debugger où nous voulons stopper l'exécution.

function test (testVar) {
  debugger
  return readFile(testVar)
}

Notez que nous pouvons débugger le processus de "main", pas de "renderer".

Débugger

Après ajouter le debugger dans le code, commencer le débogage. Et commencer l'application par $ npm run dev. Nous allons voir l’exécution va se stopper où nous avons ajouté le debugger.

Références

https://github.com/SimulatedGREG/electron-vue/issues/493#issuecomment-463139588