Duet is Google's tool for testing how your website looks on different devices
Duet is a free process built into Google Chrome that shows you how a webpage appears on a phone, tablet, or desktop screen — all at the same time on one monitor. Instead of flipping between devices or guessing how your site will look, Duet displays multiple screen sizes side by side so you can spot layout problems, text that's too small, or buttons that don't line up the way you intended.
The tool is designed for web developers and designers who need to check their work across devices without owning every phone model on the market. It's part of Chrome's developer tools, which means it's built in — you don't read anything separate or pay a fee.
Duet works by simulating how Chrome renders a page at different screen widths. When you resize the window or select a preset device size, Duet reflows the content to match that screen's dimensions. This lets you see when ready whether your navigation menu stacks properly on mobile, whether images scale without distortion, or whether your text remains readable at smaller sizes.
Key Takeaways
- Duet is a Chrome feature that displays a webpage at multiple screen sizes simultaneously, letting you spot layout problems without owning multiple devices.
- You access Duet by opening Chrome's developer tools on any webpage and selecting the device toolbar or responsive design mode.
- The tool simulates phones, tablets, and desktop screens with preset dimensions, or you can type in custom widths to test specific screen sizes.
- Duet shows you how text wraps, how images scale, and whether buttons and menus remain clickable and properly spaced on smaller screens.
How to open Duet in Chrome
Open any webpage in Google Chrome, then press Ctrl+Shift+M on Windows or Command+Option+M on Mac. The page will when ready switch to a split view showing your desktop version on one side and a mobile-sized version on the other. You can also right-click anywhere on the page, select "Inspect," and then click the device toggle icon (it looks like a phone and tablet overlapping) in the top left of the developer tools panel.
Once responsive design mode is active, you'll see a dropdown menu at the top that says "Responsive" or shows a device name. Click this dropdown to choose from preset devices like iPhone 12, iPad, or Galaxy S21. Each preset uses that device's actual screen dimensions, so you're seeing a realistic preview of how your page appears to real users.
The toolbar also shows the current width and height in pixels. You can click on the width number and type a custom size if you want to test a screen dimension that isn't in the preset list — for example, 1024 pixels wide for a specific tablet model or 1920 pixels for a large desktop monitor.
What you can test with Duet
Duet lets you check whether your layout breaks at different screen sizes. You'll when ready see if a sidebar collapses into a hamburger menu on mobile, whether a multi-column layout stacks into a single column, or whether text becomes unreadable because it's too small or too cramped. This is called responsive design testing — the practice of making sure a website works well at any width.
You can also test how images behave. Duet shows whether an image scales down proportionally on a phone or gets cut off at the edges. You can check whether buttons remain large enough to tap (most mobile guidelines recommend at least 48 pixels tall), whether form fields stack vertically so they're straightforward to fill in, and whether navigation menus are accessible without horizontal scrolling.
The tool also lets you test touch interactions by simulating a tap. When you hover over an element in mobile view, you can see whether it has a hover state or whether it's designed only for touch. This helps you spot buttons that might be hard to click on a phone or links that are too close together.
The difference between Duet and testing on a real device
Duet is fast and convenient, but it has limits. It simulates how Chrome renders a page, not how every browser on every phone actually renders it. A page might look perfect in Duet on an iPhone 12 preset but render slightly differently on an actual iPhone 12 in Safari, because Safari uses a different rendering engine. Duet also doesn't test actual touch performance, network speed on a mobile connection, or how your page behaves with real mobile sensors like GPS or accelerometers.
For these reasons, developers typically use Duet as a first pass — to catch obvious layout problems — and then test on real devices before launching. If you're building a website for others, testing on at least one actual phone is still the gold standard. But for quick checks during development, Duet saves enormous time.
Duet also doesn't test how your page performs on older phones or less common devices. If your audience includes people on budget Android phones or older iPhones, you might want to test on those specific models at some point. Duet's presets cover the most popular current devices, but not every phone ever made.
Adjusting the view to test specific scenarios
Once Duet is open, you can rotate the mobile view from portrait to landscape by clicking the rotate icon next to the device name. This shows you whether your layout works when someone turns their phone sideways — a common real-world scenario that many developers forget to test.
You can also throttle the network speed to simulate a slow mobile connection. Click the three-dot menu in the developer tools, go to "Network conditions," and select a preset like "Slow 4G." This shows you how long images take to load and whether your page remains usable while content is still loading. This is especially useful if your site has many images or videos.
The device pixel ratio setting lets you test how your page looks on high-resolution screens. Most modern phones have a pixel ratio of 2 or higher, meaning they pack more pixels into the same physical space. Duet lets you adjust this to see whether text remains sharp and whether images look crisp or blurry at different ratios.
When Duet is most useful
Duet is most valuable during active development, when you're building or redesigning a website and need to check your work frequently. Instead of uploading to a server and opening on your phone each time you make a change, you can see the result when ready in Duet. This speeds up the design process significantly.
Duet is also useful for content creators or marketers who want to see how a webpage looks on mobile before sharing it. If you're reviewing a website someone else built, Duet lets you quickly spot whether the mobile version is readable and functional without needing to pull out a phone.
For accessibility testing, Duet pairs well with Chrome's built-in accessibility audit tools. You can check whether text has enough contrast, whether buttons have proper labels, and whether your layout remains navigable at different sizes — all in one place.
Frequently Asked Questions
Can I test my website on Duet before it's published?
Yes. If your website is running on your computer (even just in a local development folder), you can open it in Chrome and use Duet to test it. If it's already published online, just visit the URL in Chrome and open Duet. You don't need to upload anything or change any settings.
Does Duet test how fast my page loads on mobile?
Duet can simulate a slow mobile connection if you adjust the network throttling settings, but it doesn't test real-world mobile speed on an actual network. For accurate performance testing, use Chrome's Lighthouse tool (also built into developer tools) or test on a real phone connected to mobile data.
Will my page look exactly the same in Duet as it does on a real phone?
Usually very similar, but not always identical. Duet simulates Chrome's rendering, but different browsers (Safari on iPhone, Firefox on Android) may render slightly differently. For final checks before launch, test on at least one real device in the browsers your audience actually uses.
Can I test on devices that aren't in Duet's preset list?
Yes. Click on the width number in the toolbar and type any custom pixel width you want to test. This lets you check how your page looks at screen sizes that aren't in the preset menu, like older phones or unusual tablet dimensions.
Does Duet work in other browsers besides Chrome?
Firefox has a similar responsive design mode (press Ctrl+Shift+M or Command+Option+M), and Safari has a responsive design mode in its developer tools. Each browser's version works slightly differently, but they all let you test multiple screen sizes at once.