http://www.cnblogs.com/JustinYoung/archive/2009/03/24/kaifarenyuangongju.html

你還沒有安裝IE8？

如果你是前端開發(fā)人員，那么還請你安裝一下這玩意吧。因?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)識“開發(fā)人員工具”

雖然這玩意改了時(shí)髦的名字，但是卻也不是什么新玩意，它的前身是“IEdevtoolbar”。但是，以前只是IE的一個(gè)插件而已。而在IE8中，瀏覽器已經(jīng)自動(dòng)集成了這玩意，不僅改了個(gè)有點(diǎn)土鱉的名字，而且功能也加強(qiáng)了很多。

開發(fā)人員工具在IE8的工具菜單下，或者直接點(diǎn)擊F12快捷鍵也可以呼叫出來。

IE8開發(fā)人員工具使用詳解

在我們介紹它之前，我們先來說說這玩意到底能做什么？如果你只是用瀏覽器來瀏覽網(wǎng)站，而不用操心頁面是怎么做出來的。那么我想你已經(jīng)可以離開這頁面了。

總體來說，開發(fā)人員工具就是是為前端開發(fā)人員開發(fā)頁面而設(shè)計(jì)的工具。提供一系列的小工具，讓你可以方便的查找頁面的bug，包括html代碼、css代碼和JavaScript代碼。同時(shí)，他也提供了一些雖然比較雞肋，但是還能咂咂味的小工具，例如取色、屏幕尺子等。

ok，我們已經(jīng)看到它了，并且也知道它能干什么了。那就讓我們根據(jù)菜單的順序一一來介紹它吧——

【文件】菜單

IE8開發(fā)人員工具【文件】菜單

【全部撤銷】

以前在開發(fā)人員工具中進(jìn)行的操作全部取消，并且刷新頁面和DOM結(jié)構(gòu)。

【自定義Internet Explorer試圖源】

【試圖源】真是操蛋的名詞。通俗一點(diǎn)的說法就是：“用什么編輯器查看網(wǎng)頁源文件”。例如：我用的就是EditPlus。

【退出】

為了不侮辱閣下的智商，這個(gè)我就不多說了。嗯，F12是個(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īng)不再起作用了。調(diào)試的時(shí)候，前面的勾可以鉤掉的，鉤掉的時(shí)候表示強(qiáng)行刪除此樣式。而且，每個(gè)樣式的屬性，用鼠標(biāo)點(diǎn)擊后都可以立即修改。從而即時(shí)的看到修改后的頁面效果，非常方便。

使用過FireFox的FireBug的朋友，對此一定不會(huì)陌生。區(qū)別僅僅是：FireBug是把優(yōu)先級比較低的樣式排列在下方，僅此而已。

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

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

【屬性】視圖可以查看選中元素的屬性信息。非常令人高興的是：你可以立即增加或者刪除一些屬性，用來快速的調(diào)試頁面。

哦，對了。需要注意的是：無論你是在開發(fā)人員工具中修改選中元素的樣式還是屬性，他們都是暫時(shí)的調(diào)試而已，并不會(huì)正在修改你的網(wǎng)頁源代碼。

【禁用】菜單

【腳本】

會(huì)禁止使用頁面的JavaScript或者VBScript腳本。為什么要禁用呢？為了測試頁面的健壯性。有些對頁面設(shè)計(jì)要求比較高的客戶會(huì)問：“如果客戶禁用了腳本，這個(gè)頁面還能不能使用呢？”恩，對，這個(gè)功能就是用來測試這些操蛋客戶的變態(tài)需求的。

【彈出窗口阻止程序】

彈出窗口的過濾器。用來測試哪種“怎么才能讓瀏覽器或者安全軟件不過濾掉我的彈出窗口。”

【CSS】

“CSS裸奔節(jié)”來了！用這里來測試一下你的頁面在CSS裸奔時(shí)的姿態(tài)吧。這個(gè)也是檢驗(yàn)頁面健壯性和可訪問性的重要測試。雖然，現(xiàn)在在中國會(huì)訪問網(wǎng)頁的盲人還不是很多。

