WEB 调试小课堂

avatar
前端切图仔 @豌豆公主

代理工具

常见的代理工具有下面的这些代表：

Fiddler 算是比较经典的免费代理软件，现在也是跨平台的，我就不过多的介绍，可以通过上面的链接了解了解。charles 是 MAC 上非常好用的调试代理软件，唯一的缺点就是它是收费的。AnyProxy 和 Whistle 都是基于 nodejs 实现的免费且开源的浏览器端调试代理工具，AnyProxy 是阿里巴巴出品，具有很高的灵活性，因为篇幅有限，我这里就挑我比较中意的 Whistle 来做介绍演示。

Whistle

whistle(读音[ˈwɪsəl]，拼音[wēisǒu])基于Node实现的跨平台web调试代理工具。

# 安装和更新命令
sudo npm install -g whistle
# 启动服务[默认端口 8899]
w2 start
# 修改默认端口启动
w2 start -p 8888
# 关闭服务
w2 stop

安装完且成功启动后，可以通过在浏览器输入 127.0.0.1:8899 来进入到管理界面。

浏览器配置代理

推荐使用 SwitchyOmega 这个插件。

安装之后可以新建一个情景模式

预览

最佳的一个模式是，我们再嵌套一个情景模式，比如叫做“智能调试模式”来实现，开发项目自动走代理，其他的不走代理，避免调试工具过载

最佳实践

解决 HTTPS 代理问题

在电脑端我们都需要安装好根证书。

MAC

点击顶部菜单栏中的 HTTPS，点击 Download RootCA 即可下载证书，双击进行安装。

证书

MAC 安装证书之后一定要进行“信任操作”，打开证书管理(Keychain Access)界面，找到带有 whistle 的字样的证书：

Keychain

双击证书后，点击 Trust 左边展开选项，红色部分选择 Always Trust （总是信任），点击左上角关闭当前界面会要求输入密码；输入密码后可 以看到证书上面红色的图标 x 不见了，到这一步说明完成证书安装。

Keychain

iOS

需要先在 wifi 中先配置代理，然后可以通过相机扫码二维码然后用 Safari 来打开链接，安装好证书，安装完成之后一定要进行信任操作：设置->通用->关于本机->证书信任设置

Android

安装过程同 iOS 几乎一致，通过扫描二维码下载证书并进行安装，因为现在主流的版本已经是 Android 7+，即使信任了自定义证书，但还是不能抓包，这个时候需要调试的 APP 配置信任用户证书：

<base-config cleartextTrafficPermitted="true">
   <trust-anchors>
       <certificates src="system" />
       <certificates src="user" />
   </trust-anchors>
</base-config>
常用功能
  • 本地值功能

配置 key-value 的数据，在 Rules 里面配置可以通过 {key} 获取，如：www.example.com file://{key}，将一些数据长期存储在应用内部，比如跨域头、通用的 js 注入代码等等。操作方法:

values.gif

  • 配置 HOST

相较于修改操作系统的 hosts 文件的方式，最大的优点就是不需要额外的授权。

127.0.0.1 www.example.com
  • 修改跨域头
# 对于静态资源完全可以使用内置的通配符
www.example.com resCors://*

# 如果是接口调试就必须指明具体的 host 因此需要使用文件的方式

www.example.com resCors://{Values Key}

Access-Control-Allow-Methods: GET,PUT,POST,DELETE,UPDATE,OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: xxx 修改成需要的 Origin
Access-Control-Allow-Headers: X-Requested-With,X-HTTP-Method-Override,Content-Type,Accept
  • 请求替换

pattern 参见匹配模式，更多模式请参考配置方式。

pattern host:port/xxx

比如实战情况，我把 QA 环境的文件映射到本地：

/^https?:\/\/(?:s\d*\.wandougongzhu\.cn\/h5|m\.qa\d+\.inagora\.org)\/resource\/dist\/(?:([^_]+)_.+|([^.]+))\.js$/ https://localhost:8888/resource/dist/$1.js
/^https?:\/\/(?:backend(?:\.dev|\.qa\d+)?|m(?:\.qa\d+)?)\.inagora\.org\/(resource\/dist\/.+)$/ https://localhost:8888/$1
/^https?:\/\/m\.(?:qa\d+\.)inagora\.org\/resource\/js\/lib\/vue2.min.js/ file:///Users/fumin/work/app/app/h5/www/resource/js/lib/vue2.js
https://s4.wandougongzhu.cn/h5/resource/js/lib/vue2.min_51ba31.js file:///Users/fumin/work/app/app/h5/www/resource/js/lib/vue2.js
  • 请求速度控制
# 控制速度在 10 kb/s
www.baidu.com reqSpeed://10

微信调试

微信大部分的调试通过官方模拟即可完成调试和 bug 追踪，但也存在极少数的情况需要真机环境进行调试。

模拟器调试

模拟器的调试，就跟使用浏览器一样，只是我们得使用微信官方的开发工具即可，具体操作步骤可以查看官方文档。

Android 调试

真机 Android 调试部分现在已经发生了变化，官方文档并没有更新。之前需要访问 debugx5.qq.com 来开启 debug 模式的开关，因为当时微信内置的是 webviewX5 内核，但是现在它的内核已经变成了 xweb，按照老教程就会有 内核下载失败:115->115 的错误。

新的操作方式是：在微信中发送消息 http://debugxweb.qq.com/?inspector=true ，然后点击这个链接，webview 的 inspector 就打开了。然后打开手机的调试模式，用数据线连接手机后，在 Chrome 浏览器中输入 chrome://inspect 。然后用微信打开需要调试的网页，如果不出意外，调试列表就会出现需要调试的页面。当然这里有个隐藏条件，第一次打开调试器需要科学上网。

iOS 调试

iOS 目前没法在真机上进行调试，只能通过变相的方式去做调试，这个地方我介绍 whistle 内置的 Weinre 调试工具。

在浏览器中打开 whistle 界面，在规则中新增 pattrern weinre://key

iOS 真机调试时，需要将 Safari 的 网页检查器 打开

avatar
文章
阅读
粉丝