05 Jun 2019

VS Code debugging with Quasar framework

Dipping my toes into yet another JS framework, I'm investigating Quasar, which seems to offer a comprehensive and well-documented set of UI components. to work with.

But I'm a total n00b about JS, HTML, CSS. And this is a strongly distributed application, so I need robust debugging capability in both the server and the client. And I've fallen in love with VS Code and want to stay within its warm embrace for as much of the development experience as I can.

So, how to set myself up to do nice source level debugging with this pile of technology? I started with the Vue cookbook, but needed a few hints from the collective wisdom of the internet. Here is my gloss on that research...

In VSCode, add extension Debugger for Chrome.
I want to investigate using browser's own dev tools, now that I know how to get source maps.
Start with a project folder built by quasar create <folder>
In .vscode/launch.json, define a debug configuration for running the project which allows the debugger in the browser to find the source folder of the project:

{
      "type": "chrome",
      "request": "launch",
      "name": "Debug Quasar",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",    // <--  Changed here
      "breakOnLoad": true,
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"  // <-- and here
      }
 }

I've read that the breakOnLoad is needed for Vue, but haven't tried without it.

Do a manual build to set debug flavor. Do this once, outside of VS Code and subsequent hot reloads from within VS Code will remember it. Debug flavor builds source maps (and probably does other things I don't know about but am depending on...).

> quasar build --debug

Now you're set.
1. Open VS Code
2. Start a debug session and open the browser on the dev site
3. Set a breakpoint on some executable code and observe the breakpoint is hit and variables are available for examination.
4. Hack at the sources
5. Observe hot reload updates as needed.

web-apps