🕵️ Developer toolbar/overlay for SvelteKit specific features
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by narrowing the proposed toolbar into a defined first scope, such as routing details, load timing, submitted FormData, or HTTP status and caching information. Evaluate whether a Vite plugin is an appropriate implementation path, and define the user-visible behavior and acceptance criteria before choosing an entry point.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- developer-experience, devtools
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100