IE8“開發(fā)人員工具”使用詳解上(各級(jí)菜單詳解)
IE8正式版已經(jīng)發(fā)布了。本篇文章不會(huì)非常扯蛋地去進(jìn)行什么評(píng)測，然后給出什么“Chrome運(yùn)行JavaScript能力是IE8的15倍”、什么“IE8頁面渲染速度是Safari的2.456倍”、什么“IE8的抗強(qiáng)暴能力比FireFox高出1.235倍” 這樣的操蛋的結(jié)論。我管誰比誰強(qiáng)多少？我只知道：當(dāng)windows7發(fā)布的時(shí)候，IE8瀏覽器的市場占有率將讓前臺(tái)開發(fā)人員無法說：“不用去管IE8，沒有幾個(gè)人在用它”。所以，這篇文章將會(huì)非常務(wù)實(shí)的講解一下，IE8中也許是唯一讓開發(fā)人員感到親切的“開發(fā)人員工具”。同時(shí)，我們會(huì)延伸一些相關(guān)的資料和知識(shí)。所以，請(qǐng)拋棄你對(duì)IE8的偏見，耐心的看下去吧。

你還沒有安裝IE8？

如果你是前端開發(fā)人員，那么還請(qǐng)你安裝一下這玩意吧。因?yàn)檎桨嬉呀?jīng)發(fā)布了。不同于以前的beta版，這次咱得認(rèn)真的關(guān)注一下它了。去下載并安裝一個(gè)吧，下面是下載地址——

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英文版下載列表

Windows XP
Windows XP 64 Bit
Windows Vista
Windows Vista 64 Bit
Windows Server 2003
Windows Server 2003 64 Bit
Windows Server 2008
Windows Server 2008 64 Bit

哦，也許你會(huì)擔(dān)心，你系統(tǒng)內(nèi)的IE6或者IE7完蛋了。恩，的確，這有可能。但是，你可以試試下面的工具。它可以讓你多版本的IE共存——IE多版本共存的解決方案——IETester
微軟網(wǎng)頁開發(fā)調(diào)試?yán)鱏uperPreview（附下載）
認(rèn)識(shí)“開發(fā)人員工具”

雖然這玩意改了時(shí)髦的名字，但是卻也不是什么新玩意，它的前身是“IEdevtoolbar”。但是，以前只是IE的一個(gè)插件而已。而在IE8中，瀏覽器已經(jīng)自動(dòng)集成了這玩意，不僅改了個(gè)有點(diǎn)土鱉的名字，而且功能也加強(qiáng)了很多。
開發(fā)人員工具在IE8的工具菜單下，或者直接點(diǎn)擊F12快捷鍵也可以呼叫出來。

在我們介紹它之前，我們先來說說這玩意到底能做什么？如果你只是用瀏覽器來瀏覽網(wǎng)站，而不用操心頁面是怎么做出來的。那么我想你已經(jīng)可以離開這頁面了。
總體來說，開發(fā)人員工具就是是為前端開發(fā)人員開發(fā)頁面而設(shè)計(jì)的工具。提供一系列的小工具，讓你可以方便的查找頁面的bug，包括html代碼、css代碼和JavaScript代碼。同時(shí)，他也提供了一些雖然比較雞肋，但是還能咂咂味的小工具，例如取色、屏幕尺子等。
ok，我們已經(jīng)看到它了，并且也知道它能干什么了。那就讓我們根據(jù)菜單的順序一一來介紹它吧——

本篇文章已經(jīng)簡單的把開發(fā)人員工具的各個(gè)菜單講解了一遍。相信，大家已經(jīng)可以簡單的使用起這個(gè)強(qiáng)大的工具了。
【文件】菜單

【全部撤銷】
以前在開發(fā)人員工具中進(jìn)行的操作全部取消，并且刷新頁面和DOM結(jié)構(gòu)。
【自定義Internet Explorer試圖源】
【試圖源】真是操蛋的名詞。通俗一點(diǎn)的說法就是：“用什么編輯器查看網(wǎng)頁源文件”。例如：我用的就是EditPlus。
【退出】
為了不侮辱閣下的智商，這個(gè)我就不多說了。嗯，F(xiàn)12是個(gè)奇偶快捷鍵，這個(gè)順便提一下吧。
【查找】菜單
單擊選擇元素

