关于微信、app等内嵌WebView开发调试技巧

工欲善其事必先利其器

曾几何时，在v0.x版本的微信开发者工具是自带真机调试功能的，但从微信小程序横空出世后，公众号网页开发模式就找不到这个真机调试的功能了...，估计是“失宠”了吧 o(╥﹏╥)o

于是乎，有很多小伙伴就开始懵了 => 微信网页如何进行开发功能调试？

正所谓办法总比困难多，下面以微信为例介绍几个内嵌webview开发调试技巧，总有方法适合你的（如果没有，欢迎留言提出，大家一起交流）

1. 首当其冲的是官方的微信开发者工具，能解决问题的话当然就不必使用下面方法了

2. （仅限安卓端）chorme浏览器inspect调试

   • 在微信中打开http://debugx5.qq.com（“文件传输文件”用起来）
   • 切换“信息”tab，勾选打开TBS内核inspector调试功能
   • 连接手机在chorme浏览器打开chrome://inspect/#devices

3. Fiddler设置

   • 打开Fiddler，右侧有AutoResponder选项，
   • 勾选 Enable automaticresponses 和 Unmatched request passthrough 选项
   • 左边找到需调试的文件，如果看不到请求，有可能是缓存，退出微信重新登录，注意不是杀掉进程，将文件拖拽至右侧
   • 在Rule Editor中的第二行，点击下拉选项最后选项为“Find a file”选择目标文件
   • 在chorme浏览器打开chrome://inspect/#devices
   image

4. 插件

   将插件打入应用或页面中，然后打开调试查看相关信息

   将调试插件打入应用，通过特殊手势或者隐藏开关即所谓“后门”开启， 此方法有助于解决版本上线后，客户表示出现bug，但我们又无法重现的情况

   image

   移动调试插件很多，这里简单举两个例子：Vconsole和eruda，可查阅相关资料
   https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md
   https://github.com/liriliri/eruda/blob/master/doc/README_CN.md

5.spy-debugger
spy-debugger是一站式页面调试、抓包工具，上手容易且较为强大。
推荐链接：https://github.com/wuchangming/spy-debugger