How to identify Svelte components in Chrome DevTools? #15189
-
|
We're working on a large SvelteKit project, and managing all the different components in DevTools can be tricky. Is there a way to see which Svelte component a given DOM element originates from when inspecting it in Chrome DevTools? For example, something like this:
Has anyone found a good way to solve this? Any best practices or tools to make component debugging easier? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
The correct answer is probably https://github.com/sveltejs/svelte-devtools but it looks like it hasn't been updated to support Svelte 5 sveltejs/svelte-devtools#193 |
Beta Was this translation helpful? Give feedback.
-
|
If you just want to find a component, there is the Vite plugin inspector. When configured and activated, it shows which component an element belongs to and (if no custom backend integration is used) will open the file on click.
|
Beta Was this translation helpful? Give feedback.
-
|
O-M-G |
Beta Was this translation helpful? Give feedback.
-
|
i am so glad i decided to read the discussions for no reason today, thank you! |
Beta Was this translation helpful? Give feedback.
If you just want to find a component, there is the Vite plugin inspector. When configured and activated, it shows which component an element belongs to and (if no custom backend integration is used) will open the file on click.