-
-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Svelte DevTools: a discussion #2931
Comments
my main request is a way to identify exact location of syntax errors |
A very naive remark (as I'm pretty ignorant on the topic) :
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. |
Previous discussion on this for reference: #695. |
When do you think you will publish? |
I need #3005 to be merged before I can publish |
@RedHatter The PR is now merged, you'll keep working on the dev tools? |
I have been. In fact version 1.0 has been published svelte-devtools for Firefox the chrome version is still under review. |
Now live in chrome |
The chrome version was released a few weeks ago. Checkout the repo for more information. |
Would be nice to have a target select like react dev tools. |
You can use the browser inspectors element select button when you switch back to the svelte tab the corresponding node will be selected. |
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.
Proposed svelte modifications
It would take surprisingly few modifications to svelte make the instrumentation step unnecessary and increase stability in general.
create_if_block
,create_each_block
, etc)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.
insert
,listen
,detach
, etc). This would eliminate the need to replace native DOM methods.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.The text was updated successfully, but these errors were encountered: