Saturday, June 15, 2019

How to debug Electron-vue in vscode

In this post, we will see how to debug Electron-vue app in vscode. At first, write the following in launch.js of .vscode folder.
{
   // 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"
           ]
       }
   ]
}
Then add debugger where you want to add a breakpoint.
function test (testVar) {
  debugger
  return readFile(testVar)
}
Please note that you can debug only the main process, not the renderer process.

Debug

After adding the debugger in the code, start the debug mode. Then start the app by $ npm run dev. You will see the process will be stopped in the compiled js file.

References

Posted by at