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

看板Ajax作者TonyQ (沉默是金。)時間14年前 (2010/06/07 09:19)推噓12(12推 0噓 0→)

留言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

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

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