[心得] js踩到雷 前言 & 1:無消無息

看板Ajax作者 (沉默是金。)時間14年前 (2010/06/07 09:19), 編輯推噓12(1200)
留言12則, 12人參與, 最新討論串1/2 (看更多)
用早上通勤時間寫一些簡短的小文章, 以拋磚引玉提出問題跟討論為主,並做到一定程度的問題回應。 以前常常會聽到很多人說 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

06/07 13:07, , 1F
推TonyQ大
06/07 13:07, 1F

06/07 17:39, , 2F
推:)
06/07 17:39, 2F

06/07 19:53, , 3F
推 獲益斐淺
06/07 19:53, 3F

06/08 00:00, , 4F
五樓都用alert debug的~ (逃~)
06/08 00:00, 4F

06/08 00:22, , 5F
我是真的都用alert debug的(挺)
06/08 00:22, 5F

06/08 01:44, , 6F
http://validator.w3.org/checklink 也可檢查檔案連結
06/08 01:44, 6F

06/08 04:53, , 7F
我是用document.write()+alert的~~~
06/08 04:53, 7F

06/08 14:51, , 8F
推~ alert debug +1
06/08 14:51, 8F

06/08 16:59, , 9F
推...我也都是用alert XD
06/08 16:59, 9F

06/08 19:29, , 10F
alert+1 不過有時候會產生時間差
06/08 19:29, 10F

06/20 10:40, , 11F
時間差及載入先後順序問題真的很重要
06/20 10:40, 11F

05/21 08:59, , 12F
受用 :)
05/21 08:59, 12F
文章代碼(AID): #1C34auD8 (Ajax)
文章代碼(AID): #1C34auD8 (Ajax)