Open Rich-Harris opened 6 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.
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
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.
@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
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
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",
@Rich-Harris is there any particular reason why this issue is still open? adding
"debug.allowBreakpointsEverywhere": true
tosettings.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
See https://github.com/sveltejs/sapper/pull/436