How to debug Quasar Electron App with VS Code?

Menighin

Hi,
I’m searching for some help on debugging the node part of an Electron app build with quasar in VS Code.
I have tried the electron official documentation on it, but got no success: https://electronjs.org/docs/tutorial/debugging-main-process-vscode

My current config looks like:

{
	"version": "0.2.0",
	"configurations": [
	
		{
			"type": "node",
			"request": "launch",
			"sourceMaps": true,
			"cwd": "${workspaceRoot}",
			"name": "Electron Main",
			// "preLaunchTask": "npm: quasar build -m electron",
			"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
			"windows": {
				"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
			},
			"args" : ["."],
			"outputCapture": "std"
			// "program": "${workspaceFolder}/dist/electron/UnPackaged/electron-main.js"
		}
	]
}

If I uncoment the program part it “works”: I get the app started but I can’t hit any breakpoints (propably because it has been transpiled or something).

Any help?

Thanks!

DarkLite1

Same here, I followed the recommondations to set up the debugging wtihin vs code:

Add build: { devtool: 'source-map' to your `quasar.conf.js``
Create the debug launch.json:

{
    // 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": "chrome",
            "request": "launch",
            "name": "Quasar App: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "sourceMaps": true,
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/*"
            }
        }
    ]
}

Set breakpoints, see a new Chrome window being loaded, see your app but no breakpoints are hit.

Similar threads can be found here and here. So we’re not the only ones struggling with this.

I’m just creating a simple SPA, but for Electrons apps you might try:

quasar dev -m electron -- --remote-debugging-port=9222

or

quasar dev -m electron --inspect-brk

Maybe it’s only possible to debug the main process and you can’t stop the debugger in a component or in a router.js file for example. I have no idea, but I’ll keep looking and report back if I find something.

tdumitr

@DarkLite1 Do you have configuration that can debug the main process? If yes, would you mind posting it here?

DarkLite1

No, I’m sorry. This is as far as I got. For now I just use console.log('myVar ', myVar) for debugging.

tdumitr

@DarkLite1 Thank you for your feedback. I am not sure why one of the Quasar team is not posting a launch.json config. Surely they have one if only to debug their own development.

DarkLite1

They did post it n the docs. The only thing is, it doesn’t work for debugging everything or not for how we would like to use it.

charlieknoll

I found it helpful to View-Reload the electron app if you have breakpoints in the quasar/vue part of the app. This is some notes I took down for a vue/electron project. Maybe it will help: https://gist.github.com/charlieknoll/a2ee69befa846e17b69bdea12474cd73