Test a locally hosted site by opening it in a browser’s responsive or device-emulation mode, then resizing the viewport across narrow, intermediate, and wide widths. Check the site around its own CSS breakpoints, not only at preset phone and tablet sizes. Inspect layout, overflow, navigation, and interactions; use Playwright for repeatable viewport checks and validate device-specific behavior on real hardware when it matters.
Start the local site and open it in a responsive viewport
- Run your development server. Use the command and local URL documented by your project. There is no framework-independent command or universal port, so do not assume a particular one.
- Open the local URL in a browser. In Chrome, open DevTools and select Device Mode. In Microsoft Edge, open DevTools and select Device emulation. Both provide a responsive viewport you can resize; Chrome also offers device simulation. Chrome DevTools Device Mode; Microsoft Edge Device Emulation.
- Resize the viewport manually. Check a narrow width, an intermediate width, and a wide desktop width, then drag through the widths between them. Preset devices are useful reference points, but they cannot reveal every awkward transition.
Check the layout at and around its breakpoints
Responsive CSS often changes layout when a media query matches a viewport condition. Test just below and just above the breakpoints your site actually uses, as well as at the breakpoint itself. If you do not know where those breakpoints are, inspect the project’s CSS media queries; Edge’s device emulation documentation describes breakpoint indicators for defined width conditions.
As an Amazon Associate I earn from qualifying purchases.
At each width, check the page as a user would, not just as a screenshot:
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →- Text, images, and other content stay visible and do not overlap or get clipped.
- The page has no unintended horizontal scrolling. If horizontal scrolling is intentional for a specific element, verify it works without making the whole page awkward to navigate.
- Navigation remains understandable and reachable, including any menu that replaces desktop navigation.
- Buttons, links, forms, menus, and other controls remain visible and usable; exercise the interactions rather than judging them only by appearance.
- Long headings, narrow labels, and changing content do not break the layout at intermediate widths.
Choose the right testing method
| Method | Best for | What it can tell you | Limit |
|---|---|---|---|
| Browser responsive or device mode | Quick local spot checks | How the page layout responds as you resize the viewport, with device-emulation options in browser tools. | Manual checks are not automatically repeatable, and emulation does not establish behavior on every physical device. |
| Playwright | Repeatable regression checks | Scripted checks with configured viewport and device characteristics, including viewport, screen size, user agent, and touch; supports Chromium, WebKit, and Firefox. | Requires a test setup and only covers the viewports and scenarios you choose to configure. |
| Lighthouse | A complementary local audit | A local page audit in Chrome; its default configuration uses mobile emulation and it also provides a desktop preset. | A score is not proof that every responsive layout or interaction is correct. |
| Physical target devices | Cases where device-specific behavior matters | The experience on the actual hardware and browser you inspect. | Requires access to representative target devices; checking one device does not establish behavior on all others. |
Automate selected viewport checks with Playwright
Playwright is useful when you want the same page checked at chosen sizes as part of a repeatable test run. Configure the viewports and device characteristics that matter to your project; automation cannot test unconfigured sizes or interactions. Playwright documents device emulation and support for Chromium, WebKit, and Firefox: Emulation and Browsers.
#1 Best Overall
For a first pass, define explicit viewport sizes for narrow, intermediate, and wide layouts, and add sizes immediately around your own breakpoints. If touch or a mobile user agent is relevant, configure those characteristics too. Run the checks in the browser engines important to your audience rather than assuming one engine represents all of them. Consult the current Playwright documentation for installation and project configuration; the required setup depends on your project.
Use Lighthouse as a complementary audit
Lighthouse can audit a page locally using a local Chrome browser. It defaults to mobile emulation and provides a desktop preset; use the configuration appropriate to the question you are checking. Its audit can complement viewport inspection, but it does not replace checking intermediate widths, breakpoints, or the behavior of controls. See the Lighthouse emulation documentation and Lighthouse README.
When to check on physical devices
Browser emulation is a practical first pass, not a guarantee that every physical device behaves identically. Inspect representative target hardware when touch behavior, platform-specific rendering, or another device-specific detail is important to your site. The official documentation describes simulation capabilities; it does not establish perfect reproduction of every physical-device condition.
Troubleshoot common responsive-test failures
- The local page will not open: Confirm the development server is running and use the local URL shown by your project’s own tooling or documentation. A particular command or port cannot be assumed across frameworks.
- The page looks fine at preset sizes but breaks between them: Drag the responsive viewport through intermediate widths and inspect just above and below the site’s media-query breakpoints.
- A mobile emulation check passes but the page still feels wrong on a phone: Exercise the relevant touch interactions and inspect the site on representative physical hardware when device-specific behavior matters.
- A Lighthouse result seems to contradict your visual check: Confirm whether you ran its mobile-emulation default or desktop preset, then inspect the actual layout and interactions directly. Treat the audit as complementary evidence, not a substitute for responsive QA.
- An automated check misses a layout problem: Add the failing viewport, browser engine, device characteristics, or interaction to the configured test cases. A script only covers the scenarios it runs.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. For a quick screenshot of a public page, one GET request can return an image or PDF; it is useful for capturing a URL, but it does not replace testing a locally hosted site across widths and interactions. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed; an MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000.
Example cURL request (replace the URL with the page you want to capture):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for usage details. ScreenshotNeo identifies whether a response was billed and whether the page was clean. Sign up for 1,000 free screenshots a month with no card.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
