作为一名前端工程师,除了开发新项目,还有一个重要任务是线上网站的日常维护。一个典型的工作场景是:线上的某个页面出现了bugs,需要紧急修复。这时候有个简单的传统做法是,将问题页面另存为本地html文件,然后疯狂的寻找并修复bugs,等弄好了,再将修改后的js和css上传到线上并检查校验bugs是否已修正。

上面的方法,对于简单页面,是够用的。但是对于稍微复杂的页面,IE的另存为经常不保真,如果页面中涉及Ajax等bugs,保存到本地更是难以调试。这时有个很自然的做法是,将开发环境Run起来,当时怎么开发的,现在就怎么调试。这样做肯定能解决问题,但要调动很多资源,后台开发工程师、前台开发工程师等等都要参与。对于小团队来说,也许是可行的,对于大团队来说,如此大动干戈,除非到了最后,是不会这样做的。那我们应该怎么做呢?先来看一个工具:

Web开发中有个大名鼎鼎的工具:Fiddler. Fiddler是一个http调试代理,它能够记录你电脑和互联网之间的所有http通讯。Fiddler可以让你检查所有的http通讯,设置断点,以及Fiddle(Fiddle的英文意思是胡乱修改,很幽默的表达Fiddler的用途)所有“进出”的数据(指cookie,html,js,css等数据)。

嘿嘿,是否从上面的介绍中嗅探到了某种解决方案?Fiddler可以让我们Fiddle所有”进出“的数据!我们要调试线上页面的bugs时,可以先分析是什么文件引起的,找出这些嫌疑文件,下载到本地,然后利用Fiddler将线上的请求Fiddle到本地的对应文件。这样我们就可以随心所欲的修改这些嫌疑文件了,直接刷新线上的页面就可以看到效果,烦人的环境问题根本就不用考虑,而且一切都是高保真的。

上面说的是思路,下面我会举个例子来说明。

举例子之前,请先安装Fiddler(怎么下载安装就不多了,一路Next)。安装好后,在IE的工具条上会出现Fiddler2图标,点击启动Fiddler. 启动后,通过IE访问任何网站时,所有http进出数据都会在Fiddler上显示出来。但是等等,怎么老说IE呢?虽然在IE上能通过IE Developer Toolbar和Companion.JS来调试CSS和JS,但被firebug宠坏了的我们,总期望着Firefox上能搞定的问题绝不通过IE去调试。为了我们的美好期望,根据Fiddler的官方说明,我们只要简单的进行以下操作即可:

首先,找到BrowserPAC.js这个文件,默认放在

  • c:\Documents and Settings\Your Name\My Documents\Fiddler2\Scripts\BrowserPAC.js

Vista下在User的对等目录里。

接着,打开亲爱的Firefox3,Tools - Options - Advanced - Network:

点击Settings…:

选中自动代理配置URL,将BrowserPAC.js的绝对路径复制过去,确定。如果想让Fiddler监听其他浏览器,同上设置即可。

至此准备工作完毕,我们进入正题(才进入正题?各位看官稍安毋躁,喝杯茶,养养神,再接着往下看)。

在我的淘宝 - 已卖出的宝贝页面,有个修改价格的功能:

前些天发现一个bug,当点击修改价格按钮之后,主页面上的价格没有更新。

初步分析后,觉得以下js文件有问题:

  • http://assets.taobaocdn.com/js/app/trade/trade.js
  • http://assets.taobaocdn.com/js/app/trade/trade_business.js

因为涉及Ajax调用,保存为HTML本地调试不了。这时想起Fiddler,问题迎刃而解。

首先将上面两个文件下载到本地,启动Fiddler,在AutoResponder栏添加替换规则:

如上图添加两条规则后,在Firefox中刷新页面,上面两个js文件就从本地获取了,嘿嘿。接下来,用喜欢的文本编辑器加Firebug尽情的调试吧,就像当初开发时一样。等把bugs解决了,压缩并上传相应的js文件,并通知后台开发者修改vm中js文件的时间戳,然后等着发布就行。

CSS也是一样的调试,不赘述。在IE、Safari、Opera中的的使用方法类似,不多说。

希望本文能对你有所帮助。