Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Breakpoints cannot be set on certain locations in Svelte generated code in V8 #12250

Open
connor4312 opened this issue Jul 1, 2024 · 1 comment
Milestone

Comments

@connor4312
Copy link

connor4312 commented Jul 1, 2024

Describe the bug

  1. clone the repo, it is a standard vite svelte project
  2. npm install
  3. npm run dev
  4. Set a breakpoint on count = 1 and debug, depending on what you're using...
    • In browser devtools, notice that the value of count is already 1 when the breakpoint is hit
    • In VS Code's debugger, the breakpoint is moved into generated code

Reproduction

See above

Logs

N/A.

This was reported on microsoft/vscode-js-debug#2029 and I commented on what's going on:

Here is the mapping [Svelte] creates:

image

When you set a breakpoint on counter = 1, that maps it to the binary expression being passed as an argument, as you would expect. However V8 cannot set a breakpoint here, so it moves it to the next available location, which is after the statement and before the closing brace. However, there are no sourcemap mappings on this line, so the debugger doesn't know where (or if) it has a location in the source file, and so it shows you the generated location it mapped to.

You can see the effects of the poor breakpoint placement in chrome devtools too: notice the count has already been incremented by the time you hit a breakpoint that should happen before it's executed. They just don't show you where the breakpoint actually ended up being placed, so the issue is hidden a bit 🙂 In this debugger I prefer to make such failures more obvious so a developer can figure out what's going wrong. There's nothing more frustrating that your debugger lying to you!

It would be better if Svelte kept the increment as its own expression statement and then added an unmapped $$invalidate statement afterwards, like

count  = 1;
$$invalidate(0, count);

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 34.72 GB / 63.93 GB
  Binaries:
    Node: 20.12.1 - ~\AppData\Local\fnm_multishells\49720_1719853531231\node.EXE
    Yarn: 1.22.22 - ~\AppData\Local\fnm_multishells\49720_1719853531231\yarn.CMD
    npm: 10.5.0 - ~\AppData\Local\fnm_multishells\49720_1719853531231\npm.CMD
    pnpm: 9.1.1 - ~\AppData\Local\fnm_multishells\49720_1719853531231\pnpm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.81)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    svelte:  4.2.18


### Severity

annoyance
@trueadm trueadm added this to the 5.x milestone Jul 2, 2024
@trueadm
Copy link
Contributor

trueadm commented Jul 2, 2024

Thanks for reporting this. We'll take a look in how we can improve the output in a future 5.x release :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants