No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to debug Quasar Electron App with VS Code?

    Help
    4
    7
    850
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      Menighin last edited by

      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!

      1 Reply Last reply Reply Quote 0
      • DarkLite1
        DarkLite1 last edited by DarkLite1

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

        1. Add build: { devtool: 'source-map' to your `quasar.conf.js``
        2. 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}/*"
                    }
                }
            ]
        }
        
        1. 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.

        T 1 Reply Last reply Reply Quote 0
        • T
          tdumitr @DarkLite1 last edited by

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

          1 Reply Last reply Reply Quote 0
          • DarkLite1
            DarkLite1 last edited by

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

            T 1 Reply Last reply Reply Quote 0
            • T
              tdumitr @DarkLite1 last edited by

              @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.

              1 Reply Last reply Reply Quote 0
              • DarkLite1
                DarkLite1 last edited by

                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.

                1 Reply Last reply Reply Quote 0
                • C
                  charlieknoll last edited by

                  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

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post