快捷鍵Ctrl B，和點(diǎn)擊圖中的那個(gè)鼠標(biāo)ICO按鈕效果一樣。最最常用的功能。也是一個(gè)奇偶開關(guān)。打開時(shí)，用鼠標(biāo)點(diǎn)擊頁面上的元素時(shí)，就會(huì)選中改元素，并且列出改元素的DOM結(jié)構(gòu)、CSS樣式等信息。

例如上面的圖。左邊的區(qū)域顯示了此超鏈接元素的DOM信息。可以明確地看出它的父元素、子元素以及兄弟元素。
右面的區(qū)域顯示了改元素樣式信息。其中被線劃掉的樣式，表示該樣式因?yàn)閮?yōu)先級(jí)不夠高，已經(jīng)不再起作用了。調(diào)試的時(shí)候，前面的勾可以鉤掉的，鉤掉的時(shí)候表示強(qiáng)行刪除此樣式。而且，每個(gè)樣式的屬性，用鼠標(biāo)點(diǎn)擊后都可以立即修改。從而即時(shí)的看到修改后的頁面效果，非常方便。
使用過FireFox的FireBug的朋友，對(duì)此一定不會(huì)陌生。區(qū)別僅僅是：FireBug是把優(yōu)先級(jí)比較低的樣式排列在下方，僅此而已。

【跟蹤樣式】視圖和【樣式】視圖的作用是一樣的，都是用來看選中元素的樣式信息。區(qū)別僅僅是：它換了個(gè)視圖方式而已。具體習(xí)慣哪種視圖，就看你自己的喜好了。

本篇文章已經(jīng)簡單的把開發(fā)人員工具的各個(gè)菜單講解了一遍。相信，大家已經(jīng)可以簡單的使用起這個(gè)強(qiáng)大的工具了。


【布局】視圖可以顯示選中元素的盒裝模型信息。雖然相比FireBug可以顯示更多的信息，但是我還是比較喜歡FireBug中直接在頁面上用色塊表現(xiàn)出來的方式。

【屬性】視圖可以查看選中元素的屬性信息。非常令人高興的是：你可以立即增加或者刪除一些屬性，用來快速的調(diào)試頁面。
哦，對(duì)了。需要注意的是：無論你是在開發(fā)人員工具中修改選中元素的樣式還是屬性，他們都是暫時(shí)的調(diào)試而已，并不會(huì)正在修改你的網(wǎng)頁源代碼。
【禁用】菜單

【腳本】
會(huì)禁止使用頁面的JavaScript或者VBScript腳本。為什么要禁用呢？為了測試頁面的健壯性。有些對(duì)頁面設(shè)計(jì)要求比較高的客戶會(huì)問：“如果客戶禁用了腳本，這個(gè)頁面還能不能使用呢？”恩，對(duì)，這個(gè)功能就是用來測試這些操蛋客戶的變態(tài)需求的。
【彈出窗口阻止程序】
彈出窗口的過濾器。用來測試哪種“怎么才能讓瀏覽器或者安全軟件不過濾掉我的彈出窗口。”
【CSS】
“CSS裸奔節(jié)”來了！用這里來測試一下你的頁面在CSS裸奔時(shí)的姿態(tài)吧。這個(gè)也是檢驗(yàn)頁面健壯性和可訪問性的重要測試。雖然，現(xiàn)在在中國會(huì)訪問網(wǎng)頁的盲人還不是很多。

本篇文章已經(jīng)簡單的把開發(fā)人員工具的各個(gè)菜單講解了一遍。相信，大家已經(jīng)可以簡單的使用起這個(gè)強(qiáng)大的工具了。
【查看】菜單

