IE8-開發人員工具使用（一）

前段時間安裝了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和腳本信息等。

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