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

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

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

3、紹它吧【文件】菜單IE8開發(fā)人員工具【文件】菜單 【全部撤銷】以前在開發(fā)人員工具中進行的操作全部取消，并且刷新頁面和DOM結(jié)構(gòu)?！咀远xInternet Explorer試圖源】【試圖源】真是操蛋的名詞。通俗一點的說法就是：“用什么編輯器查看網(wǎng)頁源文件”。例如：我用的就是EditPlus。【退出】為了不侮辱閣下的智商，這個我就不多說了。嗯，F(xiàn)12是個奇偶快捷鍵，這個順便提一下吧?！静檎摇坎藛巍締螕暨x擇元素】快捷鍵Ctrl+B，和點擊圖中的那個鼠標ICO按鈕效果一樣。最最常用的功能。也是一個奇偶開關(guān)。打開時，用鼠標點擊頁面上的元素時，就會選中改元素，并且列出改元素的DOM結(jié)構(gòu)、CSS樣式等信息。

4、例如上面的圖。左邊的區(qū)域顯示了此超鏈接元素的DOM信息?？梢悦鞔_地看出它的父元素、子元素以及兄弟元素。右面的區(qū)域顯示了改元素樣式信息。其中被線劃掉的樣式，表示該樣式因為優(yōu)先級不夠高，已經(jīng)不再起作用了。調(diào)試的時候，前面的勾可以鉤掉的，鉤掉的時候表示強行刪除此樣式。而且，每個樣式的屬性，用鼠標點擊后都可以立即修改。從而即時的看到修改后的頁面效果，非常方便。使用過FireFox的FireBug的朋友，對此一定不會陌生。區(qū)別僅僅是：FireBug是把優(yōu)先級比較低的樣式排列在下方，僅此而已?！靖櫂邮健恳晥D和【樣式】視圖的作用是一樣的，都是用來看選中元素的樣式信息。區(qū)別僅僅是：它換了個視圖方式而已。具體

5、習(xí)慣哪種視圖，就看你自己的喜好了?！静季帧恳晥D可以顯示選中元素的盒裝模型信息。雖然相比FireBug可以顯示更多的信息，但是我還是比較喜歡FireBug中直接在頁面上用色塊表現(xiàn)出來的方式?！緦傩浴恳晥D可以查看選中元素的屬性信息。非常令人高興的是：你可以立即增加或者刪除一些屬性，用來快速的調(diào)試頁面。哦，對了。需要注意的是：無論你是在開發(fā)人員工具中修改選中元素的樣式還是屬性，他們都是暫時的調(diào)試而已，并不會正在修改你的網(wǎng)頁源代碼?！窘谩坎藛巍灸_本】會禁止使用頁面的JavaScript或者VBScript腳本。為什么要禁用呢？為了測試頁面的健壯性。有些對頁面設(shè)計要求比較高的客戶會問：“如果客戶禁用了

6、腳本，這個頁面還能不能使用呢？”恩，對，這個功能就是用來測試這些操蛋客戶的變態(tài)需求的。【彈出窗口阻止程序】彈出窗口的過濾器。用來測試哪種“怎么才能讓瀏覽器或者安全軟件不過濾掉我的彈出窗口。”【CSS】“CSS裸奔節(jié)”來了！用這里來測試一下你的頁面在CSS裸奔時的姿態(tài)吧。這個也是檢驗頁面健壯性和可訪問性的重要測試。雖然，現(xiàn)在在中國會訪問網(wǎng)頁的盲人還不是很多?！静榭础坎藛蜪E8開發(fā)人員工具【查看】菜單 【類和ID信息】快捷鍵是Ctrl+I，奇偶開關(guān)。打開以后，你就會看到頁面上布滿了密密麻麻的紅色色塊。同時會顯示出class名稱或者ID名稱。是的，這個就是查看類和ID信息的效果了。不過說實話，誰會對

