大多數人用IE都知道IE有個F12 開發者工具可以用來調試網頁的各種問題,本文以IE10為例,盡量少談基礎,只說說IE腳本調試中的進階技巧。如果你的網頁腳本在IE上運行出現問題,希望下面的技巧可以幫你省點時間。
目錄
看控制台輸出(console output)
如果說你發現網頁有什么功能不工作,第一步要做什么?我建議先查看控制台輸出。很多時候控制台已經告訴腳本執行過程中的問題,會省掉你分析代碼、設斷點的時間。
其實我也不是故意的,隨便打開個網頁總遇到些腳本錯誤。趕緊回頭開着console看看自己的網站是不是也一樣。- _-!!
查看元素事件
要想查看網頁上元素的屬性或者注冊了哪些事件,按照以下步驟,
1. 點箭頭(Select Element by Click)
2. 點你要查看的元素
3. 看屬性窗口,元素屬性和事件都在里面了(可以動態修改)。
格式化腳本
很多上線網站會會對腳本進行精簡,格式全去掉了,簡直無法直視。點下面這個按鈕來格式化腳本。
格式化之后
啟用異常斷點
看上面的圖,菜單中提供了三種與異常相關的設置,
1. Break on unhandled exceptions
2. Break on all exceptions
3. Continue after exception
如果你覺得問題出在異常上,不妨啟用異常斷點來調試下。如果你堅信問題不在異常上,那就禁用這個異常斷點,免得被異常打斷調試。
文檔模式(document mode)
很多網頁在IE上顯示出問題都因為文檔模式,比如有些網頁中大量使用腳本,在IE上總覺得運行慢,打開F12看看網頁在什么文檔模式下運行,文檔模式決定了IE使用什么渲染引擎和JS引擎,例如IE9+中對Javascript的執行速度有顯著提高,但是如果你的網頁被固定在了IE8之前的文檔模式,那新的JS引擎提速就被忽略了。
關於IE如何根據網頁選擇不同的Document Mode,可以查看MSDN DOCTYPE Declaration。
Visual Studio調試IE網頁
接下來壓軸的來了,不知道有多少童鞋用過這個功能,其實IE可以外接Visual Studio調試腳本。
先到Internet Option中將調試功能啟用
接下來到View – External Script Debugger - Open,選擇Visual Studio
Visual Studio就會附加到IE進程,接下來你就可以用VS的強大調試功能在調試腳本了,比如你最常用的F12 (Go to definition)
Fiddler
Fiddler這個工具應該是眾所周知的了,寫如何用fiddler的文章也有很多,這里提到他是因為他是個不錯的重放工具,比如問題發生在你訪問不到的環境中,或者好不容易重現了一次,抓包可以通過fiddler自動重放功能反復調試。不用正真去訪問網站或者重現問題。
如何導入抓包,重放抓包可以參考下面文檔。
JSLint
如果調試的是你自己的代碼,將代碼貼到JSLint中看看工具如何評價你的代碼。JSLint可以幫你檢查語法錯誤、提示代碼風格問題和結構問題。
具體可以參考JSLint的文檔。
JSFiddle
如果你的代碼還在開發階段,JSFiddle是個不錯的在線編輯器,你可以在線編輯、運行HTML, Javascript, CSS,引用各種流行的的JS library,還有簡單的快捷鍵支持,在線工具做成這樣算不錯的了。
Quirks Mode
Javascript少不了要處理DOM和CSS,各種DOM方法、屬性,樣式表在各個版本的瀏覽器是否支持,直接查查Quirks Mode網站,應該有你想找的內容。
再上個圖
內存泄露
內存泄露在新版本的瀏覽器中已經不是很常見了,可以看看下面的文章了解下會造成IE內存泄露的模式,
Understanding and Solving Internet Explorer Leak Patterns
Memory Leakage in Internet Explorer
不過你真的有幸寫出讓瀏覽器也想不清楚的代碼,可以嘗試下下面的工具。
s-IEve可以追蹤網頁泄露元素,打開這個工具估計就可以看明白怎么回事了,簡單的使用方法如下,
1. 下載打開s-IEve工具,通過s-IEve來打開存在內存使用問題的網頁
2. 重復會造成內存泄露的操作
3. 界面右邊列表中#leaks列中表示了泄露的DOM節點數量
4. 點擊show leaks按鈕察看泄露網頁節點
5. 選中泄露節點點擊Properties按鈕,察看網頁節點相關的html屬性
6. 回到網頁源代碼查找泄露原因