【類和ID信息】
快捷鍵是Ctrl I，奇偶開關(guān)。打開以后，你就會(huì)看到頁面上布滿了密密麻麻的紅色色塊。同時(shí)會(huì)顯示出class名稱或者ID名稱。是的，這個(gè)就是查看類和ID信息的效果了。不過說實(shí)話，誰會(huì)對(duì)這一坨坨紅色的大便感興趣？不僅把頁面搞的看上去像個(gè)縫滿補(bǔ)丁的乞丐服，而且完全看不清楚-_-b...

【鏈接路徑】
和上面一樣。它會(huì)把頁面中的所有超鏈接都會(huì)一坨坨的紅色框出來，并且顯示其鏈接地址。

【鏈接報(bào)告】
使用鏈接報(bào)告功能，開發(fā)人員工具會(huì)幫你生成一份此頁面的鏈接報(bào)表。包含鏈接數(shù)量、鏈接地址、是否新窗口打開等信息。不過，具體這玩意有什么用。我也不知道。

【選項(xiàng)卡索引】
高亮顯示出所有包含tabindex屬性的元素。tabindex屬性的設(shè)置，可以改變網(wǎng)頁元素獲得焦點(diǎn)的順序。

本篇文章已經(jīng)簡單的把開發(fā)人員工具的各個(gè)菜單講解了一遍。相信，大家已經(jīng)可以簡單的使用起這個(gè)強(qiáng)大的工具了。
【訪問鍵】
高亮顯示所有包含“accesskey屬性”的元素。設(shè)置accesskey屬性，可以設(shè)定元素獲得焦點(diǎn)的快捷鍵。

【源文件】之“帶有樣式的元素源”
生成一份包含選中元素樣式、HTML代碼，網(wǎng)頁級(jí)別信息的源文件。
必須先選中一個(gè)元素，此命令才有效。而且生成的源文件也只與選中元素有關(guān)。
【源文件】之“DOM（元素）”
快捷鍵是Ctrl T。生成一份源文件。此源文件只包含選中元素的DOM結(jié)構(gòu)信息。用過FireBug的朋友，可以聯(lián)想到“拷貝元素HTML代碼”這個(gè)命令。其實(shí)這個(gè)和那個(gè)差不多。只是這個(gè)是生成到一個(gè)窗口，而FireBug直接復(fù)制到剪貼板而已。
【源文件】之“DOM（頁面）”
快捷鍵Ctrl G。生成一份源文件。此源文件包含整個(gè)頁面的DOM信息結(jié)構(gòu)。非常操蛋的功能，不知道是不是因?yàn)閎ug的原因，此功能其實(shí)就是“查看網(wǎng)頁源碼”。因?yàn)椋傻脑创a并不僅僅是DOM信息，也包含CSS和腳本信息等。
【源文件】之“原始狀態(tài)”
極其操蛋的功能，其實(shí)就是“查看網(wǎng)頁源碼”。大家應(yīng)該都比較喜歡用鼠標(biāo)右鍵直接在網(wǎng)頁上點(diǎn)吧。
【輪廓】菜單

【輪廓】菜單，很明顯就是把滿足條件的元素勾畫出來顯示的命令。
【表單元格】
就是把form表的各個(gè)單元格用桔色線框出來。讓你知道——哦。原來這里就是表的單元格呀。

【表】
就是把form表單用桔色線框出來。讓你知道——哦。原來這里就是form表單呀。
【DIV元素】
就是把頁面中的所有div元素用綠色線框出來。讓你知道——哦。原來這些都是div元素呀。


本篇文章已經(jīng)簡單的把開發(fā)人員工具的各個(gè)菜單講解了一遍。相信，大家已經(jīng)可以簡單的使用起這個(gè)強(qiáng)大的工具了。
【圖像】
就是把頁面中的所有img元素用紫色線框出來。讓你知道——哦。原來這些都是img元素呀。

【任何元素】
這個(gè)比較強(qiáng)勁了。你可以自定義任何標(biāo)簽和他們要用什么顏色的線框出來。點(diǎn)擊這個(gè)菜單，會(huì)彈出下面的對(duì)話框。很簡單。不再做說明了。

