IE Javascript 進階調試


大多數人用IE都知道IE有個F12 開發者工具可以用來調試網頁的各種問題,本文以IE10為例,盡量少談基礎,只說說IE腳本調試中的進階技巧。如果你的網頁腳本在IE上運行出現問題,希望下面的技巧可以幫你省點時間。

目錄

看控制台輸出(console output)

如果說你發現網頁有什么功能不工作,第一步要做什么?我建議先查看控制台輸出。很多時候控制台已經告訴腳本執行過程中的問題,會省掉你分析代碼、設斷點的時間。

其實我也不是故意的,隨便打開個網頁總遇到些腳本錯誤。趕緊回頭開着console看看自己的網站是不是也一樣。- _-!!

debug_js_1

查看元素事件

要想查看網頁上元素的屬性或者注冊了哪些事件,按照以下步驟,

1. 點箭頭(Select Element by Click)

2. 點你要查看的元素

3. 看屬性窗口,元素屬性和事件都在里面了(可以動態修改)。

debug_js2

格式化腳本

很多上線網站會會對腳本進行精簡,格式全去掉了,簡直無法直視。點下面這個按鈕來格式化腳本。

debug_js3

格式化之后

debug_js4

啟用異常斷點

看上面的圖,菜單中提供了三種與異常相關的設置,

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引擎提速就被忽略了。

debug_js5

關於IE如何根據網頁選擇不同的Document Mode,可以查看MSDN DOCTYPE Declaration

Visual Studio調試IE網頁

接下來壓軸的來了,不知道有多少童鞋用過這個功能,其實IE可以外接Visual Studio調試腳本。

先到Internet Option中將調試功能啟用

debug_js6

接下來到View – External Script Debugger - Open,選擇Visual Studio

debug_js7

Visual Studio就會附加到IE進程,接下來你就可以用VS的強大調試功能在調試腳本了,比如你最常用的F12 (Go to definition)

debug_js8

Fiddler

Fiddler這個工具應該是眾所周知的了,寫如何用fiddler的文章也有很多,這里提到他是因為他是個不錯的重放工具,比如問題發生在你訪問不到的環境中,或者好不容易重現了一次,抓包可以通過fiddler自動重放功能反復調試。不用正真去訪問網站或者重現問題。

如何導入抓包,重放抓包可以參考下面文檔。

Replay Captured Traffic

JSLint

如果調試的是你自己的代碼,將代碼貼到JSLint中看看工具如何評價你的代碼。JSLint可以幫你檢查語法錯誤、提示代碼風格問題和結構問題。

具體可以參考JSLint的文檔

JSFiddle

如果你的代碼還在開發階段,JSFiddle是個不錯的在線編輯器,你可以在線編輯、運行HTML, Javascript, CSS,引用各種流行的的JS library,還有簡單的快捷鍵支持,在線工具做成這樣算不錯的了。

js_fiddle

Quirks Mode

Javascript少不了要處理DOM和CSS,各種DOM方法、屬性,樣式表在各個版本的瀏覽器是否支持,直接查查Quirks Mode網站,應該有你想找的內容。

再上個圖

debug_js_1

內存泄露

內存泄露在新版本的瀏覽器中已經不是很常見了,可以看看下面的文章了解下會造成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. 回到網頁源代碼查找泄露原因

clip_image001


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM