Svelte: Svelte DevTools: a discussion

[RedHatter]

I've spent the past week creating developer tools for svelte. It currently supports exploring the hierarchy of components/elements/blocks, viewing and modifying state and props, viewing event handlers, and more. I plan on continuing to add features in the coming weeks.

I'm opening this issue to propose a simple interface for svelte to allow tools to obtain debug information on svelte applications (that have been built with a debug flag). I would be happy to make the modifications myself, but I wanted to get the go ahead before I started working on the PR.

Current approach

In order to interface with svelte I intercept all requests for scripts and run a few RegExs on the contents. This works, but has a few downsides.

1. Any modifications to the generated svelte code have a good chance of preventing the instrumentation from working. This potentially includes minifiers, bundlers other than rollup, babel, etc.
2. A future release of svelte could very easily break the instrumentation as it relies on exact knowledge of generated code.
3. Naming conflicts, random failures, and other issues caused by users code are very possible. I've tried to minimize this where possible.

Proposed svelte modifications

It would take surprisingly few modifications to svelte make the instrumentation step unnecessary and increase stability in general.

1. Notification of component initialization
2. Notification of block creation (create_if_block, create_each_block, etc)
3. A way to set internal component state. Basically the same as Component.$set but not limited to props, able to set any state variable.

From that point anything else can be determined by patching component objects or replacing DOM methods (appendChild, addEventListener, etc)

My instrumentation approach makes use of custom events to send the notifications but there are alternatives if desired.

More extensive modifications

While not strictly necessary other modifications might be a good idea.

1. Notifications in various functions that interact with the DOM (insert, listen, detach, etc). This would eliminate the need to replace native DOM methods.
2. Notifications in the c, m, d, etc functions of components and blocks. This might eliminate the need to patch component objects. More experimentation is required to know if this would work.

[bionicles]

my main request is a way to identify exact location of syntax errors

[0gust1]

A very naive remark (as I'm pretty ignorant on the topic) :

Svelte DevTools works by intercepting and instrumenting the generated svelte bundle

Wouldn't a better approach to work at the compiler level ? I have the feeling that your proposition is about this, but I'm not sure.
It would be awesome to have clear and identified hooks/extension points in the compiler to enable people to plug their devtools (we can imagine very nice things for svg or webgl rendering spaces).

[RedHatter]

Wouldn't a better approach to work at the compiler level ? I have the feeling that your proposition is about this, but I'm not sure.

Right. That's exactly what I'm proposing.

[pngwn]

Previous discussion on this for reference: #695.

[quantuminformation]

When do you think you will publish?

[RedHatter]

I need #3005 to be merged before I can publish

[equinusocio]

@RedHatter The PR is now merged, you'll keep working on the dev tools?

[RedHatter]

I have been. In fact version 1.0 has been published svelte-devtools for Firefox the chrome version is still under review.

[quantuminformation]

Now live in chrome

[RedHatter]

The chrome version was released a few weeks ago. Checkout the repo for more information.

[quantuminformation]

Would be nice to have a target select like react dev tools.

[RedHatter]

You can use the browser inspectors element select button when you switch back to the svelte tab the corresponding node will be selected.