使用Chrome远程调试Android移动端WebView中的JS

1. 前言

移动端网页开发，最头疼的就是调试了，谷歌Chrome支持远程连接Android设备，调试WebView中打开的页面。

2. 准备工作

Android开发环境（adb工具）

一个Android设备，在PC安装好驱动（如果需要），开启调试模式，开启调试模式的方法这里就不累赘了，使用USB链接到电脑

PC端安装Chrome浏览器

PC端有可以正常使用的VPN（据你的网络环境而定是否需要，这个大家都懂的）

3. 远程调试的配置和使用

3.1. 打开远程设备界面

3.1.1. 第一种方法：在菜单中打开

PC中打开Chrome浏览器，在“菜单->更多工具->开发者工具”，或使用快捷键“Ctrl+Shift+I/F12"打开开发者界面，在调试面板中，点击右侧菜单按钮，在下拉菜单中“More tools->Remote devices”，打开远程设备界面，如下图所示：

连接接上远程设备，可以看到设备信息和调试加载的页面，如下图所示：

3.1.2. 第二种方法：在地址栏直接输入地址打开

如果觉得上面的步骤太麻烦，有更简单的，在Chrome地址栏输入“chrome://inspect/#devices”，直接打开打开远程调试设备界面，这种方式打开的远程调试设备界面跟上面的不太一样，但是大致结构都差不多，有设备的名称，页面所在应用的包名等等信息，如下图：

3.2. 调试远程设备页面

在远程设备界面中点击“inspect”进行跟踪调试，打开跟中调试界面，如下图所示：

接下来，就可以尽情的调试测试了。

4. 常见问题及处理

4.1. 无法看到设备（无法连接设备）

如果在准备工作无误的情况下，仍旧无法看到你的Android设备，请检查你PC的adb端口。查看adb的端口，使用adb start-server命令，可以看到端口，如果已经启动adb服务，先调用adb kill-server关闭服务。

获取到adb的端口后，添加到配置中。

如果是用上面一种方法打开远程设备界面的方式，在Settings里面的Port forwarding中，点击Add rule添加端口。

如果是用第二种方式（直接在地址栏输入地址）打开远程设备界面的，启用Discover USB devices，点击“Port forwarding...”按钮打开窗口添加端口，如下图所示：

4.2 无法看到调试的应用

在项目中，在Android4.4以后，需要WebView下设置，支持远程调试。否则无法看到调试应用的相关页面，无法进行调试。

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

4.3 点击“inspect”出现白屏无法加载成功

此时你需要连接上VPN再打开。