Chrome DevTools on Mobile: Debug Real Devices

A page can look right in a desktop browser and still break on a phone. Real devices bring their own screen sizes, Chrome versions, touch behaviour, network conditions and vendor changes to Android. Chrome DevTools, the developer tools built into Google Chrome, lets you inspect and debug a page running on a real device instead of guessing from a desktop window.

This guide shows how to do that. It covers the three ways to debug Chrome on mobile, the chrome://inspect setup for your own Android phone, the DevTools panels you will use most, and how to debug on a real cloud device with the Pcloudy Chrome Debugger when you do not have the right phone on your desk.

Three ways to debug Chrome on mobile

• Device Mode, in desktop Chrome. Simulates a phone screen size and touch input inside the desktop browser. Quick for layout checks. It is a simulation, so it does not show real hardware, a real mobile Chrome build or real network conditions. See “Device Mode vs a real device” below.
• Your own Android phone over USB. Real device, real Chrome, with DevTools running on your computer. The setup is in the next section. You can only test the phones you own.
• A real device in the cloud. Pick a phone you do not own, open a URL and inspect it with the Pcloudy Chrome Debugger. See “Debug Chrome on a real device with the Pcloudy Chrome Debugger” below.

Debug an Android phone from your computer with chrome://inspect

Google documents this workflow as “Remote debug Android devices”. It works from Windows, Mac or Linux.

Step 1: Connect the phone

1. On the Android phone, open Developer Options and turn on USB debugging.
2. On your computer, open Chrome and go to chrome://inspect#devices.
3. Make sure Discover USB devices is ticked.
4. Connect the phone to the computer with a USB cable. The first time, the phone may show as “Offline” until you accept the debugging prompt on its screen.

When the phone’s model name appears, the connection is working. If it does not, see “If your phone does not show up” below.

Step 2: Open a page and inspect it

1. Open Chrome on the phone.
2. On your computer, in chrome://inspect#devices, find the phone and its Chrome tab. To open a new page, type a URL in the “Open tab with url” box and click Open.
3. Click Inspect next to the tab. A DevTools window opens on your computer, connected to the page on the phone.

The version of DevTools that opens depends on the Chrome version on the phone. If the phone runs an old Chrome, DevTools may look different from the one you know.

To see the phone screen inside DevTools, click Toggle Screencast. Clicks on the screencast become taps on the phone, and your keyboard input is sent to the phone. Screencasting slows the frame rate, so turn it off when you measure scrolling or animation performance.

This workflow is for Chrome on Android. Chrome on iPhone and iPad uses Apple’s WebKit engine, so it is not debugged this way. For Safari on an iPhone or iPad, see safari testing and debugging guide.

If your phone does not show up

Work through these in order:

1. Check that USB debugging is on and that Discover USB devices is ticked in chrome://inspect#devices.
2. Look at the phone screen and accept the “Allow USB debugging?” prompt. If the phone stays “Offline” or unauthorized, revoke USB debugging authorizations in Developer Options, then reconnect and accept again.
3. Set the phone’s USB mode to file transfer. A cable in charge-only mode does not expose the device.
4. Try a different cable, and plug the phone directly into the computer rather than through a hub.
5. Reconnect with both screens unlocked.
6. Run adb devices in a terminal. If the phone is listed as “unauthorized” or is missing, the problem is the connection or authorization, not Chrome.
7. On Windows, install the phone maker’s USB driver. Some devices, such as Samsung phones, need extra setup.

Google’s page also lists a manual route through the Android Debug Bridge (adb) for rare cases where the normal discovery does not work.

Test a local site on the phone

To open a site running on your computer (for example localhost:3000) on the phone, use port forwarding from the same chrome://inspect#devices page: click Port forwarding, add the port and the address, and enable it. The phone can then open localhost on that port.

Device Mode vs a real device

Device Mode in desktop Chrome is the quickest way to check a layout. Google describes it as a “first-order approximation” of how a page looks and feels on mobile. Your code does not run on a mobile device. It runs on your laptop or desktop, and some things cannot be simulated at all, such as the difference between mobile and desktop CPU architecture.

Use Device Mode for fast checks of viewport size, media queries and touch input. Move to a real device when you need:

• Reliable performance numbers. Mobile CPUs and real networks behave differently from throttled desktop Chrome.
• Device-specific bugs. Styling, rendering and API differences that only appear on a particular Android version or Chrome build.
• Real touch, sensors and hardware. Simulated sensors and touch do not cover everything.

Google’s own guidance for reliable results is to run the page on a real device and inspect it with remote debugging, which is what the rest of this guide shows.

The DevTools panels you will use most on mobile

Once DevTools is connected to the phone, these are the panels that solve most mobile web bugs. Match the symptom to the panel:

