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

A Proposal for Making Components Visible in the Developer Tools #695

Closed
shancarter opened this issue Jul 7, 2017 · 9 comments
Closed

A Proposal for Making Components Visible in the Developer Tools #695

shancarter opened this issue Jul 7, 2017 · 9 comments

Comments

@shancarter
Copy link

For debugging it's often quite nice to be able to inspect the state (data) of a component in the web inspector. While something like this is certainly nice, I had a weird idea for a low-dollar alternative. If svelte had a debug mode it could add a comment node for each component,

image

and then could bind the current component object to a property of that comment node, allowing you to highlight it in the inspector and interact with it in the console.

image

Might be dumb, dunno.

@Rich-Harris
Copy link
Member

I can see that making sense in dev mode. Though now I'm wondering what would be involved in creating a svelte-devtools package...

@shancarter
Copy link
Author

Yeah, probably worth doing it the right way from the start.

@Rich-Harris
Copy link
Member

It occurred to me while working on #811 that custom elements may give us an inexpensive solution to this problem:

screen shot 2017-09-03 at 9 33 00 am

In this example we're not explicitly creating any custom elements — the only difference is that we're compiling with the customElement: true option. Because of that, the components are also custom elements, and the inspector will use the name they're defined with when displaying tags. And we can easily inspect/set data by selecting elements and either using accessors or the component API.

So you can imagine e.g. compiling to custom elements while developing, then turning it off for production. Given that custom elements are (presumably) going to become more and more commonplace, it arguably makes sense to invest in this workflow rather than investing in separate devtools as other frameworks have.

The one major caveat is that styles don't work exactly the same, because shadow DOM has true encapsulation. That might be a dealbreaker. Not sure.

@shancarter
Copy link
Author

shancarter commented Sep 3, 2017 via email

ekhaled added a commit to ekhaled/svelte-hot-loader that referenced this issue Jan 8, 2018
@ekhaled
Copy link
Contributor

ekhaled commented Jan 8, 2018

Don't know how relevant this is right now....
While working on svelte-hot-loader I had to add comment markers to the DOM when a component is mounted, just so that we can re-mount in the same location after a hot-update.

I saw this issue, and realised it was trivial to add what is being proposed.

The caveats for now are:

  1. You have to be using webpack with HMR plugin
  2. You have to be using svelte-hot-loader

Although in the future I might make this available for Rollup (if there is demand).

screen shot 2018-01-08 at 16 54 44

@equinusocio
Copy link

equinusocio commented Mar 1, 2019

What about something like Vue and React Dev Tools extension?
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

@maciej-trebacz
Copy link

Lack of Vue-like dev tools extension is probably the only thing that keeps be from committing to using Svelte in bigger projects. Any idea if/when this will be worked on?

@pngwn
Copy link
Member

pngwn commented Jul 23, 2019

Closing this in favour of #2931 as it contains more recent information and the author of that thread has made some progress on some kind of browser based developer tooling.

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

7 participants