Safari 和 Chrome 开启网页检查器的方法

本教程详细讲解 iPhone 和安卓手机如何开启 Chrome / Safari 远程调试功能，包含网页检查器设置、USB 调试开启等完整步骤，助你轻松解决移动端网页调试难题，适合前端开发者和程序员学习。

一、iPhone 开启 Chrome 远程调试

1. 打开 Chrome 浏览器，点击底部菜单栏
2. 进入【设置】→【内容设置】
3. 开启「网页检查器」开关

✅ 完成后即可使用 WebDebugX 进行调试。

二、iPhone 开启 Safari 调试

1. 进入手机设置 → 搜索「Safari」
2. 下滑找到【高级】选项
3. 启用「网页检查器」功能

三、安卓开启 Chrome 调试

1. 设置 → 关于手机 → 连点 7 次版本号激活开发者模式
2. 返回搜索【开发者选项】
3. 开启「USB 调试」功能

⚠️ 注意：不同品牌手机路径可能不同。

四、自己开发的 App 开启网页检查器允许调试

1. Objective-C 语言开发的 App，对 WebKit 实例进行下面设置：

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

2. Swift 语言开发的 App，对 WebKit 实例进行下面设置允许网页检查器：

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

3. Java 开发的 App，对全局静态变量进行设置允许网页检查器：

// 在 Application 或主 Activity 中启用调试
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

4. Kotlin 开发的 App，对 WebKit 实例进行下面设置允许网页检查器：

// Application 级别启用调试
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true)
}

五、Mac 或 Windows 上 Chrome 调试模式运行的方法

使用命令行的方式启动 Chrome，并且指定参数：

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

⚠️ 注意：如果运行多个 Chrome，则每个的 --user-data-dir 值要不一样，--remote-debugging-port 值也不能一样，否则会端口冲突。

下一步

使用 WebDebugX 调试移动页面