chrome-devtools-mcp mobile testing EN thumbnail

AI Browser Testing Close to a Real Mobile Device with chrome-devtools-mcp

June 2, 2026

When I had AI drive the browser to check a Shopify store on mobile, I used to resize the window to 390px wide with a Chrome extension. After switching to chrome-devtools-mcp, I can now verify things in a state much closer to a real device, including User Agent, touch events, and media queries.

They look similar, but resizing the window and emulating a device behave completely differently.

Illustration of switching from window resizing to device emulation

The difference between window resizing and device emulation

When you shrink the window to 390px with a Chrome extension, the layout does look mobile-like, but the only thing that changes is the display width. The emulation in chrome-devtools-mcp switches things at a deeper level.

Item	Window resizing	Device emulation
Display width	✅ Changes	✅ Changes
User Agent	❌ Stays as desktop	✅ Changes to iPhone
Touch events	❌ Stays as mouse events	✅ Switches to touch events
Device Pixel Ratio	❌ Stays at 1x	✅ 2x (close to Retina)
CSS media queries	△ Only width-based ones respond	✅ UA-based ones respond accurately too

If the User Agent doesn't change, code that branches its behavior by checking navigator.userAgent in JavaScript keeps running as if "the user is on a desktop." If touch events don't change, tap behavior and the handling of hover states also stay as they would on a desktop.

What changes when you use chrome-devtools-mcp

Illustration of checking media queries, tap targets, and measured values

@media (pointer: coarse) works correctly

@media (hover: none) and @media (pointer: coarse) are media queries that branch based on whether the device is a touch device. With window resizing alone, these don't respond, so you can't properly verify elements whose styles change only on mobile.

It can properly detect small buttons

Tap targets of 44×44px or larger are recommended, but with mouse operation you can click even small buttons without any trouble. When you test with touch events enabled, you can tell whether a button is actually hard to tap.

You can report with numbers

Because chrome-devtools-mcp connects directly to CDP, calling getBoundingClientRect() via evaluate_script gives you the actual dimensions down to the pixel. Instead of "it feels kind of small," you can record it as "button height 36px (below the recommended 44px)."

When to use chrome-devtools-mcp vs. a Chrome extension

Use chrome-devtools-mcp for pages that don't require login. For checking the storefront, it works without authentication.

When you need a logged-in session, such as a password-protected store or the admin, use a Chrome extension.

Checking the storefront's mobile display
  → chrome-devtools-mcp (device emulation)

Password-protected stores / pages after login
  → Chrome extension (uses the user's session as-is)

For higher-precision verification
  → Chrome extension (operation & visual check) + chrome-devtools-mcp (measurement & detailed inspection) in combination

An actual prompt

Illustration of the mobile display test prompt steps

Here is an example prompt for mobile testing using chrome-devtools-mcp.

Using chrome-devtools-mcp, please run a mobile display test
of the Shopify store following the steps below.

## Test target
URL: https://your-store.myshopify.com
Device: iPhone 14 emulation (375×812)

## Step 1: Home page
1. Enable iPhone 14 device emulation
2. Open the store and take a screenshot
3. Get the header height and the tap target size of the hamburger button

## Step 2: Collection page
1. Open /collections/all and take a screenshot
2. Measure the width of the product cards

## Step 3: Product detail page
1. Open the product page and take a screenshot
2. Measure the height of the "Add to cart" button (44px or more is recommended)
3. Check the z-index to confirm it doesn't overlap with other elements

## Step 4: Cart operation
1. Add to cart and open the drawer
2. Measure the drawer width and the height of the checkout button

## Step 5: Create a report
Please summarize the verification results, measured values, and any issues you found.

Instead of "the button feels small," you can record the issue as "button height 36px (below the recommended 44px)."

Illustration of combining emulation with real-device verification

Column: You still need real-device testing

The emulation in chrome-devtools-mcp is highly accurate, but it is not a complete substitute for a real device. Things like font rendering, scroll inertia, behavioral differences specific to Safari vs. Chrome, and the feel of operation that comes from the actual thickness of your finger can only be confirmed on a real device. The habit of "doing one full pass on a real device before and after a major overhaul" is still necessary. chrome-devtools-mcp is a tool that reduces the frequency of real-device checks, not one that eliminates them.

Summary

Summary of the key points that improve mobile testing accuracy

After switching to chrome-devtools-mcp, my mobile test results changed. Because the User Agent and touch events switch at the CDP level, you can verify CSS and JavaScript behavior in a state close to a real device.

For the storefront, chrome-devtools-mcp works on its own. For situations that require login, combine it with a Chrome extension.

Back to blog

Item added to your cart