岁月如歌

只简单说下和前端开发调试密切相关的：

1. 使用AutoResponder本地调试文件。请参考如何直接调试线上页面的JavaScript和CSS.
2. 使用QuickExecBox快速操作。请参考QuickExec Reference. 推荐熟练掌握的命令：?sometext, bpu, go, urlreplace. 快捷键：Alt + Q, Ctrl + I, Shift + Del, Ctrl + X, F6.
3. 使用Filter过滤信息。比如禁用JS, 设置断点等等。
4. 使用bpu + Inspectors动态修改Response. 比如修改页面中的JS代码片段等等，非常有用。
5. 使用Request Buidler测试请求。可以很方便的测试ajax代码。
6. 使用Statistics + Timeline + neXpert查看性能等统计数据。
7. 使用CustomRules, 自定义配置和命令等。比如修改var m_DisableCaching: boolean = false;的值为true, 就可以默认禁止缓存。还可以自定义命令等等。
8. 开发自己的扩展。请参考Extending Fiddler with .NET Code.

最后强烈推荐Fiddler的视频教程：Fiddler Demonstration Videos（听不懂没关系，能看懂就能学会）

另外，Firefox下推荐使用FoxyProxy自动切换代理。一次设定，服务终身。

Firebug已经家喻户晓，不必多说。下面推荐的是些村酒野蔬，虽没什么名气，但其味醇厚甜美，食之飘香再难忘情。

HTML Validator

http://users.skynet.be/mgueury/mozilla/

很喜欢这个扩展的Tidy算法模式，可以检查出HTML页面中绝大部分嵌套和书写错误，并且针对每个错误都有详细的说明和推荐写法。当然，很多时候，我们不大可能去纠正所有错误和警告。一个常用的小技巧是：将可以容忍的错误添加到Hidden列表中。这样，只要看看右下角的状态信息，就知道页面中是否还有错误了。

Launchy

https://addons.mozilla.org/en-US/firefox/addon/81

这个扩展相见恨晚，一见就再也离不开了。如上图所示，能很方便的 阅读全文 »

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

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