善于从bug中分析问题也是一种能力

开发
前端技术包括JavaScript、ActionScript、CSS、xHTML等“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等等. 本文介绍了在前端开发中,分析BUG的能力。

前端开发中,出现一些bug不过是家常便饭。这些bug常常会使你焦头烂额,不知所措。至少在我的早期职业生涯中是这样。拿CSS来说,在FF下好好的样式,可到了IE就全乱了套。

Js也有同样的问题,在FF中运行良好的代码,放在IE中运行就会提示你有错误发生。相信这类问题你一定遇到过,也深以为痛。但是,如果你弄清了这些问题的实质,你就会豁然开朗,你会突然发现一切尽在你的掌握之中。

好些时候,有朋友拿着在IE中乱套的页面向我求救。在看过他们的代码之后,我会告诉他们在代码的某一行加上zoom:1即可,在尝试着加上这个属性之后,问题迎刃而解。当他们下次拿着同样的问题(不过这次是以不同的方式呈现出来)再来求救的时候,我用的是相同的解决方案。

曾经有个朋友,在页面布局时发现某个地方总是多一片空白,找了很久也没解决,他将链接地址发给我,我通过Fiebug看了代码之后,告诉他问题的症结所在,并提出解决方案。当他想进一步了解为什么是这样的时候,我告诉他这是“块格式化上下文(Block formatting context)”和IE特有的hasLayout属性所致,并发给他相关的资源链接。

开始的时候,我错误的以为这是IE中的bug,在充分了解“格式化上下文”和 IE的hasLayout属性之后,我明白了那些常见问题发生的根本原因。

同样,在js调试中我们也会遇到类似的问题。比如,在定义一个对象时,多出一个逗号(如var obj = {a:”bug”,b:”shit”,}或者var arr = [1,2,3,,])造成IE6/7/8不能正常运行。

最恼火的时候,在你查遍所有代码,发现竟然是一个逗号造成的时候,你不免生出许多无奈。一个逗号,竟带来如此的差异,那么这个问题就值得细细思考一番。几番调试,你会发现数组多一个逗号在浏览器之间带来的差异,逗号位于数组的中间和位于数组的末尾产生的不同结果。

当你查阅相关的资料,最终在ECMAScript 5 11.1.4中找到对数组中多余逗号的相关描述时,你就会彻底明白了问题发生的根本原因,你就会明白这不是一个bug:FF等高级浏览器按照规范来运行,只是IE浏览器到了IE9才真正实现它。

这两个我们常见的问题,尤其是***个问题,我不想再本篇中对此做详尽的描述。关于此类问题的文章已有人做过分析,无须我再次添足。

我要说的是,在前端开发中,当同样的问题多次出现的时候,学会分析,学会思考,学会总结,方能提高。唐代名医孙思邈有云:“上工治未病,中工治欲病,下工治已病”。问题出现,如果仅仅是为了解决问题而解决问题,那么我们就会永远停留在“治已病”的阶段,问题解决起来就相对棘手。

倘若能从问题当中寻根问底,刨清实质,就会更进一步。一旦问题了然于胸,在开发的开始阶段就会避免问题的发生,或对问题的发生有一定的预见性。在这个时候,你就是“上工”——“是故圣人不治已病治未病,不治已乱治未乱,此之谓也。”

【编辑推荐】

  1. 前端开发与网页制作 一直被混淆从未被厘清
  2. 网站加速 美工和前端开发人员也很关键
  3. 百度JavaScript项目tangram开源 促进国内前端开发水平提升
  4. 编写高质量代码:Web前端开发修炼之道
  5. 1.2.4 前端开发人员如何自身定位
责任编辑:于铁 来源: Denis的博客
相关推荐

2010-06-07 09:29:21

云计算

2023-06-13 10:00:21

自动驾驶技术

2020-05-06 11:29:29

UX设计钓鱼攻击用户体验

2012-11-27 09:48:45

程序员项目经理项目管理

2015-03-13 11:23:21

编程编程超能力编程能力

2014-03-05 10:15:46

女产品经理逼婚

2010-06-10 11:51:22

Internet协议数据报

2012-05-21 08:55:52

云计算安全成本

2010-09-15 16:01:47

2020-05-19 08:40:19

人工智能智能语音交互智能语音设备

2013-10-17 10:24:47

腾讯云

2015-09-22 13:40:50

互联网业务运维

2019-03-01 15:09:36

降薪裁员业绩差

2018-02-26 09:28:42

程序员Bug体验

2020-12-09 10:15:34

Pythonweb代码

2020-12-23 10:10:23

Pythonweb代码

2022-06-22 09:44:41

Python文件代码

2022-07-07 10:33:27

Python姿势代码

2019-07-22 15:59:21

2022-08-08 08:22:22

量子计算
点赞
收藏

51CTO技术栈公众号