【查看】菜單

IE8開發(fā)人員工具【查看】菜單

【類和ID信息】

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

【鏈接路徑】

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

【鏈接報(bào)告】

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

【選項(xiàng)卡索引】

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

【訪問鍵】

高亮顯示所有包含“accesskey屬性”的元素。設(shè)置accesskey屬性，可以設(shè)定元素獲得焦點(diǎn)的快捷鍵。

【源文件】之“帶有樣式的元素源”

生成一份包含選中元素樣式、HTML代碼，網(wǎng)頁級別信息的源文件。

必須先選中一個(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)?#xff0c;生成的源碼并不僅僅是DOM信息，也包含CSS和腳本信息等。

【源文件】之“原始狀態(tài)”

極其操蛋的功能，其實(shí)就是“查看網(wǎng)頁源碼”。大家應(yīng)該都比較喜歡用鼠標(biāo)右鍵直接在網(wǎng)頁上點(diǎn)吧。

【輪廓】菜單

【輪廓】菜單，很明顯就是把滿足條件的元素勾畫出來顯示的命令。

【表單元格】

就是把form表的各個(gè)單元格用桔色線框出來。讓你知道——哦。原來這里就是表的單元格呀。

【表】

就是把form表單用桔色線框出來。讓你知道——哦。原來這里就是form表單呀。

【DIV元素】

就是把頁面中的所有div元素用綠色線框出來。讓你知道——哦。原來這些都是div元素呀。

【圖像】

就是把頁面中的所有img元素用紫色線框出來。讓你知道——哦。原來這些都是img元素呀。

【任何元素】

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

【定位元素】之“相對”

會(huì)用綠色線框出來，所有具有position:relative樣式的元素。

【定位元素】之“絕對”

會(huì)用黑色線框出來，所有具有position:absolute樣式的元素。

【定位元素】之“固定”

會(huì)用藍(lán)色線框出來，所有具有position:static樣式的元素。

【定位元素】之“浮動(dòng)”

會(huì)用黃色線框出來，所有具有float樣式的元素。

【清除輪廓】

當(dāng)你的頁面已經(jīng)被各種顏色的線搞的像Excel表格一樣的時(shí)候，你可以可以使用這個(gè)命令來清除所有的線了。

【圖像】菜單

很明顯，這個(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è)圖片的非常詳盡的信息。

【緩存】菜單

IE8開發(fā)人員工具【緩存】菜單

管理緩存和Cookie的菜單組。對于開發(fā)人員來說這個(gè)將會(huì)是非常令人歡喜的功能。

【始終從服務(wù)器中刷新】

好像很高深的命令一樣。其實(shí)換句話說就是：“禁止使用瀏覽器緩存”。

【清除瀏覽器緩存】

快捷鍵Ctrl+R。沒啥好說的，只是簡化了以前的操作步驟而已。

不知道你注意到菜單中【清除瀏覽器緩存】后面有三個(gè)點(diǎn)沒有。這個(gè)表示，點(diǎn)擊此菜單后會(huì)確認(rèn)對話框。

【清除此域的瀏覽器緩存】

快捷鍵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è)就太簡單了。

【驗(yàn)證】菜單

必將引起江湖腥風(fēng)血雨（謝謝小七同學(xué)提醒我這個(gè)突然忘記了的成語，唉～可能最近看的武俠小說比較少的緣故吧。但是不知為何好像對“嬌喘連連”這類成語比較熟）的菜單。不久的將來必將產(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)證工具，對本地的頁面進(jìn)行驗(yàn)證。

【本地CSS】

打開w3c的CSS驗(yàn)證工具，對本地的頁面進(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)證對頁面進(jìn)行多個(gè)規(guī)范的驗(yàn)證。

IE8開發(fā)人員工具的集合驗(yàn)證對話框

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

?

?

IE8"開發(fā)人員工具"使用詳解下(瀏覽器模式、文本模式、JavaScript調(diào)試、探查器)

?

總結(jié)

以上是生活随笔為你收集整理的IE8“开发人员工具”使用详解上(各级菜单详解)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。