How to Enable Web Inspector in Safari and Chrome
This tutorial provides a detailed guide on enabling remote debugging for Chrome/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. Perfect for frontend developers and programmers.
Complete Mobile Remote Debugging Tutorial
1. Enabling Chrome Remote Debugging on iPhone
- Open Chrome browser, tap the bottom menu bar
- Go to [Settings] → [Content Settings]
- Turn on “Web Inspector” switch
✅ Ready to use WebDebugX for debugging
2. Enabling Safari Debugging on iPhone
- Go to Settings → Search “Safari”
- Scroll down to [Advanced] option
- Enable “Web Inspector” function
3. Enabling Chrome Debugging on Android
- Settings → About Phone → Tap Build Number 7 times to enable Developer Mode
- Go back and search [Developer Options]
- Enable “USB Debugging” function
⚠️ Note: Path may vary by device brand
4. Enabling Web Inspector for Custom Apps
For Objective-C Apps (WebKit):
1if (@available(iOS 14.0, *)) {
2 webView.inspectable = YES;
3}
For Swift Apps (WebKit):
1if #available(iOS 14.0, *) {
2 webView.isInspectable = true
3}
For Java Apps (WebView):
1// Enable debugging in Application or Main Activity
2if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
3 WebView.setWebContentsDebuggingEnabled(true);
4}
For Kotlin Apps (WebView):
1// Application-level debugging enable
2if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
3 WebView.setWebContentsDebuggingEnabled(true)
4}
5. Running Chrome in Debug Mode (macOS/Windows)
Launch Chrome via command line with parameters:
1chrome.exe --remote-debugging-port=9222 --user-data-dir=chromedatadir
⚠️ Note:
- Use different –user-data-dir values for multiple Chrome instances
- –remote-debugging-port values must differ to avoid conflicts