Svelte 5 - VSCode Debugger reading rune values

[kerem-coemert]

Describe the bug

Hello,

I use VS Code and run npm run dev in the Debug: JavaScript Debug Terminal as suggested for Svelte. This has been working really well until now, but lately with my migration to Svelte 5 I have the following problem:

Reproduction

I have a .svelte file that has something like:

interface Props {
    queryState?: Partial<QueryState>
  }

  let {
    queryState = $bindable({}),
  }: Props = $props()

if I have a breakpoint to be able to see the value of queryState, I cannot do this in Svelte 5 but rather get:

queryState
ƒ (value, mutation) {
      if (arguments.length > 0) {
        if (!runes || !mutation || legacy_parent || is_store_sub) {
          setter(mutation ? getter() : value);
        }
        return value;
      } else {
        return getter();
      }
    }

get(queryState) or , $inspect(queryState), $state.snapshot(queryState) does not work either (in the latter case, I even get: The $staterune is only available inside.svelteand.svelte.js/ts files. What to do here? What is the recommended way to use the VSCode Debugger with Svelte 5? Thank you!

The only workaround that I have found is to run JSON.parse(JSON.stringify($$props.queryState)) in the debugger, which really sucks.

Logs

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13700H
    Memory: 7.19 GB / 31.69 GB
  Binaries:
    Node: 22.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (133.0.3065.69)
    Internet Explorer: 11.0.26100.1882

Severity

blocking an upgrade

[paoloricciuti]

So the problem here is that you are debugging the compiled code which is different since the compiler does some heavy lift...not sure really what we can do here. As a workaround for the moment you can take a look at how svelte is interacting with it...in this specific case you can just call queryState with 0 arguments to get the value, with 1 argument to set it (but that's from case to case)

[kerem-coemert]

I understand, that's unfortunate. Because in this case I think this would be a regression with the introduction of runes, because in Svelte 4 I could definitely use the debugger in this manner without problems (even by changing values through it and seeing how the rest of the code reacts after the breakpoint).

[ff-ils]

I think this should be handled by the official svelte-code extension. I opened a request and made a workaround (in the request) sveltejs/language-tools#2703

[kerem-coemert]

Perfect, thank you! Looking forward to the PR being merged.