使用Fiddler快速调试线上页面

作为前端,修复调试页面中的BUG算是家常便饭,对于自己写的页面还好说,线下都有整套的环境及代码,但也经常接到修改别人写的页面的任务,如此一来配置环境及代码就是一件令人头痛的事情,好在有Fiddler,通过简单的设置就可以帮助我们方便的调试线上页面.

这里以修改www.qq.com首页的s_1.2.0.css为例:
1.运行Fiddler,然后通过IE或FF打开需要调试的页面(当然用别的浏览器也行,不过要设置代理,默认是使用IE,FF能用是因为安装Fiddler时也附带安装了一个FF的插件–FiddlerHood)

2.在本地保存一份s_1.2.0.css做修改之用(我将其重命名为了temp.css),然后在Fiddler左侧的列表中选中s_1.2.0.css①,点击右侧的AutoResponder选项卡②,勾选Enable automatic responses③,点击Add添加一个新的规则④,在右下角选择替换的css⑤,保存;

点击看大图

至此我们就可以随意的修改temp.css并在线上直接看到修改后的效果了:
例如我在temp.css增加了一条样式 body{ background:#d7d7d7;}
再刷新IE,看到效果如下:

www.qq.com的背景变成了灰色.

刚刚我们修改的是一个外部调用的CSS文件,可能我们有时还会遇到另外一种情况:修改内联样式;同样通过Fiddler也可以达到快速调试的目的.方法如下:

在Fiddler左侧的列表中选中www.qq.com

1. 点击右侧的Inspectors选项卡
2. 选择TextView选项卡
3. 这时就会看到html源码,我们想要修改的内联样式就在其中

点击看大图

但现在还不能编辑,接着操作:反键点选Fiddler左侧的列表中选中www.qq.com,在弹出的菜单中选择Unlock For Editing④,这时就可以对源码进行编辑了;

到这里还并没有结束!还需要添加一个规则:同上面第二步,选择AutoResponder选项卡,勾选Enable automatic responses,然后把刚刚修改的www.qq.com拖到规则框中⑤;

点击看大图

到此我们就可以在浏览器中看到修改的效果了.
如果是调试JS方法相同~