認識“開發人員工具”
雖然這玩意改了時髦的名字，但是卻也不是什么新玩意，它的前身是“IEdevtoolbar”。但是，以前只是IE的一個插件而已。而在IE8中，瀏覽器已經自動集成了這玩意，不僅改了個有點土鱉的名字，而且功能也加強了很多。
開發人員工具在IE8的工具菜單下，或者直接點擊F12快捷鍵也可以呼叫出來。
IE8開發人員工具使用詳解
在我們介紹它之前，我們先來說說這玩意到底能做什么？如果你只是用瀏覽器來瀏覽網站，而不用操心頁面是怎么做出來的。那么我想你已經可以離開這頁面了。
總體來說，開發人員工具就是是為前端開發人員開發頁面而設計的工具。提供一系列的小工具，讓你可以方便的查找頁面的bug，包括html代碼、css代碼和JavaScript代碼。同時，他也提供了一些雖然比較雞肋，但是還能咂咂味的小工具，例如取色、屏幕尺子等。
ok，我們已經看到它了，并且也知道它能干什么了。那就讓我們根據菜單的順序一一來介紹它吧——
【文件】菜單
IE8開發人員工具【文件】菜單
【全部撤銷】
以前在開發人員工具中進行的操作全部取消，并且刷新頁面和DOM結構。
【自定義Internet Explorer試圖源】
【試圖源】真是操蛋的名詞。通俗一點的說法就是：“用什么編輯器查看網頁源文件”。例如：我用的就是EditPlus。
【退出】
為了不侮辱閣下的智商，這個我就不多說了。嗯，F12是個奇偶快捷鍵，這個順便提一下吧。
【查找】菜單
【單擊選擇元素】
快捷鍵Ctrl+B，和點擊圖中的那個鼠標ICO按鈕效果一樣。最最常用的功能。也是一個奇偶開關。打開時，用鼠標點擊頁面上的元素時，就會選中改元素，并且列出改元素的DOM結構、CSS樣式等信息。
例如上面的圖。左邊的區域顯示了此超鏈接元素的DOM信息。可以明確地看出它的父元素、子元素以及兄弟元素。
右面的區域顯示了改元素樣式信息。其中被線劃掉的樣式，表示該樣式因為優先級不夠高，已經不再起作用了。調試的時候，前面的勾可以鉤掉的，鉤掉的時候表示強行刪除此樣式。而且，每個樣式的屬性，用鼠標點擊后都可以立即修改。從而即時的看到修改后的頁面效果，非常方便。
使用過FireFox的FireBug的朋友，對此一定不會陌生。區別僅僅是：FireBug是把優先級比較低的樣式排列在下方，僅此而已。
【跟蹤樣式】視圖和【樣式】視圖的作用是一樣的，都是用來看選中元素的樣式信息。區別僅僅是：它換了個視圖方式而已。具體習慣哪種視圖，就看你自己的喜好了。
【布局】視圖可以顯示選中元素的盒裝模型信息。雖然相比FireBug可以顯示更多的信息，但是我還是比較喜歡FireBug中直接在頁面上用色塊表現出來的方式。
【屬性】視圖可以查看選中元素的屬性信息。非常令人高興的是：你可以立即增加或者刪除一些屬性，用來快速的調試頁面。
哦，對了。需要注意的是：無論你是在開發人員工具中修改選中元素的樣式還是屬性，他們都是暫時的調試而已，并不會正在修改你的網頁源代碼。
【禁用】菜單
【腳本】
會禁止使用頁面的JavaScript或者VBScript腳本。為什么要禁用呢？為了測試頁面的健壯性。有些對頁面設計要求比較高的客戶會問：“如果客戶禁用了腳本，這個頁面還能不能使用呢？”恩，對，這個功能就是用來測試這些操蛋客戶的變態需求的。
【彈出窗口阻止程序】
彈出窗口的過濾器。用來測試哪種“怎么才能讓瀏覽器或者安全軟件不過濾掉我的彈出窗口。”
【CSS】
“CSS裸奔節”來了！用這里來測試一下你的頁面在CSS裸奔時的姿態吧。這個也是檢驗頁面健壯性和可訪問性的重要測試。雖然，現在在中國會訪問網頁的盲人還不是很多。
【查看】菜單
IE8開發人員工具【查看】菜單
【類和ID信息】
快捷鍵是Ctrl+I，奇偶開關。打開以后，你就會看到頁面上布滿了密密麻麻的紅色色塊。同時會顯示出class名稱或者ID名稱。是的，這個就是查看類和ID信息的效果了。不過說實話，誰會對這一坨坨紅色的大便感興趣？不僅把頁面搞的看上去像個縫滿補丁的乞丐服，而且完全看不清楚-_-b...
【鏈接路徑】
和上面一樣。它會把頁面中的所有超鏈接都會一坨坨的紅色框出來，并且顯示其鏈接地址。
【鏈接報告】
使用鏈接報告功能，開發人員工具會幫你生成一份此頁面的鏈接報表。包含鏈接數量、鏈接地址、是否新窗口打開等信息。不過，具體這玩意有什么用。我也不知道。
【選項卡索引】
高亮顯示出所有包含tabindex屬性的元素。tabindex屬性的設置，可以改變網頁元素獲得焦點的順序。
【訪問鍵】
高亮顯示所有包含“accesskey屬性”的元素。設置accesskey屬性，可以設定元素獲得焦點的快捷鍵。
【源文件】之“帶有樣式的元素源”
生成一份包含選中元素樣式、HTML代碼，網頁級別信息的源文件。
必須先選中一個元素，此命令才有效。而且生成的源文件也只與選中元素有關。
【源文件】之“DOM（元素）”
快捷鍵是Ctrl+T。生成一份源文件。此源文件只包含選中元素的DOM結構信息。用過FireBug的朋友，可以聯想到“拷貝元素HTML代碼”這個命令。其實這個和那個差不多。只是這個是生成到一個窗口，而FireBug直接復制到剪貼板而已。
【源文件】之“DOM（頁面）”
快捷鍵Ctrl+G。生成一份源文件。此源文件包含整個頁面的DOM信息結構。非常操蛋的功能，不知道是不是因為bug的原因，此功能其實就是“查看網頁源碼”。因為，生成的源碼并不僅僅是DOM信息，也包含CSS和腳本信息等。
【源文件】之“原始狀態”
極其操蛋的功能，其實就是“查看網頁源碼”。大家應該都比較喜歡用鼠標右鍵直接在網頁上點吧。
【輪廓】菜單
【輪廓】菜單，很明顯就是把滿足條件的元素勾畫出來顯示的命令。
【表單元格】
就是把form表的各個單元格用桔色線框出來。讓你知道——哦。原來這里就是表的單元格呀。
【表】
就是把form表單用桔色線框出來。讓你知道——哦。原來這里就是form表單呀。
【DIV元素】
就是把頁面中的所有div元素用綠色線框出來。讓你知道——哦。原來這些都是div元素呀。
【圖像】
就是把頁面中的所有img元素用紫色線框出來。讓你知道——哦。原來這些都是img元素呀。
【任何元素】
這個比較強勁了。你可以自定義任何標簽和他們要用什么顏色的線框出來。點擊這個菜單，會彈出下面的對話框。很簡單。不再做說明了。
【定位元素】之“相對”
會用綠色線框出來，所有具有position:relative樣式的元素。
【定位元素】之“絕對”
會用黑色線框出來，所有具有position:absolute樣式的元素。
【定位元素】之“固定”
會用藍色線框出來，所有具有position:static樣式的元素。
【定位元素】之“浮動”
會用黃色線框出來，所有具有float樣式的元素。
【清除輪廓】
當你的頁面已經被各種顏色的線搞的像Excel表格一樣的時候，你可以可以使用這個命令來清除所有的線了。
【圖像】菜單
很明顯，這個命令就是控制頁面上各種圖片的。
【禁用圖像】
為了不侮辱你的智商，這個就不說了。唯一一點需要說明的是——不僅僅是img元素，而且連元素的背景圖片都會被禁用哦。
【顯示圖像尺寸】
很不錯的功能?？梢圆挥貌榭磮D片屬性就快速的知道各個圖片的尺寸大小，當然，單位是像素。
【顯示圖像文件大小】
很不錯的功能?？梢圆挥貌榭磮D片屬性就快速的知道各個圖片的文件大小，當然，單位是字節。
【顯示圖像路徑】
很不錯的功能?？梢圆挥貌榭磮D片屬性就快速的知道各個圖片的URL路徑，而且還可以復制。
【顯示Alt文本】
可以顯示出img元素的alt屬性的文本。順便說一下：圖片的alt千萬不要進行關鍵字的堆砌，否則很容易被認定為SEO過渡優化。
【查看圖像報告】
生成一份詳細的改頁面的圖像報表。包含每個圖片的非常詳盡的信息。
【緩存】菜單
IE8開發人員工具【緩存】菜單
管理緩存和Cookie的菜單組。對于開發人員來說這個將會是非常令人歡喜的功能。
【始終從服務器中刷新】
好像很高深的命令一樣。其實換句話說就是：“禁止使用瀏覽器緩存”。
【清除瀏覽器緩存】
快捷鍵Ctrl+R。沒啥好說的，只是簡化了以前的操作步驟而已。
不知道你注意到菜單中【清除瀏覽器緩存】后面有三個點沒有。這個表示，點擊此菜單后會確認對話框。
【清除此域的瀏覽器緩存】
快捷鍵Ctrl+D。沒啥好說的，只清除本域下的瀏覽器緩存。
【禁用Cookie】
沒有什么好處說。不讓吃餅干了。
【清除會話Cookie】
清除瀏覽器所有的Cookie。你的論壇呀，社區呀都等著重新登陸吧。
【清除域的Cookie】
只清除本域下的Cookie。
【查看Cookie信息】
查看此頁面包含的Cookie信息。想都別想，密碼你是得不到的。
【工具】菜單
開發人員工具附送的一些很有用的小工具，雖然相比其他專門的相關工具有點弱。但是應急還是足夠的。
【重新調整大小】
非常有用的小工具?？梢钥焖俚膶g覽器窗口調整到相關的尺寸。這樣，測試網頁分辨率兼容性的時候就方便多了。
【顯示標尺】
一個簡單的標尺工具。使用它可以度量長度、距離等信息。線的顏色是可以換的。也可以創建多個標尺。如果太細微的地方，可以使用放大鏡功能。
【顯示顏色選取器】
一個簡單的拾色工具。點擊鼠標就可以選中顏色。不過，我向你推薦另外一個工具——《我的工作工具箱——抓色工具(ColorPic)》，相比之下，開發人員工具中的這個就太簡單了。
【驗證】菜單
必將引起江湖腥風血雨（謝謝小七同學提醒我這個突然忘記了的成語，唉～可能最近看的武俠小說比較少的緣故吧。但是不知為何好像對“嬌喘連連”這類成語比較熟）的菜單。不久的將來必將產生無數的孔乙己。
【HTML】
驗證頁面的HTML代碼。會將本頁面發送到w3c的html驗證工具，并得到驗證報表。
【CSS】
驗證頁面的CSS代碼。會將本頁面發送到w3c的css驗證工具，并得到驗證報表。
【源】
驗證頁面的源文件代碼。會將本頁面發送到feedvalidator.org驗證工具，并得到驗證報表。
【鏈接】
驗證頁面的鏈接。會將本頁面發送到w3c的驗證工具，并得到驗證報表。
【本地HTML】
打開w3c的html驗證工具，對本地的頁面進行驗證。
【本地CSS】
打開w3c的CSS驗證工具，對本地的頁面進行驗證。
【輔助功能】之“WCAG清單”
驗證頁面的WCAG(Web Content Accessibility Report-頁面的可訪問性)。會將本頁面發送到contentquality.com驗證工具，并得到驗證報表。
【輔助功能】之“第508條清單”
驗證頁面的508 Standards。會將本頁面發送到contentquality.com驗證工具，并得到驗證報表。
【多個驗證】
同時驗證對頁面進行多個規范的驗證。
IE8開發人員工具的集合驗證對話框
對于頁面的驗證，我想說兩句：其實頁面是不是一樣要通過驗證才能上線呢？我個人感覺完全沒有必要。如果你是學生，躺在象牙塔里面。你可以隨便怎么折騰你的頁面，因為你就是客戶，你就是有時間，你就是追求完美。但是商業項目，完全沒有必要為了一個“PASS”而浪費寶貴的項目資源。因為沒有哪個客戶會在乎“你看，我們做的這個頁面是經過w3c多方面驗證的。”如果真的有客戶在乎了，那么我只能說，我很崇拜你的“忽悠”能力。
眼鏡蛇