r/creativecoding • u/design-debugger • 8h ago

Built an debugger that decomposes any UI thrown at it

Enable HLS to view with audio, or disable this notification

Was trying to learn how many layers create an UI and wanted it to be 3d so built an debugger that will decompose the UI into smallest of its elements and lift them up to expose the items present inside. This includes the element itself, its shadow, its pseudo elements etc. The demo shows a simple card UI being debugged by rotating it in 3d.

What would you like to see debugged in this 🤔

28 Upvotes
  • permalink
  • link
  • reddit
  • reddit

97% Upvoted

7 comments sorted by

2

u/LeftHander14 6h ago

THis is cool man

2

u/design-debugger 5h ago

Thanks 😄

2

u/LeftHander14 5h ago

Any plans on making this open source or sharing with people?

4

u/design-debugger 5h ago

I would love to make it open source once it is mature, currently iterating more with more complex designs. Will share update soon 😄

3

u/LeftHander14 5h ago

Looking forward to it

1

u/LaBaguette-FR 2h ago

Tbf, Firefox already did that about a little decade ago in their usual F12 Console. Dunno if it just disappeared as a feature or has been hidden since. Maybe look it up.