Device Mode and Remote Debug

Device Mode

Press Ctrl+Shift+M (Cmd+Shift+M) to turn on Device Mode. Pick a preset such as Pixel 7 or iPhone 15 Pro, or choose Responsive and drag the viewport to any size. A preset sets the viewport, device pixel ratio and user-agent string and switches the mouse to touch events; the toolbar adds rotation, zoom, throttling, media-query bars and screenshots. The Command Menu's Show Sensors fakes geolocation and orientation, and Show Rendering emulates prefers-color-scheme, prefers-reduced-motion, print media and vision deficiencies. Run this in the Console with Pixel 7 active:

What the page sees under Device Mode emulationJavaScript

console.log(`Viewport: ${innerWidth} x ${innerHeight} CSS px, DPR ${devicePixelRatio}`);
console.log('Coarse pointer:', matchMedia('(pointer: coarse)').matches,
  '| hover:', matchMedia('(hover: hover)').matches);
console.log('Touch points:', navigator.maxTouchPoints);

Output

Viewport: 412 x 915 CSS px, DPR 2.625
Coarse pointer: true | hover: false
Touch points: 1

Device Mode is excellent for layout and media-query work, but it is still desktop Chrome 1 with your computer's CPU, GPU and fonts: it cannot reproduce iOS Safari 10 's WebKit 15,343 rendering, real touch latency or a phone's memory and thermal limits. Firefox 555 and Safari call their version Responsive Design Mode.

Remote debugging real devices

For the final check, attach desktop DevTools to the browser on the phone.

Remote debugging setups for mobile browsers
Target	Phone setup	Desktop entry point
Chrome for Android	Developer options > USB debugging	Chrome: chrome://inspect#devices
Firefox for Android	USB debugging, plus Firefox's Remote debugging via USB	Firefox: about:debugging
Safari on iPhone or iPad	Safari > Advanced > Web Inspector	Safari on a Mac: Develop menu
iOS app web views	App sets webView.isInspectable = true	Safari on a Mac: Develop menu

On Android, enable Developer options (tap Build number seven times), turn on USB debugging, connect the cable and accept the prompt. Each tab appears in chrome://inspect#devices with an inspect link that opens full DevTools with a clickable screencast of the phone; turn the screencast off when profiling, because it lowers frame rates. Inspecting an iPhone requires Safari on a Mac.

Desktop Chrome can expose its DevTools Protocol endpoint too, when launched with a debugging port. Since Chrome 136 the flag is ignored for your everyday profile, a defense against cookie theft, so also pass a separate --user-data-dir:

Starting Chrome with the DevTools Protocol exposed on port 9222

chrome --remote-debugging-port=9222 --user-data-dir="$HOME/chrome-debug"
curl http://127.0.0.1:9222/json/version

Output

{
   "Browser": "Chrome/152.0.7977.78",
   "Protocol-Version": "1.3",
   "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) ... Chrome/152.0.0.0
     Safari/537.36",
   "V8-Version": "15.2.124.19",
   "webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/browser/1eeb60dd-4c1e-..."
}

Puppeteer 164,069 (puppeteer.connect({ browserURL: 'http://127.0.0.1:9222' })), the VS Code 550 debugger and chrome-devtools-mcp 52,668 's --browser-url option can all attach to it. The port gives anything that reaches it full control of the browser, so use a throwaway profile and never expose it on a shared network.

MENU

Device Mode

Remote debugging real devices