7、這一坨坨紅色的大便感興趣？不僅把頁面搞的看上去像個縫滿補丁的乞丐服，而且完全看不清楚-_-b.【鏈接路徑】和上面一樣。它會把頁面中的所有超鏈接都會一坨坨的紅色框出來，并且顯示其鏈接地址?！炬溄訄蟾妗渴褂面溄訄蟾婀δ?，開發(fā)人員工具會幫你生成一份此頁面的鏈接報表。包含鏈接數(shù)量、鏈接地址、是否新窗口打開等信息。不過，具體這玩意有什么用。我也不知道。【選項卡索引】高亮顯示出所有包含tabindex屬性的元素。tabindex屬性的設(shè)置，可以改變網(wǎng)頁元素獲得焦點的順序?！驹L問鍵】高亮顯示所有包含“accesskey屬性”的元素。設(shè)置accesskey屬性，可以設(shè)定元素獲得焦點的快捷鍵?！驹次募恐皫в?/p>

8、樣式的元素源”生成一份包含選中元素樣式、HTML代碼，網(wǎng)頁級別信息的源文件。必須先選中一個元素，此命令才有效。而且生成的源文件也只與選中元素有關(guān)?！驹次募恐癉OM（元素）”快捷鍵是Ctrl+T。生成一份源文件。此源文件只包含選中元素的DOM結(jié)構(gòu)信息。用過FireBug的朋友，可以聯(lián)想到“拷貝元素HTML代碼”這個命令。其實這個和那個差不多。只是這個是生成到一個窗口，而FireBug直接復(fù)制到剪貼板而已?！驹次募恐癉OM（頁面）”快捷鍵Ctrl+G。生成一份源文件。此源文件包含整個頁面的DOM信息結(jié)構(gòu)。非常操蛋的功能，不知道是不是因為bug的原因，此功能其實就是“查看網(wǎng)頁源碼”。因為，生

9、成的源碼并不僅僅是DOM信息，也包含CSS和腳本信息等?！驹次募恐霸紶顟B(tài)”極其操蛋的功能，其實就是“查看網(wǎng)頁源碼”。大家應(yīng)該都比較喜歡用鼠標右鍵直接在網(wǎng)頁上點吧。【輪廓】菜單【輪廓】菜單，很明顯就是把滿足條件的元素勾畫出來顯示的命令?！颈韱卧瘛烤褪前裦orm表的各個單元格用桔色線框出來。讓你知道哦。原來這里就是表的單元格呀。【表】就是把form表單用桔色線框出來。讓你知道哦。原來這里就是form表單呀?！綝IV元素】就是把頁面中的所有div元素用綠色線框出來。讓你知道哦。原來這些都是div元素呀?！緢D像】就是把頁面中的所有img元素用紫色線框出來。讓你知道哦。原來這些都是img元素呀。

10、【任何元素】這個比較強勁了。你可以自定義任何標簽和他們要用什么顏色的線框出來。點擊這個菜單，會彈出下面的對話框。很簡單。不再做說明了?！径ㄎ辉亍恐跋鄬Α睍镁G色線框出來，所有具有position:relative樣式的元素?！径ㄎ辉亍恐敖^對”會用黑色線框出來，所有具有position:absolute樣式的元素?！径ㄎ辉亍恐肮潭ā睍盟{色線框出來，所有具有position:static樣式的元素?！径ㄎ辉亍恐案印睍命S色線框出來，所有具有float樣式的元素?！厩宄喞慨?dāng)你的頁面已經(jīng)被各種顏色的線搞的像Excel表格一樣的時候，你可以可以使用這個命令來清除所有的線了?！緢D像