【定位元素】之“相對(duì)”
會(huì)用綠色線框出來，所有具有position:relative樣式的元素。
【定位元素】之“絕對(duì)”
會(huì)用黑色線框出來，所有具有position:absolute樣式的元素。
【定位元素】之“固定”
會(huì)用藍(lán)色線框出來，所有具有position:static樣式的元素。
【定位元素】之“浮動(dòng)”
會(huì)用黃色線框出來，所有具有float樣式的元素。
【清除輪廓】
當(dāng)你的頁面已經(jīng)被各種顏色的線搞的像Excel表格一樣的時(shí)候，你可以可以使用這個(gè)命令來清除所有的線了。


本篇文章已經(jīng)簡單的把開發(fā)人員工具的各個(gè)菜單講解了一遍。相信，大家已經(jīng)可以簡單的使用起這個(gè)強(qiáng)大的工具了。
【圖像】菜單

很明顯，這個(gè)命令就是控制頁面上各種圖片的。
【禁用圖像】
為了不侮辱你的智商，這個(gè)就不說了。唯一一點(diǎn)需要說明的是——不僅僅是img元素，而且連元素的背景圖片都會(huì)被禁用哦。
【顯示圖像尺寸】
很不錯(cuò)的功能。可以不用查看圖片屬性就快速的知道各個(gè)圖片的尺寸大小，當(dāng)然，單位是像素。

【顯示圖像文件大小】
很不錯(cuò)的功能。可以不用查看圖片屬性就快速的知道各個(gè)圖片的文件大小，當(dāng)然，單位是字節(jié)。

【顯示圖像路徑】
很不錯(cuò)的功能。可以不用查看圖片屬性就快速的知道各個(gè)圖片的URL路徑，而且還可以復(fù)制。

【顯示Alt文本】
可以顯示出img元素的alt屬性的文本。順便說一下：圖片的alt千萬不要進(jìn)行關(guān)鍵字的堆砌，否則很容易被認(rèn)定為SEO過渡優(yōu)化。

【查看圖像報(bào)告】
生成一份詳細(xì)的改頁面的圖像報(bào)表。包含每個(gè)圖片的非常詳盡的信息。


本篇文章已經(jīng)簡單的把開發(fā)人員工具的各個(gè)菜單講解了一遍。相信，大家已經(jīng)可以簡單的使用起這個(gè)強(qiáng)大的工具了。
【緩存】菜單

管理緩存和Cookie的菜單組。對(duì)于開發(fā)人員來說這個(gè)將會(huì)是非常令人歡喜的功能。
【始終從服務(wù)器中刷新】
好像很高深的命令一樣。其實(shí)換句話說就是：“禁止使用瀏覽器緩存”。
【清除瀏覽器緩存】
快捷鍵Ctrl R。沒啥好說的，只是簡化了以前的操作步驟而已。
不知道你注意到菜單中【清除瀏覽器緩存】后面有三個(gè)點(diǎn)沒有。這個(gè)表示，點(diǎn)擊此菜單后會(huì)確認(rèn)對(duì)話框。
【清除此域的瀏覽器緩存】
快捷鍵Ctrl D。沒啥好說的，只清除本域下的瀏覽器緩存。
【禁用Cookie】
沒有什么好處說。不讓吃餅干了。
【清除會(huì)話Cookie】
清除瀏覽器所有的Cookie。你的論壇呀，社區(qū)呀都等著重新登陸吧。
【清除域的Cookie】
只清除本域下的Cookie。
【查看Cookie信息】
查看此頁面包含的Cookie信息。想都別想，密碼你是得不到的。
【工具】菜單

開發(fā)人員工具附送的一些很有用的小工具，雖然相比其他專門的相關(guān)工具有點(diǎn)弱。但是應(yīng)急還是足夠的。
【重新調(diào)整大小】
非常有用的小工具。可以快速的將瀏覽器窗口調(diào)整到相關(guān)的尺寸。這樣，測試網(wǎng)頁分辨率兼容性的時(shí)候就方便多了。
【顯示標(biāo)尺】
一個(gè)簡單的標(biāo)尺工具。使用它可以度量長度、距離等信息。線的顏色是可以換的。也可以創(chuàng)建多個(gè)標(biāo)題。如果太細(xì)為的地方，可以使用放大鏡功能。

