前段時間安裝了Win7，使用一段時間后感覺不錯，也推薦同事們安裝了。

在使用自帶的IE8正式版的時候發現一個好東西-開發人員工具，功能上跟FireFox下的firebug類似，有些功能甚至比firebug更加強大，美中不足的就是它的性能實在是不敢恭維，若比爾大叔能夠在下一版本中改善的話就好了。使用了一下，感覺還是不錯的。寫下一些使用體會與大家分享，如果您是一位WEB前端開發者，并且想了解一下這個工具，請往下看，一般用戶就不用看啦~

提供一下IE8中文版的下載地址

Windows XP
Windows Vista
Windows Server 2003
Windows Server 2008
Windows XP 64-bit
Windows Vista 64-bit
Windows Server 2003 64-bit
Windows Server 2008 64-bit

注意：系統安裝了IE8之后，您的系統之前自帶的老版本IE就不能用啦

首先我們來了解一下這個工具。我百度了一下這個工具，原來它的前身是“IEdevtoolbar”，IE的一個插件。現在直接集成在了IE8中，并取了個比較牛B的名字。在功能方面，比起以前的IEdevtoolbar有了很大的增強。

這個工具在“工具”菜單欄下。IE8默認隱藏了菜單欄，可以按下ALT鍵讓其顯示，或者直接按F12快捷鍵呼出這個小工具。

開發人員工具是為前端開發人員開發頁面而設計的工具。提供了一系列的功能方便WEB開發，比如HTML、CSS、JavaScript代碼調試、取色、屏幕尺子等。

ok 我們已經看到它長什么樣子了，接下來，我們就根據它的菜單順序來一探究竟吧。

文件菜單

【全部撤銷】

之前在開發人員工具中進行的操作全部取消，并且刷新頁面個DOM結構。

【自定義Internet Explorer視圖源】

設置使用什么工具來查看網頁源文件。

【退出】

這個就不用說啦

查找菜單

【單擊選擇元素】

或者直接點擊左邊白色箭頭區域。

這是一個奇偶開關，打開時，用鼠標點擊頁面上的元素就會選中改元素，并且列出改元素的DOM結構、CSS樣式表等信息。

如上圖所示，我們選中了一個ID為mastheadhd的DIV標簽，從展開的樹形結構中我們很容易的就能看到這個元素的父元素子元素等信息，在右邊列出了他的樣式，其中劃橫線的樣式表示這個樣式已經被另一個優先級高的樣式所覆蓋，已經失效。調試的時候可以將樣式前面的勾去掉，表示強行禁用此樣式。而且每個樣式的屬性都可以在鼠標點擊后立即修改。從而即時看到修改的結果，非常方便。

【跟蹤樣式】

視圖和【樣式】視圖的作用是一樣的，都是用來看選中元素的樣式信息。區別僅僅是：它換了個視圖方式而已。

【布局】視圖

顯示選中元素的盒模型信息

【屬性】視圖

在屬性視圖中我們可以查看選中元素的屬性信息，并且可以任意增加或者刪除一些屬性以便快速調試頁面。注：在開發人員工具中對頁面的更改只是暫時的，并不會更改你的網頁內容。

禁用菜單

【腳本】

會禁止使用頁面的JavaScript 或VBscript腳本。為什么要禁用呢？為了測試頁面的健壯性。這個功能是方便測試在瀏覽器禁用腳本的情況下頁面的工作情況。

【彈出窗口阻止程序】

用來測試那種不讓瀏覽器或者安全軟件屏蔽的彈出窗口

【CSS】

測試頁面在不加載CSS樣式時候的頁面情況。一些比較簡陋的手機瀏覽器可能不支持CSS，所以這個功能還是有點用處的。

查看 菜單

【類和ID信息】

打開后可以查看類和ID名稱，這個似乎不太好用

【鏈接路徑】

功能跟上一個類似，突出顯示鏈接

【鏈接報告】
使用鏈接報告功能，開發人員工具會幫你生成一份此頁面的鏈接報表。包含鏈接數量、鏈接地址、是否新窗口打開等信息。

【選項卡索引】
高亮顯示出所有包含tabindex屬性的元素。tabindex屬性的設置，可以改變網頁元素獲得焦點的順序。

【訪問鍵】
高亮顯示所有包含“accesske屬性”的元素。設置accesskey屬性，可以設定元素獲得焦點的快捷鍵。

【源文件】之“帶有樣式的元素源”
生成一份包含選中元素樣式、HTML代碼，網頁級別信息的源文件。
必須先選中一個元素，此命令才有效。而且生成的源文件也只與選中元素有關。

【源文件】之“DOM（元素）”
快捷鍵是Ctrl+T。生成一份源文件。此源文件只包含選中元素的DOM結構信息。用過FireBug的朋友，可以聯想到“拷貝元素HTML代碼”這個命令。其實這個和那個差不多。只是這個是生成到一個窗口，而FireBug直接復制到剪貼板而已。

【源文件】之“DOM（頁面）”
快捷鍵Ctrl+G。生成一份源文件。此源文件包含整個頁面的DOM信息結構。非常操蛋的功能，不知道是不是因為bug的原因，此功能其實就是“查看網頁源碼”。因為，生成的源碼并不僅僅是DOM信息，也包含CSS和腳本信息等。

【源文件】之“原始狀態”
極其操蛋的功能，其實就是“查看網頁源碼”。大家應該都比較喜歡用鼠標右鍵直接在網頁上點吧。

轉載于:https://blog.51cto.com/seanli888/181217

總結

以上是生活随笔為你收集整理的IE8-开发人员工具使用（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。