Visual Viewport Debugger

Throw this standalone web component on a page for an overlay that logs the current visual viewport values (offsetLeft, offsetTop, pageLeft, pageTop, width, height, scale). It always remains the same size and stays in the same position when scaling and panning.

DEMO

Usage

    <script type="module">
        import('./visual-viewport.js').then((mod) => {
            mod.VisualViewport.register();
        });
    </script>

    <button popovertarget="visual-viewport" popovertargetaction="show">Open Visual Viewport Debugger</button>

    <visual-viewport data-position="center-center" popover="manual" id="visual-viewport"></visual-viewport>

Aren't there easier ways to get this info?

Yeah, the console is probably all you need. Live expressions also kinda work but truncate large objects. Maybe there's a workaround I haven't figured out yet.

Then why?

To learn. Through making it I got to play with the visual viewport, weird CSS math, light-dark(), custom elements, shadow DOM, adopted stylesheets, ESM, and popovers.

Could this be a browser extension?

Probably, but I don't know how to do that... yet.

Isn't the design a bit 1995?

I think you mean retro or nostalgic.