Overflow & Screenshots

Catch layout problems and grab clean shots of any device.

Overview

Responsive Tester includes two everyday tools that live right alongside your device frames: an automatic overflow warning that flags accidental horizontal scroll, and a one-click screenshot capture for any viewport. Both are free, and both are built to stay out of your way until you need them.

Use overflow warnings while you build to spot layout breakage the moment it happens, then use screenshots to capture a clean image of a frame once it looks right. Neither tool requires setup, an account, or an upgrade.

Overflow Warnings

Horizontal overflow is one of the easiest layout bugs to ship by accident. A single element that runs a few pixels past the viewport, an unwrapped image, a fixed width that does not fit a narrow screen, or a long unbroken string can all push the page wider than the device it is meant to fit. On the real device this shows up as a sideways scroll that should not exist, and it is easy to miss on a desktop where you never scroll horizontally.

Responsive Tester watches for this automatically. When a frame's content is wider than its viewport, a warning appears directly under that frame. There is nothing to enable and nothing to configure: the check runs on its own for every device you have open.

The warning is specific about what it detects:

• Horizontal only: the check compares the document's scrollWidth against its clientWidth, so it fires only for genuine sideways overflow. A page that simply scrolls down, which is normal and expected, never triggers it.
• Per frame: each device is measured against its own declared width. A layout can be perfectly fine on a wide tablet frame and overflow on a narrow phone frame, and the warning appears only under the frame that actually overflows.
• Self-clearing: the warning hides again on its own once the overflow is resolved. Fix the offending element, and the flag disappears without any action from you.

Because the state is tied to what each frame is currently rendering, the warning updates as you work. Resize, reload, or navigate a frame, and the check re-evaluates. This makes it a live signal you can trust while iterating rather than a one-time report you have to re-run.

The practical payoff is catching accidental horizontal scroll before it ships. Instead of discovering the problem on a real phone after release, you see it flagged the moment a frame goes wide, next to the exact device where it breaks.

Screenshots

Every device frame has a screenshot control in its header. Click it, and Responsive Tester captures a clean image of that viewport in a single step. There is no separate capture mode to enter and no region to draw: the button captures the frame you clicked it on.

What makes the shot clean is that it captures the page itself, not the Responsive Tester interface around it. The frame's own toolbar, the surrounding canvas, and the rest of the extension are not part of the image. You get the rendered page at that device's width, which is exactly what you want when documenting a layout, filing a bug, or sharing a design for review.

A few points worth knowing:

• One click per frame: the capture control sits in each frame's header, so grabbing a shot of a specific device is a single action on that device. With several frames open, you capture each one independently.
• Rendered at the device width: the screenshot reflects the page as it renders for that viewport, so responsive layouts and media queries appear exactly as they do in the frame.
• Free: screenshot capture is available to everyone, with no upgrade required.

Using Them Together

The two tools complement each other in a normal debugging pass. Open the devices you care about, watch for any overflow warning to appear under a frame, and resolve the layout until the flag clears. Once a frame renders the way you intend, use its screenshot control to capture the result. The warning tells you when something is wrong, and the screenshot lets you keep a record of it once it is right.