目前市面上比較火爆的瀏覽器內核提供商,有微軟的IE、mozilla的firefox、谷歌的chrome、蘋果的safari。IE瀏覽器下的項目過去占比非常大,近年隨着其他瀏覽器廠商發展勢頭迅猛,過去的項目要求在其他瀏覽器下也能兼容,勢必引起一場兼容測試風暴。
而今天,筆者向大家介紹一下IE瀏覽器下的web調試工具,幫助大家了解web測試工具的使用。
IE WebDeveloper(官網)
IE WebDeveloper可以讓你檢查和編輯你的HTML DOM, 顯示錯誤信息, 日志信息, 顯示網站源代碼, 監視DHTML事件和HTTP流量. 如果你是一個開發人員或設計人員, 但平常又喜歡使用IE, 那IE webdeveloper是個不錯的選擇.它的功能可以和火狐下的Firebug相媲美,甚至有些功能還強於Firebug。
IE WebDeveloper允許直接地在瀏覽器窗口中瀏覽、傳輸和更新HTML DOM。該軟件可以實時分析網頁並且顯示為一種允許你察看表格風格、Javascript腳本,表格以及其它網頁元素的樹形風格。該軟件還可以在瀏覽器中 交互式地突出顯示被選擇的網頁元素,因此你可以在實際網頁中定位其代碼。 查看style元素,定位div等等。且支持一鍵w3c檢查(包括HTML/XHTML/CSS/Javascript tutorial等)。雖然用起來不如Firebug那么得心應手,但是畢竟解決了我們在ie上調試工具不足的問題。
程序安裝后是IE的一個內嵌插件,找到“菜單欄”->“IE WebDeveloper V2”,點擊“IE WebDeveloper V2”出現如下效果表示安裝成功:
1、Webpage Inspector--DOM查看器
點開后就能使用IE WebDeveloper了。IE WebDeveloper有五個主窗口,首先是Webpage Inspector。Webpage Inspector左邊是DOM查看器,選擇一個DOM節點會在右側對應地顯示其屬性值、HTML代碼和CSS樣式列表。在Webpage Inspector中可以動態地修改DOM結點,IE窗口會實時渲染展示出修改后的結果。(Firebug也有此功能)
2、Script Console--js控制台
第二個為Script Console,這個窗口可以輸出頁面的一些信息,如錯誤信息,還能尋址到出錯代碼的位置。可以在Javascript代碼中用console.log('信息')來輸出信息了,比alert命令好用多了。還可以直接在里面輸入命令進行調試。(Firebug也有此功能)
3、Source Explorer--源碼查看器
第三個為Source Explorer,查看當前頁所用到CSS和Javascript文件以及HTML源代碼,它能夠列出Javascript文件中的函數和變量名稱。
4、Event Log--事件觸發查看器
第四個為Event Log,它能夠查看網頁瀏覽器、HTML文檔、HTML窗口或所選HTML元素結點的事件觸發列表。
5、HTTP Monitor--查看HTTP交換信息
最后一個為HTTP Monitor,它可以查看和網絡服務器相交互的HTTP信息,相當於Firebug的網絡(net)功能,對於AJAX開發很有幫助。
另外,IE下的調試工具還有IE Developer Toolbar和Companion.JS,兩個工具也還算不錯。