前端抓包调试工具

一、调试工具

1、h5调试

• 推荐使用腾讯团队开发的vconsole，毕竟团队官方在维护，稳定性和安全性更有保证。
• 官方文档：https://github.com/Tencent/vConsole
• 经历了2020年整年没有更新，在2021年又重新开始了大量更新，直接上最新版吧，相对于老版本多了location的默认显示，再也不用手动输入location.href查看页面地址了。

2、小程序调试

• 小程序调试有官方内嵌的调试工具，也就是低配版的vconsole
• 开启方式：首先需要小程序是开发版或体验版，然后点击右上角三个点，打开调试，重新打开小程序就能看到了。
• 官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/usability/debug.html
• 如果想在线上小程序打开调试，可以先在对应的开发版或体验版小程序里打开调试，然后再打开线上版小程序，就能看到调试工具了，这不是bug，是小程序官方承认了的，算是后门。
• 小程序官方的调试工具很鸡肋，没有network日志，没有storage日志
• 对于接口数据请求的日志建议还是自己封装一下打印出来，所有接口都打印出来有点凌乱，建议做个判断，只在接口异常的情况下再打印接口日志，正常情况下的可以局部打印，也可以配合抓包工具查看。

二、移动端抓包

1、charles

charles是一款抓包工具，相比于fiddler凌乱的界面数据，charles更加清晰简洁，同时支持mac和windows。
不过它本身是收费的，有30天试用，网上有很多破解版，也有注册码，破解版百度一搜就能找到。

下面说一下安装完charles后的一些配置方式（v4.6.1）：

• 步骤一-获取电脑ip： 菜单栏 - Help - Local IP Address，这里是电脑本机ip地址
  

• 步骤二-手机组成局域网： 手机和电脑连接同一网域组成局域网，打开手机连接的wifi高级设置，配置代理，代理改为手动，主机名填写电脑ip，端口默认8888，保存

• 步骤三-手机安装证书： 手机打来浏览器输入chls.pro/ssl下载安装ca证书。

  • ios10+版本还需要在证书信任设置里信任一下安装的charles证书，具体方式：打开ios【设置】>【通用】>【关于本机】>【证书信任设置】，把刚才添加的证书后面的 Switch 打开。
  • android手机如果无法正常下载证书，也可以选择保存证书后手动安装。具体方式： charles菜单栏 - Help - SSL Proxying - Save Charles Root Certificate…，选择.cer格式保存在电脑上再传输给手机安装ca证书。
    

• 步骤四-配置代理访问白名单： 菜单栏 - Proxy - Access Control Settings，点击Add，填写0.0.0.0/0，点击OK
  

• 步骤五-配置https代理： 菜单栏 - Proxy - SSL Proxying Settings，勾选Enable SSL Proxying，左侧Include栏里点击Add，弹出的小窗里Host栏输入*，Port栏输入*，点击OK
  

ok完成。

2、spy-debugger

spy-debugger是一个专门服务于移动端h5的调试插件。

• 官方地址：https://github.com/wuchangming/spy-debugger
• 具体使用方式参考官方文档教程，不再赘述了。
• 需要注意手机配置手动代理时默认端口号是9888，手机安装证书方式的网址是http://s.xxx

重点来了，spy-debugger相比于charles的优势是什么：

• spy-debugger能抓取到spa单页面应用hash路由下的完整页面地址，包含#号后面的路由和参数，而charles抓取不到#号之后的地址内容。
• spy-debugger能达到移动端vconsole工具的效果，能在电脑上显示调试页面的面板信息，包括elements页面元素、css样式、console日志、storage存储内容都能显示，对于线上bug的排查非常有用。
• spy-debugger能修改页面elements元素和css样式，且页面能实时看到修改后的效果，样式bug排查利器。

3、安卓7.0+版本下的抓包

安卓7.0+的版本，app里默认会有安全限制，只信任系统证书，默认情况下是无法抓到包的。

• 方案一： 在app里配置信任用户证书。
  配置文件：res/xml/network_security_config.xml

  <network-security-config>
      <base-config cleartextTrafficPermitted="true">
          <trust-anchors>
              <certificates src="system" overridePins="true" /> <!--信任系统证书-->
              <certificates src="user" overridePins="true" /> <!--信任用户证书-->
          </trust-anchors>
      </base-config>
  </network-security-config>
  

• 方案二： 把ca证书安装到system系统证书目录里：

  • 需要手机提前获取完整root权限（需解锁system分区）
  • 系统证书的目录是：/system/etc/security/cacerts/
  • 每个证书的命名规则为：<Certificate_Hash>.<Number>
  • Certificate_Hash表示证书文件的 hash 值，Number是为了防止证书文件的 hash 值一致而增加的后缀
  • 证书的 hash 值可以由命令计算出来，把证书(.pem格式)保存在电脑上，在电脑终端输入openssl x509 -subject_hash_old -in <Certificate_File>，其中Certificate_File为证书路径，得到结果hash，将证书重命名为hash.0放入系统证书目录，修改权限为rw-r-r，即可正常抓包。
  • 无法使用openssl的可以百度win10安装openssl，按照教程安装，配置完环境变量后记得重新打开命令窗口操作。
  • 

我自己的手机是安卓，目前是用的最后这个方式，就是安装证书到系统目录，过程也是相当艰辛。。。

---

参考链接：
https://testerhome.com/topics/17746