I do a lot of quick UI audits and handoffs, and most of the time I don’t need full DevTools.
I just want to answer questions like:
What images are being used?
Which fonts are loaded?
What CSS files are active?
Opening DevTools every time felt heavy for that use case, so I experimented with a pure client-side approach.
What I explored
Traversing the DOM to collect image sources
Reading document.styleSheets to extract CSS rules
Parsing @font-face declarations to list fonts
Grouping assets by type (images / fonts / styles)
Gracefully skipping cross-origin-blocked resources
What I learned
Cross-origin restrictions are the biggest limitation
Fonts behind CDNs are tricky to resolve consistently
Shadow DOM complicates asset discovery
This will never replace DevTools — it’s more of a quick inspection layer
The interesting part for me wasn’t the UI, but understanding how much you can (and can’t) introspect from the browser sandbox.
If you’ve built similar dev utilities:
How do you handle asset discovery?
Would you reach for an extension instead?
Any clever workarounds for cross-origin stylesheets?
Built this mostly to scratch my own itch — curious how others approach this problem.
Top comments (0)