HexenwerkMar 27, 2024
Orion Reed

I made an HTML/DOM viewer you can paste into your console to view or debug any website in 3D. Choose from random/gradient/clear colors or whether layers have sides.

You can save it as a bookmarklet so it's 1 click away. It's just a tiny IIFE JS function.
https://gist.github.com/OrionReed/4c3778ebc2b5026d2354359ca49077ca

3D DOM viewer, copy-paste this into your console to visualise the DOM topographically.

3D DOM viewer, copy-paste this into your console to visualise the DOM topographically. - dom3d.js

Gist
Mar 27, 2024 at 10:18amWeb
Show threadOrion ReedMar 27, 2024
Complex websites are the funnest to look at, here's Twitter for example. Rendering the sides works fastest in Safari, oddly, but performance-wise Chrome and Firefox are a lot better for large websites.
Show threadOrion ReedMar 27, 2024
You can use this view to programmatically pull out features, for example here are the โ€œcardsโ€ of a Google search result, you can see how some of them are not like the others.
Show threadOrion ReedMar 27, 2024
With sides enabled, you can see the skyline of your DOM.
Show threadOrion ReedMar 27, 2024
Here's my website, almost flat by comparison. You can count the layers on one hand.
Show threadDerek Caelin is writing a bookMar 27, 2024
@orion cool!
Show threadPredrag GruevskiMar 27, 2024
@orion this is awesome! Nicely done!
Show threadBart GroeneveldMar 29, 2024
@orion 'the skyline of your DOM' has to be to best sentence I've read on webdev for years.
Show threadJames BasooApr 8, 2025
@orion Now that's a neat way to visualise DOM depth!
Show threadRaleskMar 27, 2024

@orion Twitter's not truly complex, it's just stupid :D

I do vaguely remember there being some kind of devtools plugin for one of the major browsers, allowing such a 3d view... like a decade ago, and unfortunately it didn't live for too long.

I think it's a great tool if the UX can be done right... and I really wish the web stopped being as stupid as it currently is (see indeed: twitter as html source code)

Show threadKapitรคn ClownfeuerMar 27, 2024
@ralesk @orion I do also remember that tool, but cannot remember the name. It had it's uses and it's good to see someone has revived the idea!
Show threadOrion ReedMar 27, 2024

As requested, I've made a browser extension. A little development help would be *massive* โ€” currently only works in Firefox so Chrome/Safari help would be great.

Once it's polished, I'll make it freely available in extension stores for easy usage.

https://github.com/OrionReed/dom3d

GitHub - OrionReed/dom3d: Browser extension to view and debug the DOM in 3D space.

Browser extension to view and debug the DOM in 3D space. - OrionReed/dom3d

GitHub
Show threadWookiee Parker Mar 27, 2024

@orion Firefox used to have this natively and Iโ€™ve been missing it.

Thanks @orion

Show threadNick from TorontoMar 28, 2024
@orion this is so cool. Thank you for sharing it!
Show threadJak2k ๐Ÿณ๏ธโ€๐ŸŒˆMar 28, 2024
@orion
Extensions usually work in both, Firefox and Chromium. There are some incompatibilities, but for them you can use a polyfill.
Show threadValeMar 27, 2024
@orion This is awesome! Iโ€™ve kept Edge around especially for this function but this serves the purpose just fine. Bravo!
Show threadTreat! (Nik)Mar 27, 2024

@orion oooh, I remember this from Firefox from many many years ago! Fancy!

https://firefox-source-docs.mozilla.org/devtools-user/3d_view/index.html

3D view โ€” Firefox Source Docs documentation

Show threadTreat! (Nik)Mar 27, 2024
@orion They removed it in 2016 with Firefox 47.
Show threadFlorian HeidenreichMar 27, 2024
@orion foobar2000 ๐Ÿ™Œ๐ŸŽถ
Show threadnicolas โ‚Mar 27, 2024
@orion Ooh nice! This reminds me of Mozilla Tilt (but prettier) from several years ago! I had made a Tumblr about it at the time https://webscenery.tumblr.com
Web Sceneries

Web landscape photography with Mozilla Tilt.

