作为一名前端工程师,除了开发新项目,还有一个重要任务是线上网站的日常维护。一个典型的工作场景是:线上的某个页面出现了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中的的使用方法类似,不多说。
希望本文能对你有所帮助。
相关推荐
JavaScript Slideshow网页相册是一种利用JavaScript和CSS技术来动态展示图片的交互式设计。这种相册通常具有平滑的过渡效果、自定义...实践过程中,不断调试和优化代码,将帮助你深入掌握JavaScript和CSS的使用技巧。
HTML5在线测试和CSS3html5效果的结合,使得开发者可以实时预览和调试这些新特性。通过在`index.html`文件中编写HTML结构,并在`css`文件中添加样式,开发者可以快速查看过渡效果。同时,`js`文件可以用来控制交互...
HTML负责构建页面结构,CSS定义样式,而JavaScript则用来处理交互逻辑,如响应用户的点击事件,计算抛物线路径并更新元素的transform属性。通过分析和调试这些代码,可以找出bug的具体原因并进行修复。 总的来说,...
在IT行业中,创建数据可视化是至关重要的,尤其是对于数据分析和信息传递。纯CSS曲线图的实现是一种不依赖JavaScript库,仅使用CSS样式和HTML...通过实践和调试提供的代码,你可以深入理解CSS在图形绘制方面的潜力。
在JavaScript开发中,特别是在CSS相关的任务上,确保样式表的正确性和一致性是至关重要的。这就是NightwatchJS的CSS回归插件发挥作用的地方。 这个插件允许开发者在运行测试时检查CSS规则是否按预期工作,防止引入...
6. **调试技巧**:掌握使用浏览器的开发者工具来调试JavaScript和CSS错误,以及性能分析,是每个前端开发者必备的技能。 7. **版本控制**:"master"分支的提及意味着版本控制系统如Git的使用,理解版本控制对于协作...
5. **测试与调试**:在不同浏览器和设备上进行测试,确保兼容性和可用性。 综上所述,基于 layui 的云层动态特效登录页面结合了 HTML5 的特性,利用 layui 框架的强大功能,实现了具有视觉冲击力的前端设计。通过...
3. **CSS操作**:JavaScript也可以用来动态改变页面样式,书中的CSS部分将教你如何使用JavaScript操作CSS属性,实现动态样式变化,如响应式设计或动画效果。 4. **AJAX**:异步JavaScript和XML(AJAX)是现代Web...
这两个文件与Firefox浏览器的中国特别版以及Firebug插件有关,Firebug是历史上非常著名的HTML、CSS和JavaScript调试工具。 首先,`FirefoxChinaEdition2009.7.exe` 是Firefox浏览器的一个特定版本,专门针对中国...
`上,此时,页面上的网格将会被动态高亮,显示出网格线和单元格。 该工具提供了以下特性: - **网格线显示**:高亮显示网格的行和列线,帮助识别每个单元格的位置。 - **单元格边界**:突出显示每个单元格的边界,...
在横版瀑布流中,这种效果是水平方向上的,使得页面元素沿水平线错落分布,而非传统的垂直排列。 “自适应高度”意味着网页设计会根据浏览器窗口的大小动态调整元素的高度,确保在不同设备和分辨率下都能保持良好的...
Gooflow是一款用于创建流程图的JavaScript库,它允许用户在网页上绘制和编辑流程图。这个压缩包包含了Gooflow运行所必需的JavaScript(js)和 Cascading Style Sheets(css)文件。这些文件是Gooflow的核心组成部分...
4. **渲染和交互**:CEFSharp不仅能够加载和渲染网页,还能通过JavaScript API与页面进行交互,执行JavaScript代码,获取或修改DOM元素。 **XML配置**: XML文件在这里起到了配置爬虫规则的作用,它可以定义如何...
- **调试工具**:大多数现代浏览器内置开发者工具,可以用来调试JavaScript代码、检查CSS样式、监控网络请求等。 ### 知识点五:网页优化技巧 - **压缩资源文件**:使用工具压缩HTML、CSS和JavaScript文件,减小...
- 包括编写、测试和调试CSS代码。 **Cm(厘米)** - 同“Centimeter”,在CSS中用于长度单位。 **Button(按钮)** - 用户界面中的交互元素,通常响应用户的点击操作。 - 可以通过CSS的`padding`, `border`, 和 `...
6. **DHTML动画**:创建平滑的页面动画,包括过渡效果、时间线管理和动画库的使用。 7. **跨浏览器兼容性**:学习处理不同浏览器之间的差异,确保代码在主流浏览器上都能正常工作。 8. **最佳实践**:遵循代码优化...
jQuery提供了方便的DOM遍历和选择器,如`$('selector')`,这使得开发者能够快速找到页面上的特定元素。此外,jQuery还支持链式调用,允许我们在一个选择器后连续调用多个方法,如`$('p').addClass('highlight').css...
例如,通过使用CSS3的`transform`和`opacity`属性进行动画,因为这些属性可以离屏渲染,不会导致页面的重排。 8. **响应式动画**:在移动设备上,考虑到性能和电池寿命,应优化JavaScript动画。可以使用媒体查询...
- **响应式设计**:JavaScript可以配合CSS媒体查询实现不同设备上的适配和交互。 - **Ajax**:异步JavaScript和XML技术,实现在不刷新整个页面的情况下更新部分网页内容。 - **Web API**:如Geolocation API获取...
Firebug是Mozilla Firefox浏览器的一个插件,专为前端开发者提供强大的JavaScript调试功能,使得对网页上的脚本进行实时分析、修改和测试成为可能。这款工具的出现,极大地提升了开发人员对网页代码的调试效率,特别...