search

sveltejs / sapper-legacy.svelte.dev

Old docs site for Sapper
https://sapper-legacy.svelte.dev/
Other
13 stars 22 forks source link

Document debugging in Chrome and VSCode #37

Open Rich-Harris opened 6 years ago

Rich-Harris commented 6 years ago

See https://github.com/sveltejs/sapper/pull/436

joas8211 commented 5 years ago

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.

joas8211 commented 5 years ago

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
SwiftWinds commented 4 years ago

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.

SwiftWinds commented 4 years ago

@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

frantic0 commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

@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 git@github.com:sveltejs/template.git ./my-project