Tumblr
Show threadWilhansen LiMar 27, 2024
@nclm @orion same thoughts!! Too bad they removed it because doing it in a multi process model (similar to Chrome) was either too difficult or non performant.
Show threadJohn FrancisMar 27, 2024
@orion holy sh*t that's awesome
Show threadilikecatsMar 27, 2024
@orion Finally, someone brought back the old firefox 3d debug feature ( https://firefox-source-docs.mozilla.org/devtools-user/3d_view/index.html ).
3D view โ€” Firefox Source Docs documentation

Show thread_L4NyrlfL1I0Mar 27, 2024
@ilikecats @orion came here to say that! I loved that feature!
Show threadSwiss Chalet SommelierMar 27, 2024
@orion very cool. Like the native view inspector / exploder in xcode
Show threadHarris LapiroffMar 27, 2024
@orion @b0rk Yesssss, thank you! Firefoxโ€™s web inspector used to have a feature like this and I always found it surprisingly useful for untangling positioning issues and I was sad when it went away.
Show threadTomaszMar 27, 2024
@orion somehow in Firefox on macOS pages end up upside down. Still very cool!
Show threadTerence EdenMar 27, 2024

@orion that's brilliant!

CC @Meyerweb we were chatting about this sort of thing last year, I think.

Show threadAdam ArgyleMar 27, 2024
@orion totally gonna make this a VisBug plugin so folks can invoke it via the extension ๐Ÿค˜๐Ÿป
Show threadHerrHerrmannMar 27, 2024
@orion @[email protected] I appreciate seeing foobar2000 as a random example (although you only searched for โ€œfoobarโ€, of course). I miss that player โ€ฆ
Show threadMega โ€œByteโ€ Matt Mar 27, 2024
@orion This reminds me about the Katamari bookmarklet, great stuff!
Show threadResunaMar 27, 2024
@orion "I know this, it's a UNIX system!"
Show threadAdam KatzMar 27, 2024

@orion change COLOR_SURFACE to false and this will make an excellent April Fools Day prank if you have access to a friend/coworker/relative's computer. (It looks normal until you move your mouse over the site, then all hell breaks loose.)

I've translated this to a one-liner that's easily visited on another computer. Just go to https://tinyurl.com/dom3djs and put its contents in the clipboard. Then hit F12 or Ctrl+Shift+i from another website paste, and close the console and github gist. Make sure you don't mouse over the target site.

Show threadDion WilliamsMar 27, 2024
@orion I was sad to see the 3D debugger be removed from Firefox but I love this reincarnation and how elegant it is!
Show threadJason Parker (he/they)Mar 27, 2024
@orion You know what would be really cool and helpful for web devs? Adding something like ctrl-scroll to hide the top layers, so you can see through to various parts.
Show threadOrion ReedMar 27, 2024
@north This is a great idea!
Show threadmurzMar 27, 2024
@orion โ€ždebug in 3dโ€œ  
Show threadCrazypediaโผMar 27, 2024
@orion very cool!
Show threadellis dex ๐ŸŒŸMar 27, 2024
this seems like something @val would enjoy
Show threadVal "Valorant Knightrider"Apr 11, 2024
@ellisdex sorry i only just saw this!! and omg it's so rad thank you for linking
Show threadtang0008Mar 27, 2024
@orion ๐Ÿ‘€
Show threadRaven LuniMar 27, 2024
@orion Nice!
Show threadOatmeal RaisinMar 27, 2024

@orion

Definitely does not help with debugging, but I like it. ๐Ÿ™‚

Show threadGuido GallenkampMar 27, 2024
@orion how did we survive without this? ๐Ÿ˜ Massive!
Show threadAndris SvarcsMar 27, 2024
@orion This is awesome. I remember Firefox having this feature, or that it was some plugin. It's really cool to see websites that way. Some of them are scary, and the forms are usually messed up.
Show threadNetuxMar 27, 2024
@orion I'm being a bit slow, I'm sure. It's for the developer console in the browser, correct?
Show threadWillow "Wolveric" CatkinMar 27, 2024
@orion Nice, this isn't an Edge feature exclusively from now on... ๐Ÿ˜น
Show threadMarie et JulienMar 27, 2024
@orion Pepperridge farms remember when it was just an option in firefox dev tools.
Show threadJacketMar 27, 2024

Watts the safeword is such a good channel. They just released a video about bottoming. My! I wish that was part of my sexuality classes at school at the time.

https://www.youtube.com/watch?v=ICcUoXJTgis

Show threadBill MillMar 27, 2024

@orion cc @Meyerweb it's back!

https://mastodon.social/@Meyerweb/111609072454648233

Show threadWashawebMar 27, 2024
@orion It reminds me of the time when this existed in Firefox, I liked using this 3D preview of the HTML DOM. nice!
Show thread  Portable doggie ๐Ÿ”œ NFCMar 27, 2024
@orion oh this is absolutely not a fan of WebXP ahah
Show threadstefanMar 27, 2024
@orion is that similar to tools like https://devtoolstips.org/tips/en/see-the-page-in-3d/ ?
DevTools Tips

See the page in 3D

DevTools Tips
Show threadRicMar 27, 2024
@orion oh that's smart ๐Ÿ˜ถ
Show threadWedgeStratosMar 27, 2024
@orion wow virtual reality is so cool you can feel the foobar
Show threadInterstellar_1Mar 27, 2024
@orion this is so cool
Show threadNoelleMar 27, 2024
@orion holy shit I had no idea CSS could just do 3D stuff like this without like, a WebGL context! Seriously impressive!
Show threadTiberius van GeistMar 27, 2024
@orion Foobar2000 ftw!
Show threadMarcelle RusuMar 27, 2024
@orion wow! Incredible!
Show threadOwlbright GamesMar 27, 2024

@orion This is amazing! Firefox's old 3D view was one of the first things that really hooked me on web dev, and I'm so glad to see something that brings that back.

https://firefox-source-docs.mozilla.org/devtools-user/3d_view/index.html

3D view โ€” Firefox Source Docs documentation