用早上通勤時間寫一些簡短的小文章， 以拋磚引玉提出問題跟討論為主，並做到一定程度的問題回應。 以前常常會聽到很多人說 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