Comments (7)
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.
from sapper-legacy.svelte.dev.
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
from sapper-legacy.svelte.dev.
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",
from sapper-legacy.svelte.dev.
@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
from sapper-legacy.svelte.dev.
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.
from sapper-legacy.svelte.dev.
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
from sapper-legacy.svelte.dev.
@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 [email protected]:sveltejs/template.git ./my-project
from sapper-legacy.svelte.dev.
Related Issues (19)
- Explain how state management (i.e. Store) works viz client/server
- Document %sapper.base%
- Document basepath behaviour
- Document `this.fetch` HOT 1
- Document dev/build/export/find_page APIs
- Intro has bad link HOT 2
- links to section chapters don't work HOT 2
- Tutorials HOT 3
- Document `preloading` property
- Document Rollup support
- Error while launching "npm run dev"
- Document how to use libraries that expect `window` HOT 3
- Document how export crawling works
- Borked styles on mobile
- Archive this repo and update the README
- Document preload
- npm run dev doesnt work
- Document CLI
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sapper-legacy.svelte.dev.