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

3DPageViewer.js

//Credits: https://gist.github.com/OrionReed/4c3778ebc2b5026d2354359ca49077ca

(() => {
    const THICKNESS = 5;
    const MAX_ROTATION = 180;
    const DISTANCE = 10000;

    const getDOMDepth = element => [...element.children].reduce((max, child) => Math.max(max, getDOMDepth(child)), 0) + 1;

    const body = document.body;
    body.style.overflow = "visible";
    body.style.transformStyle = "preserve-3d";
    body.style.perspective = `${DISTANCE}px`;
    const perspectiveOriginX = window.innerWidth / 2;
    const perspectiveOriginY = window.innerHeight / 2;
    body.style.perspectiveOrigin = body.style.transformOrigin = `${perspectiveOriginX}px ${perspectiveOriginY}px`;

    document.addEventListener("mousemove", (event) => {
        const rotationY = (MAX_ROTATION * (1 - event.clientY / window.innerHeight) - (MAX_ROTATION / 2));
        const rotationX = (MAX_ROTATION * event.clientX / window.innerWidth - (MAX_ROTATION / 2));
        body.style.transform = `rotateX(${rotationY}deg) rotateY(${rotationX}deg)`;
    });

    function traverseDOM(parentNode, depthLevel) {
        for (let children = parentNode.childNodes, i = 0; i < children.length; i++) {
            const childNode = children[i];
            if (!(1 === childNode.nodeType)) continue;

            Object.assign(childNode.style, {
                transform: `translateZ(${THICKNESS * depthLevel}px)`,
                overflow: "visible",
                backfaceVisibility: "hidden",
                transformStyle: "preserve-3d",
                willChange: 'transform',
                boxShadow: '0px 0px 2px rgba(0,0,0,0.5)',
            });

            traverseDOM(childNode, depthLevel + 1);
        }
    }

    traverseDOM(body, 0);
})();