使用Chrome DevTools调试安卓设备WebView页面

为什么

给前端工程师调试提供便捷，可以直接通过连接Android手机进行WebView的网页调试。

使用工具

• Opera Mobile 可以借助其推出的跨设备跨平台桌面开发者工具Opera Dragonfly 实现远程调试；
• iOS Safari 可以开启Web检查器在 Mac OS X系统中实现远程调试
• Android 4+已上系统的 Chrome for Android可以 配合 ADB（Android Debug Bridge）实现桌面远程调试
• 桌面版Chrome 32+已经支持免安装ADB即可实现远程调试移动设备页面WebView

本篇主要说一下Chrome RemoteDebugging 的方法，即上面所说的第四种方式，不需要安装ADB插件。

上图展示

image.png

实际操作

一、手机端打开USB调试并连接PC，点击确定进行调试

image.png
二、打开chrome浏览器，输入框下输入chrome://inspect/#devices，看到设备

注：打开后DevTools后，确保打钩选中Discover USB devices

image.png

三、找到需要调试的目标页面，点击inspect即可打开DevTools，点击reload可重新加载当前的调试页面