排查Bug的利器--远程调试

去伪存真
6,221 阅读10分钟

扫码快捷打开调试模式

  • 微信打开下面的链接

image.png

  • 企业微信v4.1.13 扫下面的二维码

image.png

image.png

  • 下面的二维码 要把企业微信降级到v3.1.10版本才可以

image.png

一 weinre真机调试Dom树的痛点：

　　笔者最先接触的真机调试工具是weinre，使用weinre在真机上调试H5页面，有一个突出的缺点，就是因为无线网络数据传输不如USB数据传输快，页面dom在weinre的Elements面板不是显示缓慢，就是显示不出来。如下图所示，单页应用页面dom树,压根就显示不出来。不知大家平时用不用weinre的Elements面板，用得爽不爽？除此之外，weinre的Elements面板，也没有选择dom的操作菜单，没有PC端打开的开发调试工具那么好用。要是调试真机上的H5页面能和在PC机上调试网页一样就太方便了，有没有这样的技术，答案是肯定的。在Android上是Android +Chrome组合，在IOS上是IOS+Safari组合。借助remotedebug-ios-webkit-adapter这个工具，甚至可以在Windows平台上调试IOS+Safari+H5页面，笔者使用的是Android手机，所以侧重介绍在Android手机上，如何调试H5网页，包括微信环境中的H5页面。

image.png

二 Windows+ Chrome 如何真机调试 Android上的 H5/微信页面？

工作原理是在你的移动设备上创建一个监听 TCP 端口，该端口映射到你的开发机器上的一个指定 TCP 端口，默认是8080。这些端口之间的流量通过 USB 来传输。

2.1 调试准备

  • 电脑上安装谷歌浏览器。
  • 给手机充电的USB数据线
  • 要调试的h5/微信页面

2.2 在PC端谷歌浏览器地址栏输入  chrome://inspect/#devices 回车，勾选Discover USB devices选项

Chrome会自动检测手机设备，以及在手机设备上打开的H5页面，列出可以调试的H5页面

2.3 让手机可以被PC端的Chrome浏览器检测到

许多人都卡在了这一步，功败垂成。正确的姿势是：

2.3.1 打开手机上的USB调试开关 

笔者使用的手机USB调试开关设置方式是：打开  设置==>开发人员选项==>USB调试，打开即可。开发人员选项在Android4.2以下，可以直接看到。 在Android 4.2及以上版本中默认是隐藏的。打开开发人员选项的方法是：打开 设置==>关于手机，连续点击版本号7次即可。

2.3.2 使用USB线连接手机和电脑

这里有个隐藏的大坑。如果你使用的是仅有充电而没有数据传输功能的USB线，连接电源的话，手机通知栏没有多余的菜单选项。如下面所示的这种USB 三合一 充电线。那么你的手机是无法被PC端的Chrome浏览器检测到。数据线和充电线是有区别的：充电线用到的是电源的VCC和GND这两跟线，而数据线同时用到VCC，GND，+D,-D这四根线。所以数据线可以当电源线，而电源线不能用作数据线。

手机原配的USB充电线，都有数据传输功能。连接电脑之后，在手机的通知栏，会弹出USB连接方式的选项，默认USB连接方式是仅充电。要进行真机调试的话，除了不能选择仅充电和反向充电选项之外，另外几种模式都可以选。

 

 首次调试，手机会弹出是否允许电脑调试手机的问询对话框，勾选允许使用这台计算机进行调试，在手机上做完这两步配置，PC端的Chrome浏览器才能检测到需要调试的设备。

注意：每次重新连接时，都得重新选择USB连接模式为非充电模式。

一切正常的情况下，你将看到检测出的移动设备：

2.4 在手机的Chrome浏览器上，打开要调试的h5/webview页面

image.png

点击某个想要调试的页面下方的inspect之后，就能在PC端调试真机上的页面dom树了。如下图所示：

你会发现，有时候在PC端无法滑动要调试的页面，如果要调试页面底部的样式，该怎么办，其实很简单，就是在真机上把页面滑动到底部，PC端的调试页面也会跟着真机一块滑动到页面底部。然后在PC端调试页面修改页面底部元素样式，在真机会看到，修改的样式会同步生效。还有要是有搜索框，要在真机上操作，在PC端操作是无效的。

如果你想在 微信/企业微信 中调试H5页面，需要分别用微信/企业微信扫描下方的二维码，目前腾讯官方提供的微信页面调试工具 debugxweb.qq.com/?inspector=… 只支持Android手机。

image.png

这个设置只需设置一次。然后在微信/企业微信中打开你要调试的页面，就能调试微信/企业环境的H5页面样式了。

三 Windows+Chrome如何真机调试 IOS上的 Safari H5页面？

3.1 安装远程调试工具 remotedebug-ios-webkit-adapter

3.1.1 remotedebug-ios-webkit-adapter简介

RemoteDebug iOS WebKit Adapter提供了一个协议适配器，以处理Chrome调试协议和Webkit远程调试协议之间的API差异。此适配器可使基于Chrome调试协议（CDP）的工具在iOS上调试Safari / Webkit 。该项目是现有ios-webkit-debug-proxy项目的延续。iOS版本检测依赖libimobiledevice的ideviceinfo。它可以使Windows、Mac上的VS Code、’Chrome DevTools、Firefox debugger.html之类的工具可以对iOS上的Safari和WebViews页面进行调试。DOM / CSS编辑，控制台，网络工具，脚本调试功能已经实现，触摸仿真还没有完全实现。

3.1.2 安装scoop

