Free tools Windows power users keep installed
One-click scans. No signup required.
The best starting point for making a website responsive is your browser’s built-in developer tools: resize the page through narrow, medium and wide viewports, then fix the layouts that break. Use Chrome DevTools Device Mode for quick viewport and selected mobile-condition checks, Lighthouse for separate quality audits, and browser-specific testing or real devices for important cross-browser behavior. For a screenshot you can capture and inspect, ScreenshotNeo is another option.
Which tool should you use?
Choose by the question you need to answer. A viewport preview helps you spot layout problems; an audit flags quality issues; cross-browser and device testing checks whether the experience works in environments your visitors actually use. These jobs overlap only partly, so no single preview or score proves that a site is responsive everywhere.
| Tool | Best for | What it does not establish |
|---|---|---|
| Chrome DevTools Device Mode | Quickly previewing viewport sizes and selected mobile conditions while you develop. | That the page behaves exactly like it would on every real device or in browsers outside its coverage. |
| Lighthouse | Automated performance, accessibility, SEO and related quality audits. | That a page’s layout works across viewport sizes or browser/device combinations. |
| Firefox or Safari responsive modes | Checking layout widths and media-query behavior in those browser environments. | Complete coverage of other browsers or physical devices. |
| Physical devices | Checking consequential flows on hardware and browsers representative of your audience. | Every possible device and configuration. |
| Hosted testing services such as BrowserStack | Teams that need hosted browser/device access or a repeatable multi-device workflow. | Any feature, device catalog or plan not currently included in the service’s terms. |
| ScreenshotNeo | Capturing a page as an image or PDF through an API, or letting an AI agent request a capture with its MCP server. | Complete responsive correctness by itself; screenshots still need interpretation and relevant browser/device checks. |
For most projects, begin with the built-in tools and add coverage according to audience and risk. MDN describes responsive design as adapting across the range of screen sizes and devices, rather than matching one named phone: Responsive web design.
Use Chrome DevTools Device Mode for layout iteration
Device Mode is a fast first pass: adjust the viewport, inspect where the design stops fitting and iterate on the page’s CSS. Chrome describes emulation as useful for spot checks when a particular device is not available, but its documentation also cautions developers to consider other browser solutions for coverage beyond Chrome and Android.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
- Open the page in Chrome and open DevTools from the browser menu or the developer-tools keyboard shortcut for your operating system.
- Enable the device toolbar using the phone-and-tablet icon, or the Device Toolbar option in DevTools.
- Choose a preset or enter a custom viewport width and height. Include narrow, intermediate and wide widths that represent your layout’s actual breakpoints and content needs.
- Check navigation, text wrapping, forms, images, fixed elements and overlays. Scroll through long pages, not just the first screen.
- When something fails, inspect the runtime HTML and applied CSS in the Elements and Styles panels, then change the implementation and repeat the check.
Prefer a range of widths over a checklist of fashionable phone names. A layout can fail between named presets, especially around navigation changes, multi-column grids, long labels or embedded media. Browser developer tools expose the page’s runtime structure and styles; MDN explains their role in What are browser developer tools?
What emulation is good at
- Finding horizontal overflow, cramped controls, clipped content and awkward line breaks.
- Seeing whether media queries activate at the intended widths.
- Spot-checking layouts quickly without repeatedly moving between devices.
What it cannot replace
Emulation approximates device conditions; it is not proof of how every browser engine, operating system or piece of hardware will behave. Chrome’s guidance on emulating and testing other browsers recommends considering other browser solutions when broader coverage matters.
Use Lighthouse for audits, not as a responsive test suite
Lighthouse is useful alongside visual checks, not instead of them. It audits performance, accessibility, SEO and other page-quality areas. It can run in Chrome DevTools, from the command line, as a Node module or through a web UI; the DevTools workflow can audit local and authenticated pages. See Chrome’s Lighthouse overview for current run options.
Use findings as leads to investigate and fix. A Lighthouse result does not show whether a menu fits at a narrow width, whether a touch target is comfortable on a phone, or whether another browser renders a critical flow correctly. Keep layout inspection and quality audits as separate checks.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Add browser-specific checks and real-device verification
After the first viewport pass, cover the browsers and devices that matter to your visitors. Firefox and Safari each provide responsive design modes that are useful for checking widths and media-query behavior in their own browser environments. Interface labels and exact steps can change, so consult the current documentation for the browser you are using.
MDN notes that exhaustively testing all browser/device combinations is impractical. Choose a short list using audience data where available, the importance of the page or flow, and the browser behavior that could affect it. The guidance in Strategies for carrying out testing helps frame that coverage decision.
Rank #3
For important tasks—such as signing in, submitting a form, completing a purchase or using a menu—verify the flow in representative real browsers and on physical devices where possible. An existing Android phone or tablet may be enough for a relevant check; buying a particular model is not required. A cloud device can be an alternative when your team has no device lab.
When to consider a hosted testing service
A hosted service can help when a team needs shared, repeatable access to multiple browser/device combinations or real-device testing without maintaining its own lab. BrowserStack describes its responsive workflow as allowing side-by-side device views and a path to real-device testing. Those are vendor-described capabilities; check its current catalog, product details and plan terms before choosing it. See BrowserStack Responsive Testing and its explanation of how responsive testing differs from browser DevTools.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →For a team, compare services by the environments actually needed, whether sessions can be repeated or automated, collaboration needs, and current plan requirements. A hosted service adds access and operations considerations that built-in developer tools do not; it is most useful when that extra coverage solves a real testing gap.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Or skip the browser setup: capture a page with ScreenshotNeo
ScreenshotNeo is a website screenshot API and MCP server. A GET request with a URL can return a PNG, JPEG, WebP or PDF. Its capture options include full-page shots with lazy images loaded, viewport and device presets, retina scale, dark mode, a CSS selector for one element, PDF paper and margin settings, custom CSS and JavaScript, click-before-capture, selector/delay/network-idle waits, request and resource blocking, custom headers, cookies and user agent, timezone and geolocation. You can also resize images, choose a cache TTL, create signed links for public image tags, run async jobs with signed webhooks, capture up to 100 URLs per bulk call and use the usage API or OpenAPI spec. Other screenshot APIs’ parameter names also work, which can ease switching. See the ScreenshotNeo documentation for request details.
Before capture, it can accept cookie/consent banners as a visitor and remove more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and response headers identify the page verdict and billing status. An MCP server provides take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients. Screenshots are useful for sharing or tracking a visual state, but they do not replace checking browser behavior on relevant devices.
For example, save a capture of a page you control by changing only the target URL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpScreenshotNeo has 1,000 shots per month free with no card. Paid plans start at $5 for 3,000 shots; every feature is on every plan, and yearly billing gives two months free. The browser may still be useful for inspecting CSS and interacting with the page; the API is an alternative when you need a capture without setting up browser automation. Sign up free for 1,000 screenshots a month, with no card required.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.A practical responsive-testing workflow
- Start with the page’s purpose. Identify the most consequential pages and flows, and the audience’s likely browser/device mix.
- Inspect the layout in DevTools. Check narrow, intermediate and wide viewports, including widths around your breakpoints. Look for overflow, unreadable text, controls that do not fit and content hidden behind overlays.
- Fix the implementation, then recheck. Use the Elements and Styles panels to locate the relevant structure and CSS rather than treating the preview as a final result.
- Run Lighthouse separately. Investigate performance, accessibility, SEO or other audit findings that apply to the page.
- Expand browser coverage where it matters. Test in Firefox or Safari responsive modes, then check high-impact behavior in representative real browsers or devices.
- Use cloud coverage when it saves effort. Evaluate a hosted service if your team needs repeatable access to combinations it cannot conveniently test itself.
- Capture states when useful. Use a screenshot workflow to share or review a visual state; do not treat one image as proof of responsive compatibility.
Troubleshooting common responsive-testing problems
The page looks fine at a preset but breaks on a real phone
A preset is an approximation, and your physical device may use a different browser or expose hardware-dependent behavior. Reproduce the failure in the device’s browser, inspect the viewport and scroll behavior, and test the affected flow on that device or a relevant cloud device.
Content sticks out past the viewport
Inspect the overflowing element and its computed styles in DevTools. Check fixed widths, long unbroken strings, wide images or embedded content, and grid or flex children that cannot shrink. Test nearby widths after changing the layout; a fix at one exact width can create a new gap elsewhere.
A Lighthouse result is being used to approve mobile layout
Run a visual viewport check as well. Lighthouse audits page quality, but its result is not a cross-device visual test and cannot establish that navigation, forms or content fit properly.
Recommended Free Tools
A responsive screenshot shows a banner or popup over the page
For manual browser testing, interact with the page as a visitor would and check whether the overlay can be dismissed and whether it obscures key controls. For API captures, ScreenshotNeo’s consent-banner, newsletter-popup and chat-widget cleanup may help produce a cleaner image; those steps can be switched off if the overlay itself is what you need to inspect.
Frequently asked questions
Should I test every phone and browser?
No. There are too many combinations to cover exhaustively. Prioritize combinations using your audience, the importance of the affected flow and the risks of browser-specific behavior.
Does a screenshot prove a site is responsive?
No. It records a visual state at a particular viewport and moment. It does not by itself verify interactions, browser differences or behavior across other widths.
Is Device Mode the same thing as Lighthouse?
No. Device Mode previews a simulated viewport and selected mobile conditions; Lighthouse performs automated quality audits. They answer different questions.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesQuick Recap
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.
