---

        用早上通勤時間寫一些簡短的小文章，
        以拋磚引玉提出問題跟討論為主，並做到一定程度的問題回應。


        以前常常會聽到很多人說 js 寫起來很痛苦，
        因為很難debug ，但是筆者的經驗來講，

        其實會痛苦主要是因為很多幽靈bug，比方說最近發現
        tiny_mce editor 的 inlineSourceEditor plug-in，

        在 safari 4.0.5 ，無內容且未點擊內容框的情形下，

        猜測是browser 在頁面處理的bug ，對這兩行上個 1ms 的timeout 就沒問題。


        諸如此類在「理論上」我們會認為沒問題，
        但是實際上就是拼命出問題的地方，就是 js 的難搞之處。


        所以這系列文章我想寫的是哪些算是「幽靈」問題，哪些算是「正常」bug ，
        幽靈問題能解就解不能解就避開或當做沒看到，

        主要是針對js開發上的「痛苦經驗」跟如何避免做一個分享。

        原則上我會盡量督促自己多寫一點，
        不過考慮到四十分鐘車程跟暈車因素，應該是以簡短為主啦...XD


        本文適合閱讀者：還沒開發過js應用，但有機會接觸的人；
        已經開發過js應用，但還沒踩過這些雷的人。

        --------以上是落落長前文分隔線--------

        前幾天 ed 問我，怎麼他寫了 javacript ， browser一點動靜也沒有。

        這是寫本文的契機，一般在寫 js  的時候最常碰到的就是，
        「毫無反應，就只是個 script 」。


        基本上因為瀏覽正常網頁時的 javascript 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

--