作为一名前端工程师,除了开发新项目,还有一个重要任务是线上网站的日常维护。一个典型的工作场景是:线上的某个页面出现了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 SettingsYour NameMy DocumentsFiddler2ScriptsBrowserPAC.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中的的使用方法类似。
1. 注意要按 Ctrl + F5 刷新页面,否则有缓存
2. 关闭Fiddler后,需要重设代理,否则无法上网了(建议搞个绿色的Firefox专门调试用,这样一次设定永不用改)
原文转自射雕 http://lifesinger.org/blog/2008/08/how-to-debug-js-css-online/
分享到:
相关推荐
目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源...
目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, ...
4.4 通过JavaScript处理页面和 服务器控件98 4.4.1 使用Page.ClientScript. RegisterClient ScriptBlock100 4.4.2 使用Page.ClientScript. 18.2.2 基于Windows的 身份验证模式615 18.2.3 基于窗体的...
4.4 通过JavaScript处理页面和服务器控件 98 4.4.1 使用Page.ClientScript.RegisterClient ScriptBlock 100 4.4.2 使用Page.ClientScript.Register StartupScript 101 4.4.3 使用Page.ClientScript....
1.6.5 JavaScript日志和调试 18 1.6.6 window.JSON 19 1.6.7 DOM Level 3 19 1.6.8 Monkeys、Squirrelfish和其他JavaScript引擎 19 1.7 小结 21 第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 ...
1.6.5 JavaScript日志和调试 18 1.6.6 window.JSON 19 1.6.7 DOM Level 3 19 1.6.8 Monkeys、Squirrelfish和其他JavaScript引擎 19 1.7 小结 20 第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 ...
1.6.5 JavaScript日志和调试 18 1.6.6 window.JSON 19 1.6.7 DOM Level 3 19 1.6.8 Monkeys、Squirrelfish和其他JavaScript引擎 19 1.7 小结 20 第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 ...
1.6.5 JavaScript日志和调试 18 1.6.6 window.JSON 19 1.6.7 DOM Level 3 19 1.6.8 Monkeys、Squirrelfish和其他JavaScript引擎 19 1.7 小结 20 第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 ...
1.6.5 JavaScript日志和调试 18 1.6.6 window.JSON 19 1.6.7 DOM Level 3 19 1.6.8 Monkeys、Squirrelfish和其他JavaScript引擎 19 1.7 小结 20 第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 ...
1.6.5 JavaScript日志和调试 18 1.6.6 window.JSON 19 1.6.7 DOM Level 3 19 1.6.8 Monkeys、Squirrelfish和其他JavaScript引擎 19 1.7 小结 20 第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 ...
1.6.5 JavaScript日志和调试 18 1.6.6 window.JSON 19 1.6.7 DOM Level 3 19 1.6.8 Monkeys、Squirrelfish和其他JavaScript引擎 19 1.7 小结 20 第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 ...
1.6.5 JavaScript日志和调试 18 1.6.6 window.JSON 19 1.6.7 DOM Level 3 19 1.6.8 Monkeys、Squirrelfish和其他JavaScript引擎 19 1.7 小结 20 第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 ...
1.6.5 JavaScript日志和调试 18 1.6.6 window.JSON 19 1.6.7 DOM Level 3 19 1.6.8 Monkeys、Squirrelfish和其他JavaScript引擎 19 1.7 小结 20 第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 ...
1.6.5 JavaScript日志和调试 18 1.6.6 window.JSON 19 1.6.7 DOM Level 3 19 1.6.8 Monkeys、Squirrelfish和其他JavaScript引擎 19 1.7 小结 20 第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 ...
1.6.5 javascript日志和调试 18 1.6.6 window.json 19 1.6.7 dom level 3 19 1.6.8 monkeys、squirrelfish和其他javascript引擎 19 1.7 小结 20 .第2章 canvas api 22 2.1 html5 canvas概述 22 2.1.1 历史 22...
史上最全韩顺平毕业班视频------这里只有10月份,8,9,11月份在另外一个文件下。 传智播客PHP就业班视频课程列表 8-11 1.html介绍 html运行原理① 8-11 2.html运行原理② html文件基本结构 html元素和属性 8-11 3....
史上最全韩顺平毕业班视频------这里只有8月份,9,10,11月份在另外一个文件下。 传智播客PHP就业班视频课程列表 8-11 1.html介绍 html运行原理① 8-11 2.html运行原理② html文件基本结构 html元素和属性 8-11 3....
史上最全韩顺平毕业班视频------这里只有9月份,8,10,11月份在另外一个文件下。 传智播客PHP就业班视频课程列表 8-11 1.html介绍 html运行原理① 8-11 2.html运行原理② html文件基本结构 html元素和属性 8-11 3....
压缩版本jQuery Minified29KB,不压缩版本jQuery Regular(用于阅读和调试)207KB。由于jQuery已经成为目前最流行的JavaScript库,得到广泛的支持,新版本的发布当然非常引人注目。 重要变化: 1. Ajax重写Ajax模块...
在编辑器中调试 自动格式化代码 更改页面<title> 安装依赖项 导入组件 代码分割 添加样式表 后处理CSS 添加CSS预处理器(Sass,Less等) 添加图像,字体和文件 使用public文件夹 更改HTML 在模块系统之外...