手机开启远程调试教程（适用于 Chrome / Safari）
前端移动端调试指南｜适用 iPhone 和 Android｜WebDebugX 出品
本教程将详细介绍如何在 iPhone 和 Android 手机上开启网页检查器，配合 WebDebugX 实现远程调试。教程包含 Chrome、Safari 浏览器设置，USB 调试启用方法，以及 App 中启用调试支持的代码示例，帮助开发者快速定位移动端网页问题。
一、iPhone 开启 Chrome 远程调试功能（需配合 WebDebugX 使用）
- 打开 Chrome 浏览器，点击底部菜单栏。
- 进入 设置 → 内容设置。
- 启用 网页检查器 开关。
✅ 配合 WebDebugX 即可连接设备并进行网页调试。
二、iPhone 启用 Safari 网页检查器（Safari Web Inspector）
- 打开 系统设置，搜索“Safari”。
- 滑动到底部，进入【高级】选项。
- 打开【**网页检查器（Web Inspector）】开关。
💡 使用WebDebugX，Safari 远程调试不需要连接 Mac，查看调试设备。
三、安卓手机开启 Chrome 远程调试（适配所有主流安卓设备）
- 打开手机【设置】→【关于手机】→ 连续点击 7 次“版本号”激活开发者模式。
- 返回设置首页，搜索“开发者选项”。
- 找到并开启【**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 应用调试。
)
