用早上通勤时间写一些简短的小文章， 以抛砖引玉提出问题跟讨论为主，并做到一定程度的问题回应。 以前常常会听到很多人说 js 写起来很痛苦， 因为很难debug ，但是笔者的经验来讲， 其实会痛苦主要是因为很多幽灵bug，比方说最近发现 tiny_mce editor 的 inlineSourceEditor plug-in， 在 safari 4.0.5 ，无内容且未点击内容框的情形下， 直接点击该button会造成该 browser crash ，但却相容於其他所有 browser 。 追原码回去看的时候发现 crash 在某iframe跟某textarea的show/hide行为， 猜测是browser 在页面处理的bug ，对这两行上个 1ms 的timeout 就没问题。 诸如此类在「理论上」我们会认为没问题， 但是实际上就是拼命出问题的地方，就是 js 的难搞之处。 所以这系列文章我想写的是哪些算是「幽灵」问题，哪些算是「正常」bug ， 幽灵问题能解就解不能解就避开或当做没看到， 主要是针对js开发上的「痛苦经验」跟如何避免做一个分享。 原则上我会尽量督促自己多写一点， 不过考虑到四十分钟车程跟晕车因素，应该是以简短为主啦...XD 本文适合阅读者：还没开发过js应用，但有机会接触的人； 已经开发过js应用，但还没踩过这些雷的人。 --------以上是落落长前文分隔线-------- 前几天 ed 问我，怎麽他写了 javacript ， browser一点动静也没有。 这是写本文的契机，一般在写 js 的时候最常碰到的就是， 「毫无反应，就只是个 script 」。 基本上因为浏览正常网页时的 javascript error 太多了， 多到 ie 都有预设选项可以让你避免显示这些 error 。 常常我们在开发时也不会注意到要去把这些选项开起来， 一般讲到 js debug ，正常玩前端的人第一个要想到的应该是firebug， firebug 在某些状况下你要点开 firebug panel 才会显示， 而且 firebug panel 有时候会被其他视窗干扰， 明明是其他子分页视窗的bug，却在我这个分页显示。 这些都是要注意的地方。 好，那有些人会问，那要怎麽去debug一些 ie only 的问题咧？ ie8 请直接按 f12 开开发者工具。 ie6,ie7 底下预设有提示讯息跟除错工具，但是通常会被关起来， 所以当你在开发时要记得打开。 他在「网际网路选项」=>「进阶」=> 停用指令码除错(Internet Explorer) =>解除勾选 停用指令码除错（其他） =>解除勾选 显示易懂的HTTP 错误讯息 =>解除勾选 （注：并不易懂。） ie 预设可以用 script editor 进行debug，他一样有error break， 也有监看视窗可以用，所以要好好利用。 如果电脑是没有装 script editor的那种， ms 网站有得下载。 以上是环境篇，通常正常状况下到这个时候就不会是「无消无息」了， 有错误讯息就可以进一步的去处理去操作。 -------- 但还有一些状况下是在这时候还会是无消无息的， 大概简单列出一些类型跟对应的检查方法。 1.js档根本没有载入。一开始就只抓到404，所以根本不会有错误讯息 可以用ie6,7 装debugbar外挂，ie8按f12看开发者工具， firebug 则是切到「网路」TAB 去看连线情形。 或者最基本的把js的连结贴到网址列去检验。 （手贴的话，千万要先确定自己知道页面跟相对路径跟绝对路径的差异！） 2.js档有载入，但是script 写的跟自己预期的行为不一样。 比方说以下的例子 <script> document.getElementById("hello").innerHTML="hi";</script> <div id="hello">change me!</div> 这就是常见的时间差错误，虽然看起来一切都很正常， 但是他就是注定会因为hello在当下还没init 所以就没有反应。 以纯 js 来讲比较不会有问题，因为他会冒error， 但如果是以jQuery $("#hello").html("hi")的话，就很有可能你会忽略了。 这种情形的debug方法，直接一点的就是开firebug或ie8开发者工具， 直接下break point 在该行，看看在该时间点hello取dom到底发生什麽问题， 然後你可能就会发现他是 [] 或是 null ，就会因此了解到逻辑错误。 总之，在你认为应该要经过的地方埋伏，透过step by step的逐行执行， 去追踪内部的函式看哪个地方是不符合你的期待的。 这个过程可小可大，唯一的困难点就在於如果碰到被compressor压过的code， 会陷入五里雾，这种情形要处理就是高级技巧了...这里先不谈。 简单跟刻苦一点就是直接插alert 在前後，用类似十分逼近的方式去看内容。 写到这里发现车子下交流道了...先收尾在这里。XD 要记得js上很多幽灵bug，就算你逻辑对，还是有可能发生问题， 所以逻辑只是基本辅助，错误讯息是主要参考， 再加上部分奇怪的针对browser微调。 -- 期待下次再会～散 -- 我：一半的日子让你说，我听你说你的所有______________________________________ ______________________________________一半的日子我想说，对你说过去的所有：我 _______________________________________________________ 在讨论中妥善扮演兼具聆听与分享的角色，是我们一生的课题。 _______________________________________________________ --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 114.136.222.245