scoop 是一个 Windows 命令行安装工具，常用于安装没有GUI界面的开发工具。安装ios-webkit-debug-proxy需要用这个工具,打开powershell,执行下面的命令

#设置执行安全策略，允许本地脚本的执行，执行策略选择全是,输入A
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
#安装 Scoop，该命令将 https://get.scoop.sh 加载到内存，并没有把该脚本下载到本地。
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

如果报这样的错:

 需要暂时关闭电脑上的杀毒软件

3.1.3 安装 remotedebug-ios-webkit-adapter

# ios-webkit-debug-proxy收录在extras仓库，scoop默认的仓库只有main，需要先添加extras软件仓库到scoop中
scoop bucket add extras
# remotedebug-ios-webkit-adapter依赖ios-webkit-debug-proxy
scoop install ios-webkit-debug-proxy

再全局安装 remotedebug-ios-webkit-adapter，安装成功后，你将能在命令行中使用 remotedebug_ios_webkit_adapter 命令。

# 检测手机的版本信息
cnpm install -g vs-libimobile
cnpm install remotedebug-ios-webkit-adapter -g

3.2 安装 iTunes

下载 iTunes，这个是为了在 windows上连接 iPhone 时可正确识别 iPhone 设备，否则无法识别。安装完 iTunes 后，首次连接 iPhone，手机会弹出是否信任该电脑的弹窗，选择信任即可。这个弹窗只会弹一次，之后每次就不用打开iTunes了。

3.3 连接调试

3.3.1 开启Web检查器

进入 iPhone 中的 设置 ==> Safari 浏览器 ==> 高级 ==> Web 检查器，开启该选项。

3.3.2 用iPhone手机连接电脑

打开 iTunes 并连接 iPhone，在 iPhone 弹框中选择信任该电脑。

3.3.3 启动适配器

打开命令行，执行以下命令，启动适配器：

remotedebug_ios_webkit_adapter --port=9000

3.3.4 在手机上打开调试页面

在 iPhone 中用Safari 浏览器打开待调试页面

3.3.5 进入浏览器调试页

在PC端Chrome 浏览器中输入 chrome://inspect/#devices 进入调试页，在 Discover network targets 选项添加 localhost:9000 配置。

3.3.6 调试页面

刷新页面，这时页面中会出现 'Remote Target' 列表，该列表展示了 iPhone Safari中打开的可以调试的页面列表，点击某个列表下方的inspect按钮，就会进入到相应页面的调试窗口。

image.png

image.png

四 微信小程序如何调试？

Charles的证书是被微信小程序信任的，所以可以用Charles抓取微信小程序网络请求包

4.1 下载安装Charles

使用 Charles 抓包工具，用户可以轻松地捕获和分析网络流量，包括 HTTP、HTTPS、FTP、SMTP 等协议的网络通信。Charles 还可以将捕获的数据保存到本地文件中，或者将其发送到其他应用程序中进行进一步分析。

4.2 在计算机上安装Charles证书

   

4.3 勾选https转发设置，并开启PC端所有请求走Charles代理

 

4.4 用桌面微信打开要调试的微信小程序，用Charles就能抓取到微信小程序的数据包

 

五 在本地如何调试线上功能？

先介绍一个基于 Node 实现的跨平台 Web 调试代理工具whistle，涵盖了web请求的方方面面，我们可以通过它调试移动端，设置代理和host,  抓包，Mock 数据、修改请求延迟时间、修改静态文件，延迟请求响应、限制请求响应速度等，且支持通过Node模块进行扩展。借助whistle的代理功能，可以将访问生产环境域名下的请求映射到本地服务器，从而可以在本地调试生产环境的功能。我们以IOS系统为例，讲讲如何在PC端本地调试调试线上移动端页面。

5.1 手机和电脑连接同一个网络

使用使用的是有线网络，电脑通过无线网卡共享有线网络，手机连接电脑共享的WiFi，如果是无线网络，让手机和电脑连接同一个无线网络。。

5.2 全局安装whistle

全局安装whistle并启动whistle，获取电脑上无线网络whistle代理的IP地址和端口

cnpm install -g whistle

5.3  下载证书

在手机连接的WiFi网络上（发现WiFi如果是手机共享出来的WiFi，则设置代理不起作用），设置电脑上无线网络的whistle代理，然后在Safari中输入 rootca.pro, 下载rootca证书，进行安装 (Safari真坑呀，不支持扫码下载证书)

5.4 设置证书信任

设置==>通用==>关于本机==>证书信任设置==>找到whistle证书打开信任(一部设备可以安装多个whistle证书)

5.5 设置转发规则

打开 http://127.0.0.1:8899/#rules 创建转发规则，开启调试weinre页面调试和站点日志输出功能

#修改某个请求的返回数据
https://test.xxx.com/path/api/news/detail.do file://{newDetail.json}
# 将公网域名转发到本地端口 开启weinre页面调试面板 开启日志输出功能
test.xxx.com     127.0.0.1:50000   weinre://weinre页面调试面板名称  log://日志名称

5.6 抓包调试

打开手机上的h5/webview/微信页面，在http://127.0.0.1:8899/#network面板 就可以看到抓包数据

后记

无线调试开启方法:

  1. 保证手机和电脑处于同一个WiFi之中
  2. 在手机上开启无线调试功能
  1. 通过USB将手机和电脑连接起来
  2. 在电脑终端执行如下命令，[ip:port]输入手机上无线调试显示的IP地址和端口
adb connect [ip:port]
  1. 此时就会看到如下的调试界面

image.png

avatar
文章
阅读
粉丝