如何直接调试线上页面的JavaScript和CSS

对于已经部署到客户现场服务器的上线系统，出现问题以后，解决问题的第一步一般都是搭建模拟环境，以图重现bug。但是对于前端问题（js、css问题），则有更方便、更快捷的解决之道。
基本上有3种方法：

• 1 使用firebug类似工具 这类工具都可以在线加断点，直接调试(动态eval的代码调试起来会困难一点)。如opera、IE8、safari和Google Chrome等浏览器都内置调试工具，不需要安装插件。但是这类工具的局限性也很明显：除了可以直接修改css立即见效外，对js只可跟踪调试（找到蛛丝马迹），不能直接修改。
• 2 使用fiddle类似工具 该类工具本质是“客户端web代理”，因此所有进出的数据均可自由修改。fiddle最强大的功能是AutoResponder，可以把任意线上资源请求转发到本地。因此如果怀疑某个js或者css文件是bug所在，可以先把该文件下载到本地，然后指定浏览器对该文件的请求直接从本地加载。这样一来在本地的修改可以立即见效。
• 3 使用GreaseMonkey类似工具 GreaseMonkey是firefox插件（使用上异常简单，十分有趣），但基本上每个浏览器都有类似工具。安装该类插件以后，可以直接修改网页内容(一般都是针对JavaScript)，并且可以永久生效（可以配置）。

以上，第二种方法最值得推荐，只要有个客户端web代理软件就可以。可以做到很通用（fiddle也可以配置为非IE系列其他各种浏览器的本地代理）。

特别感谢lifesinger的启发：lifesinger
参考网址：
高人lifesinger的how-to-debug-js-css-online
Fiddler2--AutoResponder
Greasemonkey
firebug