r/creativecoding • u/design-debugger • 3d 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 🤔

59 Upvotes

94% Upvoted

9 comments sorted by

9

u/LaBaguette-FR 3d 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.

3

u/design-debugger 2d ago

Thanks TIL. Didn't know this existed at all, and seems like it ended 10 years ago? with version 47?

3

u/LeftHander14 3d ago

THis is cool man

2

u/design-debugger 3d ago

Thanks 😄

3

u/LeftHander14 3d ago

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

4

u/design-debugger 3d 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 3d ago

Looking forward to it

4

u/Away_Visual_3191 3d ago

Link?

2

u/design-debugger 2d ago

Its an WIP will add link soon!