前言

做移动端h5项目的时候，电脑浏览器调试样式和效果，可能和真机展示出来的效果有差距，比如有的手机开启了home键，比如文字大小等样式有偏差。虽然可以通过手机扫描网页二维码在手机上看样式，但是和真机还是有区别。

最近没有带数据线，记录下怎么利用ADB实现无线真机调试。

一、电脑下载安装adb

adb 的全称叫 Android Debug Bridge（调试桥）,是一个android 的调试工具，在电脑端能通过这个工具连接到android系统的机器上进行一系列的操作，如安装包，运行调试命令，控制系统等。

Windows版本：https://dl.google.com/android/repository/platform-tools-latest-windows.zip

Mac版本：https://dl.google.com/android/repository/platform-tools-latest-darwin.zip

Linux版本：https://dl.google.com/android/repository/platform-tools-latest-linux.zip

直接在浏览器输入下面的地址即可自动下载压缩包，下载后解压放到自己想放到的目录。然后配置环境：

windows+r打开黑窗口，输入`sysdm.cpl`，回车。高级->环境变量->系统变量->path（解压后的放置路径）。

 

再次windows+r打开黑窗口，输入`adb --version`，出现版本信息安装成功。

二、手机和电脑连接在同一WiFi下

三、手机打开开发者选项的无线调试（以小米为例）

点击设置->我的设备->全部信息与参数->点击MIUI版本（一直点击，直至打开开发者选项）。然后在设置里搜索开发者选项，点开后找到无线调试。（题外话：里面也有USB调试，此方法可以不装abd，不过本文记录的无线调试方法）

三、连接

1. 保证 SDK 为最新版本（`adb --version >=  30.0.0`）;
2. 运行`adb pair ip:port`，输入手机无线调试里显示的配对码、IP 地址和端口号；
3. 根据提示，输入输入手机无线调试里显示的配对码，此时系统会显示一条消息，表明您的设备已成功配对；
4. 运行`adb -connet ip:port`。（仅适用于 Linux 或 Windows）

四、手机扫描网页生成的二维码（以edge为例）

五、浏览器调试（以edge为例）

在浏览器输入`edge://inspect`回车

 这里会出现你的设备，点击蓝色标签inspect，就会出现调试窗口。此时手机上操作什么窗口里也会同步。