Document debugging in Chrome and VSCode

[Rich Harris]

See sveltejs/sapper#436

[Jesse Sivonen]

I cannot add breakpoints in a Svelte components using Debugger for Chrome VSCode extension. It seems that it doesn't know about Svelte yet and I can't figure out if there's a configuration for including file extensions for the debugger to use. I can use debugger statements and it breaks and maps it nicely.

[Jesse Sivonen]

Adding the following configuration did the trick. For some reason Chrome debugger doesn't allow placing breakpoints in HTML files by default.

"debug.allowBreakpointsEverywhere": true

[Mateo Wang]

One thing that might help to get this to work is adding Launch Chrome against localhost default webRoot to "${workspaceFolder}/src". That fixed the "Breakpoint set but not yet bound" error for me.

[Mateo Wang]

@Rich-Harris is there any particular reason why this issue is still open? adding "debug.allowBreakpointsEverywhere": true to settings.json and

{
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5000",
      "webRoot": "${workspaceFolder}/src"
}

to launch.json (with the Debugger for Chrome extension) seems to get debugging Svelte working

[Francisco Bernardo]

Hi all,

I can debug a Svelte app with the VSCode debugger with the configuration.

"debug.allowBreakpointsEverywhere": true

However, I'm not able to debug on VSCode when a "${workspaceFolder}/ has a svelte component that lives on the src folder, and the demo sapper app for that component lives in a sibling directory (for instance, this project structure.

Does anyone have a working configuration for this kind of project setup? Am I missing something in the configuration? How do I make sure the current build is configured to generate source maps?

Thanks

[milkbump]

CC @frantic0. A good place to start when the Chrome VScode debugger is not playing well with your new set up is the debugger's repo README, especially the general things to try if you're having issues section.

Note the tips offered relevant to your current setup.

This extension ignores sources that are inlined in the sourcemap

Sapper's rollup setup uses inline source maps by default. Try switching to external ones:

// rollup.config.js
output: {
    ...config.client.output(),
    sourcemap: true,
}

If you use a url, set webRoot to the directory that files are served from.

// launch.json
"webRoot": "${workspaceFolder}/demo/__sapper__/dev/client",

[readandwrite864]

@Rich-Harris is there any particular reason why this issue is still open? adding "debug.allowBreakpointsEverywhere": true to settings.json and

{
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5000",
      "webRoot": "${workspaceFolder}/src"
}

to launch.json (with the Debugger for Chrome extension) seems to get debugging Svelte working

For me adding "/src" part to webRoot property was enough

P. S. I'm using svelte template:

git clone --depth 1 [e-mail]:sveltejs/template.git ./my-project