程序员人生 网站导航

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

栏目:互联网时间:2014-01-06 11:49:40

  在前端开发中,出现一些bug不过是家常便饭。这些bug常常会使你焦头烂额,不知所措。至少在我的早期职业生涯中是这样。拿CSS来说,在FF下好好的样式,可到了IE就全乱了套。Js也有同样的问题,在FF中运行良好的代码,放在IE中运行就会提示你有错误发生。相信这类问题你一定遇到过,也深以为痛。但是,如果你弄清了这些问题的实质,你就会豁然开朗,你会突然发现一切尽在你的掌握之中。

  好些时候,有朋友拿着在IE中乱套的页面向我求救。在看过他们的代码之后,我会告诉他们在代码的某一行加上zoom:1即可,在尝试着加上这个属性之后,问题迎刃而解。当他们下次拿着同样的问题(不过这次是以不同的方式呈现出来)再来求救的时候,我用的是相同的解决方案。曾经有个朋友,在页面布局时发现某个地方总是多一片空白,找了很久也没解决,他将链接地址发给我,我通过Firebug看了代码之后,告诉他问题的症结所在,并提出解决方案。当他想进一步了解为什么是这样的时候,我告诉他这是“块格式化上下文(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才真正实现它。

  这两个我们常见的问题,尤其是第一个问题,我不想再本篇中对此做详尽的描述。关于此类问题的文章已有人做过分析,无须我再次添足。我要说的是,在前端开发中,当同样的问题多次出现的时候,学会分析,学会思考,学会总结,方能提高。唐代名医孙思邈有云:“上工治未病,中工治欲病,下工治已病”。问题出现,如果仅仅是为了解决问题而解决问题,那么我们就会永远停留在“治已病”的阶段,问题解决起来就相对棘手。倘若能从问题当中寻根问底,刨清实质,就会更进一步。一旦问题了然于胸,在开发的开始阶段就会避免问题的发生,或对问题的发生有一定的预见性。在这个时候,你就是“上工”——“是故圣人不治已病治未病,不治已乱治未乱,此之谓也。”

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