🕵️ Developer toolbar/overlay for SvelteKit specific features

chvanam commented 1 year ago

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

@chvanam Have you found a tool ?

LorisSigrist commented 1 year ago

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

@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 😎

sveltejs / kit