• A layout or styling bug on one device: Elements.
• A script error or code that only fails on mobile: Console and Sources.
• A page that loads slowly on a mobile network: Network.
• Slow scrolling or janky animation: Performance.

Elements: inspect and edit the DOM and CSS

Open the Elements panel and hover over a node. The matching element highlights on the phone screen. You can also click Select Element in DevTools and tap the element on the phone. Select Element switches off after one tap, so turn it on again for the next element.

Double-click a node to edit the HTML. In the Styles pane you can change property names and values, and in the Computed pane you can check the box model: content, padding, border and margin. Changes apply to the live page on the phone and disappear when you reload, so copy the fix into your code.

Console: read errors and run code

The Console shows errors, warnings and logged messages from the page on the device. You can also run JavaScript against the live page. Mobile-only exceptions often show up here first, for example a missing API on an older Chrome version.

Sources: debug JavaScript, including minified code

The Sources panel lets you set breakpoints and step through JavaScript running on the phone. Production sites usually ship minified or compiled code. The Sources panel pretty-prints minified files by default, so you can read them without any extra step.

Network: find slow and failing requests

Phones are often on slower connections than the computer you build on. In the Network panel, use the throttling drop-down to simulate a slower connection, then reload the page with the cache emptied to see what a first-time visitor sees. To see how the page looks while it loads, turn on Capture screenshots in the Network settings and reload. The Screenshots tab shows thumbnails of the page at different moments, and clicking one shows the network activity at that moment.

Performance: record what the page does

The Performance panel, called Timeline in older versions, records everything the page does while it loads or while you interact with it. Start a recording, reload the page or use it, and stop. The recording shows frames per second, CPU activity and network requests in the overview, and a flame chart of the events. Click an event for its details, or zoom into a section to analyse it. Start here for slow scrolling, janky animation and slow interaction on a phone.

Debug Chrome on a real device with the Pcloudy Chrome Debugger

The USB setup works well for the phones you own. When a bug appears on a device you do not have, such as a certain Android version or screen size, you can reproduce it on a real, cloud-hosted device. The Chrome Debugger in the Pcloudy platform opens Chrome DevTools-style inspection for a real mobile browser session.

The October update puts the live device screen, browser controls and the inspection tools in one view, so you do not switch between windows. What it gives you:

• Device screen next to the DOM. Match what you see on the phone to the HTML behind it.
• Session controls in the same view. Start, refresh and stop the session without leaving it.
• Address bar and navigation controls. Open and test different URLs in the same session.
• Elements panel. Inspect the HTML structure while you look at the mobile page.
• Styles and computed CSS. Examine element styles without leaving the device session.

To start a session:

1. Log in to the Pcloudy platform and open Real Devices under the Functional Experience tab.
2. Select the device and click Start Testing.
3. Click Chrome Debugger in the left panel.
4. Enter the URL you want to test and click Start. The debugger opens, where you can select elements and inspect their details.

Full details are in the Debugging Apps on Real Devices Using Chrome Debugger

For responsive layout problems specifically, see [link: Mobile Responsive Testing and Debugging, /mobile-responsive-testing/].

Frequently asked questions

Can I use Chrome DevTools to debug a real phone?

Yes. For an Android phone, turn on USB debugging, connect it to your computer, open chrome://inspect#devices in Chrome and click Inspect next to the tab.

Is Device Mode the same as testing on a real phone?

No. Device Mode simulates a phone screen size and touch input in desktop Chrome. It is useful for layout checks, but it does not run on real hardware or a real mobile Chrome build.

Why does my phone not show up in chrome://inspect?

Check that USB debugging is on, that Discover USB devices is ticked, and that you accepted the debugging prompt on the phone. Switch the USB mode from charge-only to file transfer, try another cable plugged in directly instead of through a hub, and run adb devices to see whether the phone is authorized. The full checklist is in “If your phone does not show up” above.

Can I use Chrome DevTools to debug an iPhone?

The Chrome remote debugging workflow documented by Google is for Android devices, and Chrome on iOS uses Apple’s WebKit engine. For Safari on an iPhone, use Safari Web Inspector from a Mac, or the Pcloudy Safari Debugger on a real iOS device. See Debugging On Safari Browser.

How can I debug on a phone I do not own?

Use a real device cloud. With the Pcloudy Chrome Debugger you open a URL on a real device and inspect it from your browser.

Next steps

Start with chrome://inspect on your own Android phone. When you need other devices and Android versions, start a free trial and debug the same page on a real device with the Pcloudy Chrome Debugger.

Related reading:

• Mobile Responsive Testing and Debugging on Real Devices
• Debugging Apps on Real Devices Using Chrome Debugger