使用PC浏览器devTool工具调试安卓手机h5页面

背景

开发前端 h5 项目的过程中，经常遇到不同移动端设备的不同浏览器的兼容性问题，尤其是当遇到布局异常问题时，我们往往苦于没有办法去检查移动端设备上的实际元素，从而导致难以定义问题，此时就需要有办法去调试移动端设备上的 h5 页面。

解决方案

实际上，各个主流浏览器都为这种情况提供了专门的调试办法如Google浏览器打开chrome://inspect/#devices、Edge浏览器打开edge://inspect/#devices都可以进入专门的调试界面，在调试界面左侧Devices选项中，可以看到Discover USB devices和Discover network targets两个选项，分别就代表了使用USB调试和使用无线调试。

当你勾选其中某个选项时，GoogledevTool就会开始监听是否有对应的设备接入，如果有设备接入，并且设备上有已经打开且展示网页的webview，则下方会显示对应的网页链接信息，点击链接下方的inspect，就会弹出平时我们在电脑浏览器上调试网页一样的调试界面了。

所以针对于安卓移动端设备，关键是如何开启这两种调试模式，从而能够让电脑浏览器监听到成为了重中之重，以下是实测之后的方法：

操作步骤

首先，需要下载 Android SDK Platform-Tools，下载完成后，打开命令行cd到adb.exe所在目录中，等待后续操作：

无论是USB 调试还是无线调试，都要提前打开手机的开发者选项，不同品牌移动端设备打开的方式不一致，自行网络搜索，不再赘述

USB 调试

进入到开发者选项界面，找到USB调试的选项，打开
使用一根数据线，连接你的手机和电脑，这里需要确保手机上将数据线连接模式选择为传输文件，不能是仅充电，此时移动端设备会弹出请求是否允许当前连接的计算机对你的设备进行USB调试的弹窗，点击确认
此时打开移动端设备浏览器，进入一个网页，然后观察你电脑浏览器上的监听页面，等待一会儿，就会发现下方出现了对应的网页链接信息（部分移动端浏览器可能不支持，但是主流浏览器都是可以的）

无线调试

首先，确保你的移动端设备和你的电脑出于同一个局域网之中，相互能够ping通
进入到开发者选项界面，首次与你的电脑配置无线调试时，需要先确保你的移动端设备已经打开了USB 调试模式
找到无线调试的选项，打开，此时移动端设备会弹出请求是否允许当前连接的网络对你的设备进行无线调试的弹窗，点击确认
然后就进入到了无线调试的配置信息页面，此时你的移动端设备界面上应该会显示你的设备当前用于无线调试的IP和端口，如192.168.31.80:40931，还会显示已经配对过的设备
这时候需要我们在platform-tools的命令行中输入：adb connect 192.168.31.80:40931去链接你的移动端设备，连接成功命令行种会显示connected to 192.168.31.80:40931，移动端设备也会弹出提示已连接到无限调试提醒，的移动端设备界面上已经配对过的设备也会新增你当前的电脑设备
此时打开移动端设备浏览器，进入一个网页，然后观察你电脑浏览器上的监听页面，等待一会儿，就会发现下方出现了对应的网页链接信息（部分移动端浏览器可能不支持，但是主流浏览器都是可以的）
后续再进行无线调试的时候，就可以脱离数据线了，每次重新开启移动端设备的无线调试，端口都会改变，比如变成了192.168.31.80:40932，此时需要重新在platform-tools的命令行中输入：adb connect 192.168.31.80:40932，就可以继续调试了

常见问题以及解决方案

问题一：移动端设备上的`USB 调试`明明已经开启了，电脑浏览器上的监听页面上却始终监听不到

查看你的数据线连接模式是否选择为传输文件，不能是仅充电
拔掉数据线，关闭重启USB 调试后，再插上数据线试试
拔掉数据线，开发者选项中选择撤销 USB 调试授权后，关闭重启USB 调试后，再插上数据线试试
重启手机，再执行上述1、2、3试试
再不行的话可能就是adb 授权异常导致的了，此时需要在移动端设备打开调试模式，使用数据线连接了电脑之后，打开platform-tools的命令行，输入命令adb devices，此时移动端设备会弹出请求是否允许当前连接的计算机对你的设备进行USB调试的弹窗，点击确认之后，就行了

问题二：无线调试执行`adb connect 192.168.31.80:40931`时，报错`failed to connect to 192.168.31.80:40931`

在platform-tool的命令行中，依次执行adb kill-server、adb start-server之后，重新执行connect
开发者选项中选择撤销 USB 调试授权后，重新在platform-tool的命令行中，执行dab devices，此时移动端设备会弹出请求权限的弹出，点击确认后，重新执行connect即可

补充知识

事实上，无论是USB调试还是无线调试，都需要你的电脑和你的移动端设备不仅仅在网络层建立连接（USB调试直接使用数据线物理连接，无线调试需要确保在同一个局域网下能ping通），还要保证在应用层建立连接授权（握手），之前说的移动端设备会弹出请求授权弹窗就是在做这个操作，不过有时这个握手状态会丢失，但是设备无法识别到，就导致USB调试无效或者无线调试时connect失败
而adb devices命令并不是一个简单的“查看”命令，它会强制触发一次“握手探测”，当ADB Server试图获取设备信息时，由于它检测到“连接存在但未授权”，它会强制发送一个认证请求。这个请求直接激活了Android系统的安全服务，从而在手机屏幕上弹出了那个“是否允许调试”的授权窗口。
执行完adb devices后可以看到类似下面的表格

List of devices attached

设备	状态
cc28fbc4 (USB连接设备)	device(已连接)/offline(未连接)/unauthorized(未授权)
192.168.31.80:40931 (无线连接设备)	device(已连接)/offline(未连接)/unauthorized(未授权)