工欲善其事必先利其器
曾几何时,在v0.x版本的微信开发者工具是自带真机调试功能的,但从微信小程序横空出世后,公众号网页开发模式就找不到这个真机调试的功能了...,估计是“失宠”了吧 o(╥﹏╥)o
于是乎,有很多小伙伴就开始懵了 => 微信网页如何进行开发功能调试?
正所谓办法总比困难多,下面以微信为例介绍几个内嵌webview开发调试技巧,总有方法适合你的(如果没有,欢迎留言提出,大家一起交流)
首当其冲的是官方的微信开发者工具,能解决问题的话当然就不必使用下面方法了
-
(仅限安卓端)chorme浏览器inspect调试
- 在微信中打开http://debugx5.qq.com(“文件传输文件”用起来)
- 切换“信息”tab,勾选打开TBS内核inspector调试功能
- 连接手机在chorme浏览器打开chrome://inspect/#devices
-
Fiddler设置
- 打开Fiddler,右侧有AutoResponder选项,
- 勾选 Enable automaticresponses 和 Unmatched request passthrough 选项
- 左边找到需调试的文件,如果看不到请求,有可能是缓存,退出微信重新登录,注意不是杀掉进程,将文件拖拽至右侧
- 在Rule Editor中的第二行,点击下拉选项最后选项为“Find a file”选择目标文件
- 在chorme浏览器打开chrome://inspect/#devices
-
插件
将插件打入应用或页面中,然后打开调试查看相关信息
将调试插件打入应用,通过特殊手势或者隐藏开关即所谓“后门”开启, 此方法有助于解决版本上线后,客户表示出现bug,但我们又无法重现的情况
移动调试插件很多,这里简单举两个例子: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