【顯示顏色選取器】
一個(gè)簡單的拾色工具。點(diǎn)擊鼠標(biāo)就可以選中顏色。不過，我向你推薦另外一個(gè)工具——《我的工作工具箱——抓色工具(ColorPic)》，相比之下，開發(fā)人員工具中的這個(gè)就太簡單了。


本篇文章已經(jīng)簡單的把開發(fā)人員工具的各個(gè)菜單講解了一遍。相信，大家已經(jīng)可以簡單的使用起這個(gè)強(qiáng)大的工具了。
【驗(yàn)證】菜單

必將引起江湖腥風(fēng)血雨（謝謝小七同學(xué)提醒我這個(gè)突然忘記了的成語，唉～可能最新看的武俠小說比較少的緣故吧。但是最近好像對(duì)“嬌喘連連”這類成語比較熟）的菜單。不久的將來必將產(chǎn)生無數(shù)的孔乙己。
【HTML】
驗(yàn)證頁面的HTML代碼。會(huì)將本頁面發(fā)送到w3c的html驗(yàn)證工具，并得到驗(yàn)證報(bào)表。
【CSS】
驗(yàn)證頁面的CSS代碼。會(huì)將本頁面發(fā)送到w3c的css驗(yàn)證工具，并得到驗(yàn)證報(bào)表。
【源】
驗(yàn)證頁面的源文件代碼。會(huì)將本頁面發(fā)送到feedvalidator.org驗(yàn)證工具，并得到驗(yàn)證報(bào)表。
【鏈接】
驗(yàn)證頁面的鏈接。會(huì)將本頁面發(fā)送到w3c的驗(yàn)證工具，并得到驗(yàn)證報(bào)表。
【本地HTML】
打開w3c的html驗(yàn)證工具，對(duì)本地的頁面進(jìn)行驗(yàn)證。
【本地CSS】
打開w3c的CSS驗(yàn)證工具，對(duì)本地的頁面進(jìn)行驗(yàn)證。
【輔助功能】之“WCAG清單”
驗(yàn)證頁面的WCAG(Web Content Accessibility Report-頁面的可訪問性)。會(huì)將本頁面發(fā)送到contentquality.com驗(yàn)證工具，并得到驗(yàn)證報(bào)表。
【輔助功能】之“第508條清單”
驗(yàn)證頁面的508 Standards。會(huì)將本頁面發(fā)送到contentquality.com驗(yàn)證工具，并得到驗(yàn)證報(bào)表。
【多個(gè)驗(yàn)證】
同時(shí)驗(yàn)證對(duì)頁面進(jìn)行多個(gè)規(guī)范的驗(yàn)證。

對(duì)于頁面的驗(yàn)證，我想說兩句：其實(shí)頁面是不是一樣要通過驗(yàn)證才能上線呢？我個(gè)人感覺完全沒有必要。如果你是學(xué)生，躺在象牙塔里面。你可以隨便怎么折騰你的頁面，因?yàn)槟憔褪强蛻簦憔褪怯袝r(shí)間。但是商業(yè)項(xiàng)目，完全沒有必要為了一個(gè)“PASS”而浪費(fèi)寶貴的項(xiàng)目資源。因?yàn)闆]有哪個(gè)客戶會(huì)在乎“你看，我做的這個(gè)頁面是經(jīng)過w3c多方面驗(yàn)證的。”如果真的有客戶在乎了，那么我只能說，我很崇拜你的“忽悠”能力。

敬請(qǐng)期待下一集

本篇文章已經(jīng)簡單的把開發(fā)人員工具的各個(gè)菜單講解了一遍。相信，大家已經(jīng)可以簡單的使用起這個(gè)強(qiáng)大的工具了。
但是更為強(qiáng)大的功能，我們還完全沒有講到。所有，請(qǐng)期待我們下一篇文章吧。下一篇文章，將會(huì)詳細(xì)的講解JavaScript調(diào)試、瀏覽器模式、文本模式等功能的使用。