11、】菜單很明顯，這個命令就是控制頁面上各種圖片的?！窘脠D像】為了不侮辱你的智商，這個就不說了。唯一一點需要說明的是不僅僅是img元素，而且連元素的背景圖片都會被禁用哦。【顯示圖像尺寸】很不錯的功能?？梢圆挥貌榭磮D片屬性就快速的知道各個圖片的尺寸大小，當(dāng)然，單位是像素。【顯示圖像文件大小】很不錯的功能。可以不用查看圖片屬性就快速的知道各個圖片的文件大小，當(dāng)然，單位是字節(jié)?！撅@示圖像路徑】很不錯的功能?？梢圆挥貌榭磮D片屬性就快速的知道各個圖片的URL路徑，而且還可以復(fù)制?！撅@示Alt文本】可以顯示出img元素的alt屬性的文本。順便說一下：圖片的alt千萬不要進行關(guān)鍵字的堆砌，否則很容易被認定為S

12、EO過渡優(yōu)化?！静榭磮D像報告】生成一份詳細的改頁面的圖像報表。包含每個圖片的非常詳盡的信息?！揪彺妗坎藛蜪E8開發(fā)人員工具【緩存】菜單 管理緩存和Cookie的菜單組。對于開發(fā)人員來說這個將會是非常令人歡喜的功能?！臼冀K從服務(wù)器中刷新】好像很高深的命令一樣。其實換句話說就是：“禁止使用瀏覽器緩存”?！厩宄秊g覽器緩存】快捷鍵Ctrl+R。沒啥好說的，只是簡化了以前的操作步驟而已。不知道你注意到菜單中【清除瀏覽器緩存】后面有三個點沒有。這個表示，點擊此菜單后會確認對話框。【清除此域的瀏覽器緩存】快捷鍵Ctrl+D。沒啥好說的，只清除本域下的瀏覽器緩存?！窘肅ookie】沒有什么好處說。不讓吃餅干

