Chrome’s mobile emulator is called device mode, and it is built into Chrome DevTools. Open DevTools, press Ctrl + Shift + M on Windows and Linux or Cmd + Shift + M on a Mac, choose a phone from the Dimensions menu, and reload the page. Chrome then renders the page with that phone’s viewport, pixel ratio and user agent.
This guide walks through every control that matters for day-to-day mobile testing, and ends with the things device mode cannot show you.
How to open device mode in Chrome
- Open the page you want to test.
- Open DevTools: press
F12, orCtrl + Shift + I(Windows, Linux) orCmd + Option + I(Mac). You can also right-click the page and choose Inspect. - Click the Toggle device toolbar icon (a phone and tablet) in the top-left of DevTools, or use the shortcut above while DevTools has focus.
- Reload the page so the site receives the mobile user agent from the first request.
Step 4 is the one people skip. Without a reload, a site that detects devices on the server has already sent you its desktop HTML.
Choosing a device or a custom size
The Dimensions dropdown at the top of the viewport has two modes.
Responsive lets you drag the viewport edges or type a width and height. Use it to find the exact width where a layout breaks. The bar above the viewport shows preset widths (Mobile S 320, Mobile M 375, Mobile L 425, Tablet 768, Laptop 1024) as shortcuts.
A named device, such as an iPhone or Pixel model, sets the width, height, device pixel ratio and user agent together. The list is short by default. Click Edit at the bottom of the list to enable more devices, or Add custom device to define your own with a name, width, height, pixel ratio and user agent string. A custom device is useful when the phone you care about is newer than Chrome’s list. The iPhone viewport chart has the values for current iPhones.
The rotate icon switches between portrait and landscape.
Simulating a slow phone: network and CPU throttling
A desktop computer is several times faster than a typical phone. Device mode can narrow that gap:
- The Throttling menu in the device toolbar has presets for mid-tier and low-end mobile, which slow both the network and the CPU.
- In the Performance panel you can set CPU throttling separately (for example 4x or 6x slowdown).
- In the Network panel you can pick network presets such as Fast 4G, Slow 4G or 3G.
Throttling is a simulation, not a measurement of real hardware. Use it to spot obvious problems like a script that blocks rendering for two seconds. For numbers you can report, see the mobile page speed test guide and the Lighthouse mobile audit walkthrough.
Touch, sensors and other emulation settings
When you select a mobile device, Chrome fires touch events instead of mouse events, and the cursor becomes a circle. That lets you test swipe carousels and tap handlers roughly, although a mouse still moves differently from a thumb.
The three-dot menu in the device toolbar adds more options: Show media queries draws your breakpoints as coloured bars, Show rulers adds pixel rulers, and Add device pixel ratio and Add device type expose those settings in the toolbar. The Sensors panel (open it from the Command Menu with Ctrl + Shift + P or Cmd + Shift + P) overrides geolocation and device orientation.
Taking a mobile screenshot in device mode
Open the three-dot menu in the device toolbar and choose Capture screenshot for the visible area or Capture full size screenshot for the whole page. If you selected a named device, enable Show device frame first to include the phone outline. We compare this with other methods in how to take a mobile screenshot of a website.
What device mode cannot show you
Device mode works on localhost as well. To test the same local server on a real phone, see testing localhost on mobile.
Chrome’s own documentation calls device mode a first-order approximation. The limits are real:
| Aspect | What device mode does | What it cannot do |
|---|---|---|
| Rendering engine | Uses desktop Chrome (Blink) | Show Safari or iOS-specific bugs |
| Performance | Simulates slower CPU and network | Reproduce a real phone’s thermal limits, memory or GPU |
| Input | Emits touch events from your mouse | Reproduce multi-finger gestures, thumb reach or on-screen keyboard behaviour |
| Browser UI | Shows the page area | Show the real address bar, toolbars and safe areas of iOS and Android |
For Safari, use the Xcode Simulator or a real iPhone (guide). For Android Chrome on real hardware, connect a phone and open chrome://inspect on your computer (guide).
Device mode or a mobile view extension?
Device mode is the better choice when you are debugging: the Elements, Console and Network panels are right next to the preview (a tour of those panels is in the Chrome DevTools guide). For quick visual checks it is a lot of setup, because DevTools must be open and the emulation resets per tab.
A mobile view extension such as Mobile View Extension covers the visual part with one click and keeps DevTools closed. It applies a device user agent, screen size and pixel ratio, shows a phone frame, and stays on while you navigate. It does not generate touch events, so for touch testing device mode is still the tool. The trade-offs are laid out in mobile simulator extensions vs DevTools.
Frequently asked questions
What is the shortcut for the Chrome mobile emulator?
With DevTools open and focused, press Ctrl + Shift + M on Windows and Linux or Cmd + Shift + M on macOS.
Why does the site still look like the desktop version in device mode?
Reload the page after choosing a device. Some sites decide which version to serve on the first request, before the emulated user agent was set.
Can I emulate an iPhone in Chrome?
You can emulate an iPhone’s screen size, pixel ratio and user agent. The page is still rendered by Chrome’s engine, not Safari’s WebKit, so Safari-only bugs will not appear.