Z
返回文章列表

抓包调试工具Whistle

1 min read

之前在微信公众号看文章的时候就发现不能呼出开发者工具，有什么解决办法吗？于是就了解到了这个 叫做 Whistle的工具，一个可视化网络调试代理工具，基于nodejs，开源，你也可以自定义一些功能

安装Whistle#

BASH
左右滑动查看完整代码
npm install -g whistle
w2 start

# 启动后是这样
PS D:\sass\e-assistant> w2 start
[i] Whistle@2.10.2 started
[i] 1. Use your device to visit these URLs and note which one works:
       http://127.0.0.1:8899/
       http://198.18.0.1:8899/
       http://10.0.0.144:8899/
       http://192.168.249.17:8899/
       Note: If none are accessible, check your firewall settings
             For help, see https://github.com/avwo/whistle
[i] 2. Set your device's HTTP PROXY to the working IP & PORT(8899)
[i] 3. Open Chrome and visit http://local.whistlejs.com/ to begin

启动后界面长这样

将你要抓包调试的软件代理配置到8899端口上，因为大多数接口都是https，我们还需要安装证书

双击安装之后，这一步非常重要，显示导入成功就安装好了证书

调试#

之后在你的软件设置代理到127.0.0.1:8899

之后就可以在web界面的network面板看到请求了

在微信里打开对应网页，就可以进行抓包了，这里举个例子，不是真的要抓我光哥的付费文章

注入vconsole#

怎么看到更多关于的调试的信息？需要一个工具，可能前端都见过，开发版调试小程序的界面会有这个东西

  1. 点击侧边栏 values
  2. 点击右上角create，创建一个**vconsole.html**，内容如下
HTML
左右滑动查看完整代码
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>

<script>
  var vConsole = new window.VConsole();
</script>
  1. 点击rule面板，添加一条规则
HTML
左右滑动查看完整代码
# 将 vconsole.html 里的代码强行注入到所有网页中
* htmlAppend://{vconsole.html}
效果如图，右下角会多出一个vconsole的悬浮窗

你甚至可以这样

weinre调试#

习惯了谷歌的devtools，可以用weinre进行远程调试

先添加一条规则

PLAIN
左右滑动查看完整代码
* weinre://debug_name
然后点击

之后刷新你所在的界面

移入body，会看到聚焦效果，其实有点公众号页面，直接丢开发者工具里面，也能看，但有的特殊一点的页面是会被拦截的，而且这种页面都是有awsm加密的，不要去乱逆向

这个时候，调试就和在chrome里面一样了，network和console和devtool差不多

这个很强大，因为可以远程调试，其实在手机上都能用，前提是在同一局域网，设置好代理就行

wifi设置手动，ip是你服务的地址，端口8899，然后需要打开刚刚的webui，下载证书，在手机上安装

alert一段文字玩玩

done