Chrome DevTools on iOS: How to Inspect and Debug Pages on iPhone

Chrome on iPhone and iPad has no built-in developer tools and no extensions, so there is no F12 or "Inspect" menu. The official way to debug it is to connect the device to a Mac and use Safari's Web Inspector. That works for Chrome 115 or later on iOS 16.4 or later, after you turn on the Web Inspector setting inside Chrome (Chrome for Developers). Without a Mac you can still read console logs at chrome://inspect, or load an in-page console such as Eruda.

Why Chrome iOS dev tools work differently

On desktop, Chrome runs Google's Blink engine and ships Chrome DevTools. On iOS, Chrome renders pages with Apple's WebKit, the same engine as Safari, inside a WKWebView. So Chrome developer tools for iOS are really WebKit developer tools, and the inspector for WebKit is Safari Web Inspector on macOS.

Until 2023 this didn't work either: release builds of iOS apps couldn't expose their web views to Safari. iOS 16.4 added the isInspectable property, which lets an app opt in (WebKit blog). Chrome 115 uses it behind a user setting.

The same applies to iPad. Chrome developer tools for iPad follow the steps below; the iPad shows up in Safari's Develop menu like an iPhone.

Inspect Chrome on iPhone or iPad from a Mac (Safari Web Inspector)

What you need: a Mac with Safari, an iPhone or iPad on iOS/iPadOS 16.4 or later, Chrome 115 or later, and a USB cable (or Wi-Fi pairing, see below).

1. Enable Safari's developer features on the Mac. Open Safari, choose Safari > Settings (Cmd+,), go to Advanced, and check Show features for web developers. A Develop menu appears in the menu bar (WebKit).
2. Turn on Web Inspector inside Chrome on the device. In Chrome, open Settings > Content Settings, turn on Web Inspector, then fully close and relaunch Chrome (Chrome for Developers).
3. Connect the device to the Mac with a cable. Tap Trust on the device if asked.
4. Open the page you want to debug in Chrome on the device.
5. On the Mac, open Safari > Develop, hover over your iPhone or iPad's name, and click the page's URL listed under Chrome. Web Inspector opens, attached to that tab.

You now have the full WebKit toolset against the page running on the phone: Elements (live DOM and CSS editing), Console, Sources (breakpoints, stepping), Network, Timelines, Storage, and more. The Safari Web Inspector guide walks through each tab.

Note that the switch you need is Chrome's setting. Safari's own toggle (iOS Settings > Apps > Safari > Advanced > Web Inspector) only controls Safari pages. Turning it on doesn't hurt, and you need it anyway if you also debug Safari.

Debug without a cable

Pair the device once in Xcode (Window > Devices and Simulators, select the device, enable Connect via network). After that it appears in Safari's Develop menu over Wi-Fi when both are on the same network.

Can I use the iOS Simulator?

Partly. Simulators always allow inspection, and Safari on the simulator appears under Develop > Simulator (WebKit). But you can't install the App Store build of Chrome in the simulator, so to test Chrome specifically you need a real device. For layout and WebKit bugs, Safari in the simulator is usually close enough, because both browsers use the same engine.

Read JavaScript logs on the device with chrome://inspect

Chrome for iOS has had a built-in log viewer since Chrome 73 (Chromium Blog). It's the closest thing to dev tools on the iPhone itself.

1. In Chrome on the iPhone or iPad, open a new tab and go to chrome://inspect.
2. Start log collection (current versions show a Start Logging button) and leave that tab open.
3. Switch to another tab and reproduce the problem.
4. Go back to the chrome://inspect tab to read console.log, warnings, and errors.

Limits: it only shows console output (no DOM, no network panel, no breakpoints), and logs are lost if that tab closes or navigates away.

Inspect element on iPhone without a Mac

If you are on Windows, Linux, or only have the phone, these are the realistic options:

Option	What you get	Works in Chrome iOS?	Notes
chrome://inspect	Console logs	Yes	Built in, log-only
Eruda or vConsole in your page	Console, Elements, Network, Storage panels inside the page	Yes	You must add a script to the site you're testing
Cloud real-device services	Remote iPhones with Safari Web Inspector	Usually Safari, sometimes Chrome	Paid, check each vendor
ios-webkit-debug-proxy	WebKit remote debugging from Windows/Linux	Unreliable	Open-source, community-maintained, breaks often with new iOS versions

Add an in-page console (Eruda)

Eruda is an open-source console that runs inside the page, so it works in any iOS browser. Load it only in development or behind a query flag, never for all visitors:

<script>
  if (/[?&]debug=1/.test(location.search)) {
    var s = document.createElement('script');
    s.src = 'https://cdn.jsdelivr.net/npm/eruda';
    s.onload = function () { eruda.init(); };
    document.head.appendChild(s);
  }
</script>

Open https://your-site.test/?debug=1 in Chrome on the iPhone and tap the floating gear icon. You get a console, an element inspector, a network log, and storage views. vConsole is a similar alternative. Both are approximations: they see what JavaScript can see, so they miss things like CSS computed by the engine and requests made before the script loads.

What Chrome on iOS can't do

• No Chrome DevTools. The desktop panels (Lighthouse, Performance insights, the Chrome-specific Network throttling UI) don't exist on iOS. In Safari Web Inspector you get WebKit's equivalents.
• No extensions. Chrome for iOS doesn't support Chrome Web Store extensions, so there is no DevTools extension to install.
• No "Inspect element" menu. Long-pressing gives the normal link and image menu, not an inspector.
• Blink bugs won't reproduce. Since the engine is WebKit, a bug that only appears in Chrome on Android or desktop is a Blink issue. Use Chrome's remote debugging for Android for those.

If you test on many devices, a real-device cloud or an automated cross-browser suite saves a lot of cable swapping; see testing tools on DevHunt and mobile developer tools.

FAQ

Is there a Chrome developer mode on iPhone?

No. Chrome for iOS has no developer mode or built-in DevTools. The only developer switch is Settings > Content Settings > Web Inspector, which lets Safari on a Mac inspect Chrome's tabs, plus the chrome://inspect log page.

How do I open developer tools in Chrome on iPad?

The same way as on iPhone: enable Web Inspector in Chrome's Content Settings, connect the iPad to a Mac, and pick the page from Safari's Develop menu. iPadOS has no separate inspector of its own.

Can I see the network tab for Chrome on iOS?

Yes, through Safari Web Inspector's Network tab once you've attached it to the Chrome tab from a Mac. On the device alone, an in-page tool like Eruda shows requests made by the page's JavaScript, but not every request.

Can I debug Chrome iOS on Windows?

Not with official tools, because Safari Web Inspector only runs on macOS. On Windows, use chrome://inspect for logs, an in-page console like Eruda, or a cloud service that rents real iPhones. ios-webkit-debug-proxy exists but is fragile.

Why doesn't my iPhone show up in Safari's Develop menu?

Check, in order: the cable connection and the Trust prompt; that Chrome's Web Inspector setting is on and Chrome was relaunched; that Chrome is 115+ and iOS is 16.4+; and that "Show features for web developers" is checked in Safari's Advanced settings on the Mac. Restarting Safari on the Mac often fixes a stale device list.