🕵️ Developer toolbar/overlay for SvelteKit specific features

[chvanam]

Describe the problem

Some SvelteKit specific data can be hard to log/debug. A debug toolbar or overlay could help onboard new developers to SvelteKit.

Describe the proposed solution

I think a developer toolbar/overlay for SvelteKit showing some of the points below could be helpful and boost productivity:

• HTTP Status codes
• Advanced routing info (slug values, rest parameters, matchers ...)
• Time of data loading (could help identify bottlenecks in the different load functions)
• FormData that gets submitted with the current page/request/form submission
• HTTP Caching behaviour
• ...

I'm partly taking inspiration from the Symfony's Web Debug Toolbar.

Would this be useful ? How could this be implemented, maybe as a vite plugin?

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

[stephane-klein]

@chvanam Have you found a tool ?

[LorisSigrist]

+1
The Symfony toolbar is absolutely fantastic.

Given that SvelteKit can have some fairly complex data-loading, with all the hooks, layouts and load actions, having a toolbar shining light through all that would be wonderful. It would make the framework even more accessible to newcomers. Performance issues would also be a lot easier to identify.

[chvanam]

@chvanam Have you found a tool ?

Unfortunately no. But I guess the Svelte Inspector is a step forward for the Svelte part, now we need a SvelteKit inspector 😎

[lucianoratamero]

I was trying nuxt lately, and their dev toolbar is such a nice addition.
I would be 100% a volunteer on working on something like this, but I'm pretty sure we'd need additions to both the sveltekit and the vite-plugin-svelte-inspector (which is probably the best place to implement it).

Does anyone have ideas on how this would go? If not, I can try to reverse engineer how nuxt does it, and fiddle around with it locally.