How to enable Web Inspector in Safari and Chrome

This tutorial provides a detailed guide on enabling remote debugging for Chrome and Safari on both iPhone and Android devices. It covers Web Inspector settings, USB debugging activation, and complete setup steps to help you easily solve mobile web debugging challenges.

1. Enabling Chrome remote debugging on iPhone

1. Open the Chrome browser, tap the bottom menu bar
2. Go to Settings → Content Settings
3. Turn on the Web Inspector switch

✅ Ready to use WebDebugX for debugging.

2. Enabling Safari debugging on iPhone

1. Go to Settings → search for “Safari”
2. Scroll down to the Advanced option
3. Enable the Web Inspector function

3. Enabling Chrome debugging on Android

1. Settings → About Phone → tap Build Number 7 times to enable Developer Mode
2. Go back and search for Developer Options
3. Enable the USB Debugging function

⚠️ Note: the path may vary by device brand.

4. Enabling Web Inspector for your own apps

Objective-C apps (WebKit)

if (@available(iOS 14.0, *)) {
    webView.inspectable = YES;
}

Swift apps (WebKit)

if #available(iOS 14.0, *) {
    webView.isInspectable = true
}

Java apps (WebView)

// Enable debugging in Application or Main Activity
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

Kotlin apps (WebView)

// Application-level debugging enable
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true)
}

5. Running Chrome in debug mode (macOS / Windows)

Launch Chrome via the command line with parameters:

chrome.exe --remote-debugging-port=9222 --user-data-dir=chromedatadir

⚠️ Note:

• Use a different --user-data-dir value for each Chrome instance
• --remote-debugging-port values must differ too, or the ports will conflict

Next steps

Debug mobile pages with WebDebugX