Viewport Size Display

WHAT IT DOES

Viewport Size Display shows your current viewport dimensions in a clean, floating overlay that stays visible as you browse. The display updates in real time when you resize your browser window or scroll the page, showing width, height, scroll position (X and Y), and device pixel ratio. The tool also includes an optional element size inspector: hover over any element on the page to see its exact dimensions displayed in a mini tooltip. This makes it easy to check responsive breakpoints, verify layout sizes, and debug element dimensions without opening developer tools.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All dimension calculations, coordinate tracking, and display rendering occur on your machine without any network requests. No page content, measurement data, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox.

HOW TO USE

Click the extension toolbar icon to open the Viewport Size Display panel. The floating overlay appears automatically in the corner of your screen showing width, height, and other metrics. Use the "Toggle Overlay" button to show or hide the display. Change the overlay position using the dropdown selector (Top Left, Top Right, Bottom Left, Bottom Right). Toggle individual display options: "Show on resize" controls whether the display updates with a smooth animation, "Show scroll position" adds scroll coordinates, and "Show device pixel ratio" adds DPR information. Enable "Show element sizes on hover" to see the dimensions of any element you mouse over. Adjust the font size and background opacity to make the overlay fit your preferred style. Click "Copy Viewport Info" to copy all metrics to your clipboard.

THE EVENT-DRIVEN VIEWPORT MONITOR — WHY IT WORKS

Most viewport displays rely on polling intervals that waste CPU cycles and miss rapid changes. This tool uses the browser's native event system to capture viewport updates exactly when they happen. The resize event fires whenever the viewport changes, allowing the display to update in real time with zero polling overhead. The scroll event captures position changes as they occur, and the mousemove event powers the element size inspector by reading element bounding rectangles directly from the DOM using getBoundingClientRect. This event-driven architecture ensures the display is always accurate while consuming minimal resources. The tool also debounces the resize event using a 200ms timer to prevent excessive updates during continuous resizing, balancing responsiveness with performance.

THE PANEL

The Viewport Size Display panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the display controls and options adjust proportionally. Press the Escape key to close the panel instantly, though the floating overlay remains visible if toggled on. The panel maintains independent state for each browser tab, allowing you to monitor viewport sizes in multiple tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. Websites continuously evolve their rendering techniques; while the viewport display works across all modern sites, element size detection may be affected by CSS transforms or complex layouts. All dimension data is computed locally and is never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.