如何直接调试线上页面的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

你可能感兴趣的:(JavaScript,css,浏览器,Firebug,chrome)