如何使用Fiddler调试线上JS代码

3,271 阅读1分钟

今天分享一下如何用Fiddler来修改并调试线上的JS代码。

Fiddler是一个非常好用的web前端调试工具,它能记录客户端和服务器的http和https所有请求和响应,允许监视、设置断点,修改输入输出数据。与其他的抓包工具,例如wireshark、firebug等不同,Fiddler可以允许你在调试CGI接口时,修改返回的数据,也就是可以构造请求和模拟响应。

很多小伙伴都知道用google或者火狐浏览器可以调试js代码,但很可惜的是我们不能在线增加或者删除js代码,或者bug只出在produciton环境上。这时候我们就可以用fiddler来在线调试代码。

安装完fiddler

  • 配置
    • tool > option > connections
    • fiddler默认抓取的是ie浏览器下的请求,抓取google需要进行配置
    • 以百度为例,抓取到的结果如下
    • 在下方输入 select script 可以选中js文件
    • 我们调试这个js
    • 另存为到桌面,名为test.js
    • 在fiddler里面找这个js,进入autoResponder面板,记住下面两个红框的选项要勾上
    • 然后点击Add rule, 在下面找到我们刚存到本地的test.js 在里面加一句console.log('I m fiddler),点击save
    • 这时候再刷新一下浏览器,会在控制台看到这句话。

到这我们的教程就结束了!~