iOS safari和android chrome开启网页调试与检查器的方法

手机开启远程调试教程（适用于 Chrome / Safari）

前端移动端调试指南｜适用 iPhone 和 Android｜WebDebugX 出品

本教程将详细介绍如何在 iPhone 和 Android 手机上开启网页检查器，配合 WebDebugX 实现远程调试。教程包含 Chrome、Safari 浏览器设置，USB 调试启用方法，以及 App 中启用调试支持的代码示例，帮助开发者快速定位移动端网页问题。

---

一、iPhone 开启 Chrome 远程调试功能（需配合 WebDebugX 使用）

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

✅ 配合 WebDebugX 即可连接设备并进行网页调试。

---

二、iPhone 启用 Safari 网页检查器（Safari Web Inspector）

1. 打开 系统设置 ，搜索"Safari"。
2. 滑动到底部，进入【高级】选项。
3. 打开【**网页检查器（Web Inspector）】开关。

💡 使用WebDebugX，Safari 远程调试不需要连接 Mac，查看调试设备。

---

三、安卓手机开启 Chrome 远程调试（适配所有主流安卓设备）

1. 打开手机【设置 】→【关于手机 】→ 连续点击 7 次"版本号"激活开发者模式。
2. 返回设置首页，搜索"开发者选项"。
3. 找到并开启【**USB 调试（USB Debugging）】功能。

⚠️ 提示：不同品牌手机如华为、小米、OPPO、vivo 等，开发者选项路径可能略有差异。建议结合品牌名称进行搜索。

---

四、自研 App 启用网页检查器（支持 iOS 与 Android）

为确保网页内容在 WebView 中可调试，请在对应语言中启用调试配置：

iOS 开发（Objective-C）：

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

iOS 开发（Swift）：

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

Android 开发（Java）：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

Android 开发（Kotlin）：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true)
}

✅ 启用以上设置后，即可在 WebDebugX 中使用远程检查器查看 WebView 内嵌网页内容。

---

五、PC 上启用 Chrome 调试模式（Windows / macOS 通用）

通过命令行启动 Chrome 浏览器，开启远程调试端口：

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

⚠️ 注意事项：

• 如果运行多个 Chrome 实例，请确保每个实例的 --user-data-dir 不同。
• --remote-debugging-port 的值也不能重复，避免端口冲突。

---

推荐阅读

👉 官方详细图文教程 - WebDebugX

👉 WebDebugX --- 专业的移动端网页远程调试工具，支持 iOS / Android / WebView 应用调试。