What is Browser Device Mode?

What is browser device mode?

Browser device mode is a feature of developer tools, such as Chrome DevTools, that makes a desktop browser window act like a phone or tablet. It sets the viewport size and pixel ratio, can fire touch events instead of clicks, and can slow the network and CPU. Chrome calls it a first-order approximation of a real device, not a replacement for one.

How it works

In Chrome, open DevTools and click the Toggle device toolbar button. There are two modes (see Chrome's device mode documentation):

• Responsive viewport: drag the handles or type a width and height to see where your layout breaks. A width bar offers presets from 320px to 2560px, and Show media queries draws your CSS breakpoints above the viewport so you can click between them.
• Specific device: pick a phone or tablet from the Dimensions list for its screen size, rotate it to landscape, or add a custom device.

The toolbar also controls the device pixel ratio and the Device Type: Mobile fires touch events, Mobile (no touch) fires click events. The Throttle list has two presets: Mid-tier mobile simulates fast 3G with a 4x CPU slowdown, and Low-end mobile simulates slow 3G with a 6x slowdown. Geolocation and orientation are set in the Sensors panel.

Example: a menu that breaks on a phone

Your navigation looks fine at 1440px. In device mode you pick a phone width, and the menu overflows because a fixed-width rule never changed. The media query bar shows you have no breakpoint below 768px, so you add one. You then switch Throttle to Mid-tier mobile, reload, and see that the hero image now takes several seconds to appear, which is a Largest Contentful Paint problem you would never notice on office Wi-Fi.

What device mode cannot tell you

Chrome states it plainly: with device mode you do not actually run your code on a mobile device. Mobile CPUs are built differently from laptop and desktop CPUs, so the throttle slows your computer down but does not turn it into a phone. When in doubt, Chrome recommends running the page on a real device with remote debugging.

Common mistakes

• Treating emulation as a device test. Real browsers, real hardware and real networks behave differently. Use device mode to find layout and viewport bugs fast, and confirm on at least one real phone.
• Testing only one phone size. Check the viewports in your own analytics, and drag the responsive handles to find breakpoints you did not plan for.
• Judging speed from a single throttled run. One run on a busy laptop is noisy. Repeat it, or measure with a tool that runs on a schedule.
• Forgetting the pixel ratio. A blurry image on a high-density screen only shows when the DPR matches the real device.
• Designing desktop first. If you only look at mobile at the end, fixes are costly. See mobile-first design.

Device mode, testing and monitoring

Device mode is a manual, one-off check. To make it repeatable, run the same pages on a schedule: LoadFocus page speed monitoring runs Lighthouse audits for desktop and mobile from 25 cloud regions and alerts you on metric changes. For your real visitors' numbers, the free Core Web Vitals checker shows Chrome UX Report field data for mobile and desktop, and PageSpeed Insights is a related lab and field tool. Our posts on testing sites in mobile and tablet emulators and scheduling mobile emulation go deeper on the testing side, and the Core Web Vitals entry explains the metrics.

FAQ: Browser device mode

How do I open device mode in Chrome?

Open Chrome DevTools, then click the Toggle device toolbar button at the top of the DevTools window. Pick Responsive or a specific device from the toolbar.

Is device mode the same as testing on a real phone?

No. It approximates the screen size, pixel ratio, touch input and network conditions, but your code still runs on your own computer. Mobile CPUs differ from desktop CPUs, so performance can differ a lot.

What does the Mid-tier mobile throttle do?

It simulates a fast 3G connection and slows the CPU by a factor of four. Low-end mobile simulates slow 3G and a six times CPU slowdown.

Can device mode test touch events?

Yes, partly. With Device Type set to Mobile, your mouse produces touch events, which helps check tap handlers. It cannot reproduce every gesture or the feel of a real screen.

Does device mode change what Google sees?

No. Device mode only changes how your own browser displays and loads the page. It does not alter your site, your rankings or the data in field reports.