search

sveltejs / svelte-devtools

A browser extension to inspect Svelte application by extending your browser devtools capabilities
https://chromewebstore.google.com/detail/svelte-devtools/kfidecgcdjjfpeckbblhmfkhmlgecoff
MIT License
1.42k stars 78 forks source link

Add component inspection button #166

Closed ljirari-decathlon closed 6 months ago

ljirari-decathlon commented 9 months ago

Describe the bug Hi, i've built the last version availabe on master branch but i don't have the component selector.

image
ignatiusmb commented 9 months ago

The inspector 'button' is disabled for components as there's no equivalent DOM node it can inspect on the 'elements' tab, but it's still referenced in the console with $n when you select the component, is that what you're looking for?

ljirari-decathlon commented 9 months ago

i mean this one :

image
WarningImHack3r commented 8 months ago

@ljirari-decathlon I agree it would be useful but it's not a bug, it's just not part of the DevTools. Just look at the image in the README, nothing is missing.

ignatiusmb commented 8 months ago

This will come as a new feature in the upcoming updates, it wasn't included in the initial v2 release to make sure we can get it published as soon as possible.

GimpMaster commented 6 months ago

@ignatiusmb - Looking forward to this feature. One thing I find annoying with sveltekit applications if I have to go an expand so many items just to get down into a single component. If there was a picker that I could click on and then choose a component or element in the rendered view that would auto-expand everything, that would be amazing.

Essentially thats how I work with normal inspector dev tools. I don't want to expand all the collapsed items, I just click in the general area of what I want to look at with the selector and BAM, its open to approximate area.

ignatiusmb commented 6 months ago

@GimpMaster thank you for the comment and use case, I can understand that having faced the exact same situation while working on a couple of SvelteKit apps and even this extension itself.

I was planning to add Firefox support on the next minor release https://github.com/sveltejs/svelte-devtools/issues/177#issuecomment-1827792106, but I think I'll cut a quick release to get this one out first as it's getting annoying for most of us using the extension extensively.

GimpMaster commented 6 months ago

Sounds great! Thank you

GimpMaster commented 6 months ago

Before I forget, one thing I also noticed was that the Collapse icon was not expanding the tree. I think I could only click on the (...) to expand the tree.

ignatiusmb commented 6 months ago

[...] the Collapse icon was not expanding the tree.

If it's the one on the left side of the element, I can see how it's not that intuitive since the native devtools can click on it to toggle the expand/collapse state, but we use double-clicks to do those. Otherwise, I don't think we have another collapse icon.

We may be getting off-topic here, could you please open an issue if that's what you meant, thanks.

GimpMaster commented 6 months ago

Ah, yeah I was only ever trying single click not double click since that is how regular dev tools area.