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.49k stars 79 forks source link

Add component inspection button #166

Closed ljirari-decathlon closed 9 months ago

ljirari-decathlon commented 1 year 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 1 year 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 1 year ago

i mean this one :

image
WarningImHack3r commented 1 year 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 1 year 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 10 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 9 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 9 months ago

Sounds great! Thank you

GimpMaster commented 9 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 9 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 9 months ago

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