13、了?！厩宄龝扖ookie】清除瀏覽器所有的Cookie。你的論壇呀，社區(qū)呀都等著重新登陸吧。【清除域的Cookie】只清除本域下的Cookie。【查看Cookie信息】查看此頁面包含的Cookie信息。想都別想，密碼你是得不到的?！竟ぞ摺坎藛伍_發(fā)人員工具附送的一些很有用的小工具，雖然相比其他專門的相關(guān)工具有點弱。但是應(yīng)急還是足夠的?！局匦抡{(diào)整大小】非常有用的小工具。可以快速的將瀏覽器窗口調(diào)整到相關(guān)的尺寸。這樣，測試網(wǎng)頁分辨率兼容性的時候就方便多了?！撅@示標尺】一個簡單的標尺工具。使用它可以度量長度、距離等信息。線的顏色是可以換的。也可以創(chuàng)建多個標尺。如果太細微的地方，可以使用放大鏡功能?！撅@

14、示顏色選取器】一個簡單的拾色工具。點擊鼠標就可以選中顏色。不過，我向你推薦另外一個工具我的工作工具箱抓色工具(ColorPic)，相比之下，開發(fā)人員工具中的這個就太簡單了?！掘炞C】菜單必將引起江湖腥風(fēng)血雨（謝謝小七同學(xué)提醒我這個突然忘記了的成語，唉可能最近看的武俠小說比較少的緣故吧。但是不知為何好像對“嬌喘連連”這類成語比較熟）的菜單。不久的將來必將產(chǎn)生無數(shù)的孔乙己。【HTML】驗證頁面的HTML代碼。會將本頁面發(fā)送到w3c的html驗證工具，并得到驗證報表。【CSS】驗證頁面的CSS代碼。會將本頁面發(fā)送到w3c的css驗證工具，并得到驗證報表?！驹础框炞C頁面的源文件代碼。會將本頁面發(fā)送到fe

15、驗證工具，并得到驗證報表?！炬溄印框炞C頁面的鏈接。會將本頁面發(fā)送到w3c的驗證工具，并得到驗證報表?！颈镜豀TML】打開w3c的html驗證工具，對本地的頁面進行驗證。【本地CSS】打開w3c的CSS驗證工具，對本地的頁面進行驗證?！据o助功能】之“WCAG清單”驗證頁面的WCAG(Web Content Accessibility Report-頁面的可訪問性)。會將本頁面發(fā)送到驗證工具，并得到驗證報表?！据o助功能】之“第508條清單”驗證頁面的508 Standards。會將本頁面發(fā)送到驗證工具，并得到驗證報表?！径鄠€驗證】同時驗證對頁面進行多個規(guī)范的驗證。IE

16、8開發(fā)人員工具的集合驗證對話框 對于頁面的驗證，我想說兩句：其實頁面是不是一樣要通過驗證才能上線呢？我個人感覺完全沒有必要。如果你是學(xué)生，躺在象牙塔里面。你可以隨便怎么折騰你的頁面，因為你就是客戶，你就是有時間，你就是追求完美。但是商業(yè)項目，完全沒有必要為了一個“PASS”而浪費寶貴的項目資源。因為沒有哪個客戶會在乎“你看，我們做的這個頁面是經(jīng)過w3c多方面驗證的?！比绻娴挠锌蛻粼诤趿?，那么我只能說，我很崇拜你的“忽悠”能力。在上一篇文章IE8“開發(fā)人員工具”使用詳解上(各級菜單詳解) 中，我們詳細地講解了IE8開發(fā)人員工具中各個菜單中命令的使用方法，相信很多朋友應(yīng)該已經(jīng)使用上了。而IE8開

17、發(fā)人員工具更強勁的功能例如：如何測試版本兼容性、如何利用開發(fā)人員工具調(diào)試JavaScript腳本，以及如何利用探查器檢測頁面腳本函數(shù)效率等，我們將在本篇文章中講解。小弟拙笨，此處僅為拋磚。 模式瀏覽器模式應(yīng)了無間道的那句話“出來混，遲早是要還的！”。IE6種下的苦果，現(xiàn)在果然到了要咽下的時候了。當(dāng)IE8發(fā)布的時候，他不得不面對著世界上成千上萬“只有在IE6中才能正常顯示”的頁面。不發(fā)布IE8了吧，F(xiàn)ireFox和Chrome又跟著后面搶蛋糕；不管那些“IE6 only”的頁面吧，那瀏覽器出來還不被人罵死；讓所有的站長都把頁面重構(gòu)吧，想想自己都要笑。唉，這可咋整呀。唉，有了，咱采取一個手段，讓用

18、戶自己去處理，如果他碰到了“IE6 only”頁面，就讓他自己手動處理一下，讓瀏覽器還用老的渲染模式渲染頁面，這雖然麻煩了一點用戶，但是也不失是個辦法。于是“瀏覽器模式”出來了。說白了，就是讓用戶選擇當(dāng)前頁面用何種IE版本去渲染。舉個例子吧，順便練習(xí)一下IE的有條件注釋詳解，核心代碼如下瀏覽器是IE7瀏覽器是IE8讓我們來試試這個頁面，在不同的瀏覽器模式下的顯示效果吧IE8開發(fā)人員工具之瀏覽器模式對于普通用戶，微軟官方推薦的是這個玩意兼容性視圖按鈕。當(dāng)然，對前端開發(fā)人員來說，這個工具主要用來測試頁面多瀏覽器兼容性而已。但是非常遺憾的是：沒有IE6模式。沒有IE6的世界，雖然是一個美好的愿望，但

19、是可惜的是：我們生活在現(xiàn)實之中，或許說生活在地獄中更確切。所以，我還是不得不提下面的兩個工具IE多版本共存的解決方案IETester微軟網(wǎng)頁開發(fā)調(diào)試利器SuperPreview（附下載） 文本模式說起“文本模式”這個名詞，這又要回到渲染頁面的3種模式了：詭異模式（Quirks mode，也有翻譯為兼容模式、怪異模式的），標準模式（Standards mode），和幾乎標準模式（Almost standards mode）。這是一個非常重要、但是很多人卻比較模糊的概念。一兩句話不太能說清楚，這樣說吧“頁面的不同渲染模式，將直接影響頁面的最終呈現(xiàn)效果”，也就是說，一個頁面如果在這種模式下顯示完美，

20、但是在另外一種模式下可能就顯示的一塌糊涂。而決定頁面模式的是頁面的!DOCTYPE屬性。乖乖，這玩意太繞人了，還是直接上例子吧。最經(jīng)典的就是對盒裝模型的解釋差異了。下面兩個圖，是相同頁面，采用不同頁面渲染模式的最終顯示效果。頁面很簡單，只要一個div元素，然后隨便設(shè)置一點高度、寬度、padding、margin就可以了。核心代碼如下#divTest background-color:red; padding:10px; margin:10px; width:100px; height:100px;瀏覽器是IE7瀏覽器是IE8IE8開發(fā)人員工具之文本模式從圖片中，我們可以清楚的看到，紅色div塊

21、的大小和位置，在不同的文本模式下，發(fā)生了明顯的變化。關(guān)于文本模式的詳細資料，我建議你看這篇文章Quirks mode、Almost standards mode、Standards mode。雖然是英文原版的資料，也絕對值得翻著字典看完。還有這篇視頻教程中，我也有較為詳細的介紹到，“阿一web標準學(xué)堂”第4課調(diào)試JavaScript腳本重頭戲來了。很多朋友夢寐以求的功能呀JavaScript腳本調(diào)試。一直擺脫不掉FireFox，就是因為Firebug實在太好用。雖然利用VS這樣航母級的軟件也能進行JavaScript腳本的調(diào)試。但是，很多前臺開發(fā)人員并不會為了一個JavaScript調(diào)試功能而

22、去安裝那種大家伙。所以對JavaScript的調(diào)試，IE的用戶一直耿耿于懷。但是，現(xiàn)在終于可以平息了。因為IE8開發(fā)人員工具終于也有了小巧，卻功能強大的JavaScript調(diào)試功能。不多說，直接上例子，這里就舉一個簡單到弱智的例子吧。核心代碼如下：Button 1: function test() 2: test2(); 3: 4: function test2() 5: var _obj=document.getElementById(divTest); 6: var str=_obj.id; 7: alert(str); 8: 還是讓我們先看看腳本調(diào)試界面吧利用IE8開發(fā)人員工具調(diào)試Jav

23、aScript腳本圖上的說明已經(jīng)很清楚了，下面就詳細講一下“控制臺”、“斷點”、“局部變量”、“監(jiān)視”、“調(diào)用堆?！边@些視圖吧?？刂婆_在控制臺會顯示腳本調(diào)試中的一些信息，例如錯誤信息、警告信息一類的。恩，其實也可以當(dāng)成是一個微型JavaScript運行環(huán)境。你可以在這里直接鍵入腳本并運行。如果一行不夠的話，可以切換到多行模式。輸入完畢后，點擊“運行腳本”，就可以看到運行結(jié)果了。斷點是一個顯示你設(shè)定的所有斷點的列表。方便你統(tǒng)一管理：統(tǒng)一刪除、統(tǒng)一使用或者統(tǒng)一禁用。局部變量我非常喜歡的視圖之一。可以詳細的顯示各個變量的所有方法、事件和屬性。我最喜歡干的事情，就是一個個的看下去，看到不知道的就去查資料，絕對是個學(xué)習(xí)JavaScript的好方法。例如，下面途中這就發(fā)現(xiàn)了一些IE8特有的方法。監(jiān)視我非常喜歡的視圖之一?？梢燥@示任意你需要的變量的方法、事件和屬性?？梢蕴砑佣鄠€。整體來說和局部變量視圖差不多，只是可以更靈活的顯示你需要的而已。調(diào)用堆?？梢灾庇^地顯示函數(shù)調(diào)用堆棧情況，以及現(xiàn)在執(zhí)行到哪個函數(shù)的情況。對于理順腳本的運行順序和嵌套很有幫助。探查器“探查器”這玩意一開始還真的讓我摸不到頭腦，還以為