作者chrisQQ (ＣｈｒｉｓＬｉｕ)
看板Web_Design
標題[閒聊] IE Debugger
時間Thu May 3 15:35:45 2012
欸都，雖然有廣告嫌疑，但簡單的介紹 IE Debugger 的使用方法
似乎真的打不到太多字，加上看圖說故事也才四張圖…
http://blog.chrisliu.net/2012/05/web-developer-ie-debugger.html
方便的話就直接點去我的 blog 看吧ˇˇ
或是… 你想看 ANSI 版的…
前情提要： IE Sucks
所以，在這邊我要教大家如何使用 IE 的 debugger 讓你更快速的解決
IE only bug。
首先我們可以看到，該死的 IE 亂跳錯誤，明明其他瀏覽器都沒錯。
● IE sucks - F12 ▂□╳▎
▎檔案(F) 尋找(N) 停用(S) 檢視(V) 影像(I) 快取(C) 工具(I) 驗證(A) | .□▎
▎HTML CSS |主控台| 指令碼 分析工具 網路 ▎
▎↖ 〒 ▎
▎￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣▎
▎※ SCRIPT87: 不正確的引述。 ▎
▎ jquery.min.js, 行 3 字元 29586 ▎
▎ ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ ▎
▎ ▎
▎ ▎
▎ ▎
▎ ▎
▎>>￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣▎
▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅▅
好，畫這個好浪費我時間= ="，所以好圖不畫第二遍（誤
http://goo.gl/yCnoA
而且錯誤還跳在 jquery，這時候請絕對不要相信 IE 的錯誤訊息，
錯誤絕大多數都不會是 jquery 錯，一定是自己的 code 有錯，
產生了某些值 NaN 或某個 element 還沒出來你就設定/讀取它，
而在 IE 中，就會跳 jquery 錯誤。
（當然，也有少部份可能是 jquery 本身有問題，剛好我這個例子是舉 jquery
如果你用其他 extjs、prototype 等 lib 也要合理懷疑是否 lib 有問題）
這時候，只要切換到指令碼分頁，按下「開始偵錯」
http://goo.gl/drxwL
IE 就會自動重整網頁開始偵錯模式，等它重讀完畢後，
直接點到呼叫堆疊（英文版是 call stack），去看你的 error 的 call stack
http://goo.gl/fcZPB
然後按照順序點下去，你就會看到該死的 error 發生在哪
http://goo.gl/xYR3R
結論：沒想到該死的 IE 也有好用的工具（畫 ANSI 好累）
當然，如果他們把網頁寫的標準一點，其實就不用花費心力寫這個 debugger 了…
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 219.85.64.11
※ 編輯: chrisQQ 來自: 219.85.64.11 (05/03 15:36)
推 Ken52039:這不就是chrome基本的開發人員工具嗎 05/03 15:53
→ chrisQQ:對，chrome和firefox其實都很簡單… 但IE的debugger是 05/03 16:10
→ chrisQQ:IE8 之後才內建在裡面的，之前好像要另外下載 ie debugger 05/03 16:10
→ chrisQQ:頗麻煩。 05/03 16:10
→ chrisQQ:實不相瞞，在 ie9 hackson 之前我還不知道有這功能（躲 05/03 16:15
→ chrisQQ: hackathon = =" 05/03 16:17
→ knives:還是沒有firebug好用，比較不那麼該死啦 05/03 16:59
推 pm2001:fx還可以拉成3D 階層更清楚 05/03 17:08
→ chrisQQ:對，所以只是介紹一下按鈕在哪 XD 有些時候遇到 ie only 05/03 17:35
→ chrisQQ:的 bug 就只好開 ie 出來 debug ... 05/03 17:35
推 mdfh:現在我都丟 modernizr 如果這套件也搞不定我就不想理了... 05/03 23:01
→ ducksteven:IE 9 的好像還有 network monitor ? 05/03 23:47
→ ducksteven:雖然沒有比 Cr 和 Firebug 好用，但總比沒有好 orz 05/03 23:48
→ chrisQQ:沒有 firebug 我快要不會寫 web 了… 05/03 23:50