Why can I not inspect javascript variables when paused on a Svelte breakpoint

Question

This is Svelte-specific.

In either Chrome or Edge DevTools, when pausing on a breakpoint on some line of javascript between script tags, we can inspect variable values in the Watch list. But when I place a breakpoint on an area of the body where Svelte is handling DOM-generation, none of my component's variables are inspectable. They all say "not available". This makes it really hard to debug a problem our #if/#each, etc.. type blocks. See pic below. Why is this happening, and what can I do to see these variable values as they are being processed by Svelte's #each command?

Answer 1

The compiled output of Svelte files is vastly different than the source. Setting breakpoints in the source relies on source maps which try to map the output back to the source location, but there is no guarantee that any of the variables exist or are named the same.

Eg you will often see ctx[0] , ctx[1] , etc. in the output as that stores the component state. Personally, I disable source maps for that reason and work directly with the output. That is a bit inconvenient but you see exactly what the code is.

You can turn source maps off in the settings.

Or open the command palette (something like Ctrl + Shift + P) and type source maps to find a command to toggle it.

The source file should also have a button that lets you jump to the compiled output, if you just want to look at it temporarily to see what is there. I think it is somewhere in the status bar at the bottom.

You can also check the Scope section in the same sidebar as Watch . It also shows all variables that are currently in scope. You may have to extend various parent scopes. Eg you can see a create_each_block function in your screenshot.