electron-vue-template
electron-vue-template copied to clipboard
Suggestion: add debug information for VSCode
Hi @Deluze would it be possible to include the VSCode debug files (launch.json and tasks.json) in the template? If not, do you have any recommendations on how to create them?
Thank you very much in advance!
@Deluze, I managed to make debug partially work with the following launch.json file:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron: Main",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"runtimeArgs": [
"--remote-debugging-port=9223",
"."
],
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
},
"program": "${workspaceFolder}/src/main.ts",
},
{
"name": "Electron: Renderer",
"type": "chrome",
"request": "attach",
"port": 9223,
"webRoot": "${workspaceFolder}/src/renderer",
"timeout": 5000
}
],
"compounds": [
{
"name": "Electron: All",
"configurations": [
"Electron: Main",
"Electron: Renderer"
]
}
]
}
The Main process breakpoints are working well with this setup, after adding sourceMap: true to the src/main/tsconfig.json file (and running yarn run dev to compile the code and generate the source-maps). Maybe adding a command to only compile the code, instead of serving it may help, and we could add a task and use preLaunchTask to compile it before starting the debugger.
But I could not make the debugger run with the renderer process. I think the problem is that the renderer window directly uses the file renderer/index.html, which imports main.ts directly. Seems a way to solve it is always to compile the renderer/main.ts to JavaScript, generating the sourcemap and a separate index.html on the build directory, similar to that generated when we run yarn run build, and use this when starting the renderer window.
I hope it helps to add the debug layer to the template.
Best regards