前端移动端调试指南|适用 iPhone 和 Android|WebDebugX 出品
本教程将详细介绍如何在 iPhone 和 Android 手机上开启网页检查器,配合 WebDebugX 实现远程调试。教程包含 Chrome、Safari 浏览器设置,USB 调试启用方法,以及 App 中启用调试支持的代码示例,帮助开发者快速定位移动端网页问题。
✅ 配合 WebDebugX 即可连接设备并进行网页调试。
使用WebDebugX,Safari 远程调试不需要连接 Mac,查看调试设备。
⚠️ 提示:不同品牌手机如华为、小米、OPPO、vivo 等,开发者选项路径可能略有差异。建议结合品牌名称进行搜索。
为确保网页内容在 WebView 中可调试,请在对应语言中启用调试配置:
if (@available(iOS 14.0, *)) {
webView.inspectable = YES;
}
if #available(iOS 14.0, *) {
webView.isInspectable = true
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true)
}
✅ 启用以上设置后,即可在 WebDebugX 中使用远程检查器查看 WebView 内嵌网页内容。
通过命令行启动 Chrome 浏览器,开启远程调试端口:
chrome.exe --remote-debugging-port=9222 --user-data-dir=chromedatadir
⚠️ 注意事项:
--user-data-dir
不同。--remote-debugging-port
的值也不能重复,避免端口冲突。 官方详细图文教程 - WebDebugX
WebDebugX — 专业的移动端网页远程调试工具,支持 iOS / Android / WebView 应用调试。