利用Fiddler 调试线上代码

安装Fiddler

下载和安装Fiddler很简单

https://www.telerik.com/download/fiddler 下载之后按照向导安装即可。

Fiddler 测试线上代码原理：将本地文件和线上文件映射

首先将想要调试的文件下载到本地

比如浏览器打开京东网页(举个栗子而已)，打开Sources面板，找到想要调试的 search.js 文件，右键可选择保存到本地。

image

将本地文件和线上文件进行映射

打开Fiddler, 左边就会显示它抓取到的文件 ，找到想要调试的文件，可ctrl+f找到它

image

然后选择右边的 “AutoResponder”, 勾选上出现的面板上的"Enable Rule" 和'' Unmatched requests passthrough"，并将左边选择到的文件拖入面板内

image

点击拖入的search.js文件，则面板下面的“Rule Editor”对应的就是对它的映射的设置：

第一个输入框内的地址就会自动填入我拖拽入的那个文件

第二个框点开选择其中最下面的“Find a file… ”点击后就会出来文件框可以下载到本地的文件 search.js

image

最后点击"save"保存后，该线上文件和本地文件已经进行了映射。

本地修改代码

将本地文件和线上文件进行映射后，在本地修改文件后，到浏览器刷新页面，则线上页面也会随着变化。

如下图，用IDE在下载到本地的search.js文件中加入 alert("我已经抓取…")

image

到浏览器刷新页面后，就会相应出现警告框了，说明本地文件已经和线上文件映射成功了

image

打开控制台会发现里面的search.js文件也已经改变了

image

还有一个比较有名的是Charles 软件，也是抓包工具，下载完亲测后发现虽然版面比Fiddler简洁好看，但是个人感觉看数据没有后者直观，所以我就暂时只用 Fidder 了

其实都行，工具只是辅助代码的利器，用着自己顺手就行。

注意：可能会出现Fiddler 关闭后没法打开网页的情况

原因

Fiddler的工作原理就是 内建一个代理，作为客户端和网络的中介。在Fiddler启动后，会自动添加一个 IP 为127.0.0.1（回路）端口号为8888的系统代理。

但是有一个问题就是 Fiddler退出后，默认情况下并不会删除这个配置。那么就导致了，一些浏览器还是指向这个代理，但是这个代理由于Fiddler已经关闭，所以其不会在起作用。

所以某些浏览器或是其他的东西可能再开机后无法打开网页

解决方法

修改浏览器的默认代理即可

具体设置可参考下文

https://jingyan.baidu.com/article/215817f7e7bcb91eda14233e.html