h5开发真机调试

前端Jeek 2023/2/16 真机调试h5

🌙 1.使用浏览器模拟真机

F12打开开发者工具，或者页面鼠标右键选择查看，进入web开发调试模式。
默认是进入web端界面，可以在卡法这模式下使用快捷键ctrl + shift + m 进入移动端界面。

有时候h5页面在浏览器端和手机移动端显示不一致，往往是在浏览器移动调试界面正常，在手机上表现不一致，这个时候就需要使用手机来真机调试了。

一般地，开发环境下代码在电脑上跑，h5的域名和端口是在电脑上才能访问的（比如：localhost:3000），要想在手机上打开对应的h5页面，那么该怎么办呢？

🌙 2.使用共享网络访问

如果电脑和手机在同一wifi环境下，可以通过ip来访问

通过ipconfig查看本机ipv4地址，然后把localhost:3000替换为对应的ip$ip:3000,手机就可以访问了。

$ ipconfig

Windows IP Configuration
Ethernet adapter 以太网:

   Connection-specific DNS Suffix  . :
   IPv6 Address. . . . . . . . . . . : 240e:ff:a010:26d:feee:36b5:ca2d:fe2e
   Link-local IPv6 Address . . . . . : fe80::ac50:7f9b:5707:c085%14
   IPv4 Address. . . . . . . . . . . : 192.168.99.59 # ipv4
   Subnet Mask . . . . . . . . . . . : 255.255.255.0
   Default Gateway . . . . . . . . . : fe80::9e54:c2ff:fe3e:5ec1%14
                                       192.168.99.1

Ethernet adapter 以太网 4:

   Media State . . . . . . . . . . . : Media disconnected
   Connection-specific DNS Suffix  . :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

🌙 3.使用USB真机调试

可以手机USB连接电脑，打开USB调试，通过chrome浏览器chrome://inspect进入真机调试界面

一般在开发测试环境我们会在页面中嵌入抓包工具，比如：vConsole (opens new window)

在生产环境为了安全性访问，会把调试、抓包等入口关闭禁用，USB真机调试往往行不通。

如果要定位线上的一些问题，往往需要抓包。如果是web端还可以在浏览器访问，通过浏览器调试查看请求。

但是h5一般是内嵌在原生app里面，测试环境有时候不能重现线上问题，需要线上抓包才行，那么就需要使用一些非常规手段了——代理。

🌙 4.使用whistle代理

Whistle 是基于 Node 实现的跨平台抓包调试工具，其主要特点：

1.完全跨平台：支持 Mac、Windows 等桌面系统，且支持服务端等命令行系统
2.功能强大（理论上可以对请求做任意修改）：
- 支持作为 HTTP、HTTPS、SOCKS 代理及反向代理
- 支持抓包及修改 HTTP、HTTPS、HTTP2、WebSocket、TCP 请求
- 支持重放及构造 HTTP、HTTPS、HTTP2、WebSocket、TCP 请求
- 支持设置上游代理、PAC 脚本、Hosts、延迟（限速）请求响应等
- 支持查看远程页面的 console 日志及 DOM 节点
- 支持用 Node 开发插件扩展功能，也可以作为独立 npm 包引用
3.操作简单：
- 直接通过浏览器查看抓包、修改请求
- 所有修改操作都可以通过配置方式实现（类似系统 Hosts），并支持分组管理
- 项目可以自带代理规则配置并一键设置到本地 Whistle 代理，也可以通过定制插件简化操作

摘自whistle (opens new window), 见具体安装使用方式

安装成功之后，开启whistle代理

$ w2 start
[i] whistle@2.9.30 started
[i] 1. use your device to visit the following URL list, gets the IP of the URL y
ou can access:
       http://127.0.0.1:8899/
       http://192.168.99.59:8899/
       Note: If all the above URLs are unable to access, check the firewall sett
ings
             For help see https://github.com/avwo/whistle
[i] 2. set the HTTP proxy on your device with the above IP & PORT(8899)
[i] 3. use Chrome to visit http://local.whistlejs.com/ to get started

1
2
3
4
5
6
7
8
9
10
11
12

手机连接wifi之后，在wifi界面设置代理，填入whistle对应的ip（如：192.168.99.59）和端口（默认：8899），这时手机访问h5页面的请求会被whistle实时捕获。

我们通过浏览器访问http://127.0.0.1:8899/ 即可查看请求和响应参数，可以愉快地定位问题了。

另外，whistle还提供了一些插件，比如：vconsole可以把vconsole嵌入到没有接入这个插件的页面。vase插件可以mock数据等等。

但是，如果电脑和手机不在同一个局域网环境，那么这种方式就行不通，我们可以想方设法使他们在同一网络下。

这时，我们可以尝试使用以下代理的方式。

🌙 5.使用adb代理

由于笔者是win10电脑，下面只针对windows和android

1.下载gnirehtet-windows版 (opens new window),解压之后获取：
- gnirehtet.apk
- gnirehtet.exe
- gnirehtet-run.cmd
2.安装最新adb：各平台的 adb 下载链接 —> Android SDK (opens new window)。下载 platform-tools (opens new window) 并将以下文件提取到 gnirehtet 目录：
- adb.exe
- AdbWinApi.dll
- AdbWinUsbApi.dll
3.手机USB连接电脑，并打开USB调试模式，需要勾选 USB安装和 USB调试(安全设置) 两个选项
4.执行gnirehtet：在 Windows 上，双击 gnirehtet-run.cmd，然后手机上会弹出一个窗口请求权限，确认即可，这时手顶部会有一个vpn开启的标志，即大功告成。

然后手机和电脑就共享了网络，手机无论是关闭流量，或者打开飞行模式，都可以可以上网。

参考：手机通过USB连接电脑上网 (opens new window)

🌙 6.其他方式

AGB方式 (opens new window)

这个笔者没试过，感兴趣的小伙伴可以去试试。

接口联调那些事儿