手机端 WebView 调试：Chrome DevTools 远程调试指南

做移动端 H5 开发时，最头疼的就是调试。手机上没法直接打开 F12，alert 弹出调试信息又极其低效。Chrome DevTools 的远程调试（Remote Debugging）功能可以完美解决这个问题——在电脑上直接调试手机上运行的网页，包括 WebView 内嵌的页面。

环境准备

Android 端：用数据线连接电脑，手机开启"开发者选项"和"USB 调试"。Chrome 地址栏输入 chrome://inspect，就能看到已连接设备和所有可调试的 WebView 页面。iOS 端需要用 Safari 的"开发"菜单，在 iPhone 设置中开启 Safari → 高级 → Web 检查器。

实战场景：排查样式错乱

有一次项目中，某个页面在 Chrome 桌面模拟器上一切正常，但在真机上按钮错位、字体溢出。用远程调试打开 Elements 面板后发现：真机上的 WebView 对 flex 布局的 gap 属性支持有差异，在低版本 Android WebView 上完全被忽略。解决方案是改用 margin 模拟间距，加上 @supports 做渐进增强。

Console 与 Network 面板的价值

远程调试的 Console 面板和桌面版完全一样，可以实时查看 JS 报错和 log 输出。Network 面板能抓到手机上发出的所有 HTTP 请求，排查接口问题非常方便。尤其要注意的是，部分安卓厂商（如华为、小米）的默认浏览器内核不是完整版 Chromium，某些 API 可能不可用，必须用真机验证。

一个小技巧

如果调试的是微信内置浏览器或 App 内嵌 WebView，可以要求客户端开发开启 WebView 调试开关（WebView.setWebContentsDebuggingEnabled(true)），然后就能在 chrome://inspect 中看到了。这个开关一定要在生产包中关闭。