love the idea of a dev toolbar

a few ideas ive had in my wish list for dev-only debugging/warnings:

Warning about LCP images once the page loads similar to the Next.js Image component (Related: Add Warning in Docs about Lazy Loading and LCP #9, https://github.com/vercel/next.js/blob/7418b26d8a27feb6925e488ac4e0c30ad15a3346/packages/next/src/shared/lib/get-img-props.ts#L570-L605)
Log the value of the x-cld-error header when an image has an error (related: [Feature] Log X-Cld-Error header in dev mode next-cloudinary#512)
There's a Cloudinary Chrome Extension that could be used for inspiration: https://chromewebstore.google.com/detail/cloudinary-media-inspecto/ehnkhkglbafecknplfmjklnnjimokpkg
Show the file size, format, and rendered dimensions

the editing capabilities seem interesting, but im thinking about what that woudl look like from a workflow perspective. if i wanted to make a change to an image, i would want to be able to save those changes, so would i copy a code snippet? what if i already have a value for that transformation? would i have some kind of field editor? just something to think about. could get complicated, but an interesting thread to pull

are there any existing toolbars that you've seen that i could check out as examples of what this sort of thing looks like?

I would imagine it would be handy to be able to enable/disable debug features, could store those in localstorage for in-UI toggling for people or even have flags in the configuration itself (or both)

can't help but wonder if there is any potential to develop any of the toolbar in a framework agnostic way so that we ecould take advantage of it in other frameworks, but that might be out of scope for getting a v1 😁

[Feature] Dev Toolbar #31

Description

Describe the solution you'd like

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions