今天介绍一个本人认为超级实用的本地调试服务器端代码方法。
在实际web开发中，经常面临的问题就是，明明本地调试正确，放到服务器上却出了bug，而使用浏览器F12进行的js调试刷新后才会生效，我们不可能改动一次js文件就上传到服务器一次重新看一次效果。如果你也时常有这个疑问，那继续往下看。
需要用到的抓包工具是：Fiddler。
fiddler 这个工具，在 web 开发中，用法非常多，本篇文章只涉及到使用fiddler对前端资源的劫持和本地调试。
先简单说一下 fiddler 的工作原理，见下图：
在本地机器与服务器建立连接的时候，fiddler 可以在中间建立一层代理，所以我们可以用这个代理，把服务器上的一些请求进行劫持，来达到一些测试和调试的目的。
一个很直观的例子就是，如果本地开发环境中写了一个 JS 脚本文件，在生产环境中使用是此文件的压缩版本。如果本地并没有发生报错之类的问题，而线上的生产环境上报错了，我们如何进行调试？毕竟把线上的压缩版 JS 换成未压缩版既麻烦又不现实。所以这个时候，我们可以用 fiddler 把线上的资源，劫持为本地的文件，每次请求在线资源的时候，fiddler
会替换这个应答为本地指定的文件，从而方便我们联机调试。这样你可以一边修改本地文件，一边刷新线上的页面，达到调试的目的。
1.首先查看 F12，先找到相应页面的源码地址，找到那个要替换的 JS 文件 URL（或者可以直接刷新页面，在fiddler左侧资源框中找到要调试的JS文件）
2.打开 fiddler，在右侧，切换到 AutoResponder 这个标签，勾选下面的“Enable rules”、“Unmatched requests passthrough” 两个选项，然后点一下 Add Rule 添加一条规则
3.在下面的 Rule Editor 中的第一行，填上你要劫持的线上的资源的 URL，下面一个输入框，输入一个本地文件的路径，然后点击右侧的 Save 按钮保存。这个时候，中间的规则框里就多了一条规则。然后刷新你的浏览器，可以看到资源被劫持了，你可以联机进行调试什么的。
要注意的是：fiddler 默认把系统的代理设置为了 127.0.0.1:8888，端口可以在 Tools → Options → Connections 里面修改。如果你使用 Chrome 或者 Firefox，你的浏览器代理并不是使用的系统设置，而是由第三方插件管理的话（如 Proxy SwitchyOmega 等），请自行设置浏览器使用 fiddler 时的代理为 127.0.0.1:8888，不然会造成请求劫持失败。
fiddler 的功能非常强大，远不止这一个功能，而且它能劫持的基本是所有本机联网程序的请求，强大功能自行脑补。
特别补充说明：
在使用了Fiddler之后，可能会出现浏览器不能上网但是qq微信可正常使用的情况，Fiddler的工作原理就是内建一个代理，作为客户端和网络的中介。在Fiddler启动后，会自动添加一个 IP 为127.0.0.1（回路）端口号为8888的系统代理。但是有一个问题就是 Fiddler退出后，默认情况下并不会删除这个配置。那么就导致了，一些浏览器还是指向这个代理，但是这个代理由于Fiddler已经关闭，所以其不会在起作用。所以某些浏览器或是其他的东西可能再开机后无法打开网页，而QQ微信可以正常使用。
解决办法：打开Internet选项，点击局域网设置，去掉勾选“为LAN使用代理服务器”即可。
