网页外部注入vConsole调试

 

概要

本篇介绍一种十分方便的方法为网站添加 vConsole 调试(通过篡改请求外部注入的方式，不需要您是网站的拥有者，主要用于调试线上站点)。 之前已经发过一篇《》，不过那篇操作起来还是比较复杂。因为那篇帖子使用了大量篇幅介绍操作原理，至使简单的问题也用了较长的篇幅，但是不是所有同学都喜欢那样的风格，而且为了演示FreeHttp对不存在资源的mock，对于vconsole.min.js使用了一个本地资源，让复杂度进一步加大。   现在借助FreeHttp2.3.0的规则分享功能，让操作变得十分简单，几乎不需要任何基础就可以马上看到效果。    

如何开始

FreeHttp 插件安装

1：您的计算机需要已经安装Fiddler。 （如未安装，请至官网下载安装 http://docs.telerik.com/fiddler/configure-fiddler/tasks/configurefiddler）

2：进入Fiddler安装目录的Scripts目录下，将FreeHttp.dll复制到该目录下即可 。 (文件下载请至：https://files.cnblogs.com/files/lulianqi/FreeHttp2.3.0zip  或 http://lulianqi.com/file/FreeHttp2.3.0.zip   解压可得到 FreeHttp.dll  ）

3：重启Fiddler即可在面板中出现 FreeHttp 标签。

4：如果您是第一次使用Fiddler您可能还需要配置Fiddler开启https解析，或者您需要抓取手机移动端的请求您也需要先为这些设备安装根证书，不过这些设置比较简单您在互联网上也可以找到大量的说明。

如果您想详细了解FreeHttp 可以参考《》 （这个篇幅较长，有需要可以后面再看）

 

操作实践

  FreeHttp插件安装完成后，直接选择【Moific Tool】-【load remote rule】打开远程规则分享窗口     在弹出窗口中只需要3步

1. 在remote rule token 中填写 token 27fd3332873d4f659e29136a9d5c211d （27fd3332873d4f659e29136a9d5c211d 是公开的token 直接使用即可）
2. 点击 Get Rule
3. 点击 Merge Remote Rule

  完成后您FreeHttp的 规则列表会自动添加分享的远程规则，按上图所示开启篡改规则。   进入Bing.com   现在您可以看到效果，并且可以开始调试。   通过对规则进行简单的修改，您可以将vConsole注入到任何网页（包括微信公众号，移动端网页，APP嵌入H5页面） 如何修改规则，可以参考 （2.3：『response-modific』响应修改）   FreeHttp还有一些其他的应用实践可以参考下面内容        借助FreeHttp为任意移动端web网页添加vConsole调试         微信授权登录mock（在没有真实微信账号的情况下测试大量微信账户授权登录的情况）        HTTPS中间人攻击实践（原理·实践）        使用FreeHttp强制登出微信公众号登陆状态（实现~原理）        使用浏览器访问或调试微信公众号（跳过微信认证）        ）