現在網上關于IE10的開發人員工具并沒有詳細的中文資料，所以許多開發人員對IE10提供的開發人員工具知之甚少。但是IE10的開發人員工具功能強大，非常值得廣大開發人員，甚至IE10的普通使用者學習使用。因此，本文將盡力介紹IE10的開發人員工具、其使用方法及其優缺點。
IE10開發人員工具是一個輕量級的開發調試工具，其菜單項包括：文件、查找、禁用、查看、圖像、緩存、驗證、瀏覽器模式、文檔模式。另外，IE10開發人員工具的視圖（標簽）包括：HTML、CSS、控制臺、腳本、探查器、網絡。
與IE9的開發人員工具相比，IE10的開發人員工具在以下方面有改進：在源文件中的改動可以直接體現在頁面上而不需要刷新并且在控制臺內可以通過上下鍵來調出最近使用命令。

IE10開發人員工具的界面包括八個部分：菜單欄、視圖（標簽）、視圖工具欄、詳細視圖 、文件選擇器、詳細面板、主面板、搜索框，如下圖所示。

圖1

本文著重介紹IE10開發人員工具的菜單欄和視圖（標簽）的內容和使用方法。

菜單欄包括文件，查找，禁用，查看，圖像，緩存，工具，驗證，瀏覽器模式，文檔模式等10個菜單項。在菜單欄中有些子菜單需要在IE10的非保護模式下激活。激活子菜單欄的具體操作如下：打開工具中的Internet選項，選擇安全選項卡，取消啟用保護模式并且重啟IE10。以下為10個菜單項的使用方法介紹。

1.文件：文件菜單包括撤銷、自定義查看源、聯機幫助、退出功能四項。

命令名稱

描述

撤銷

重置所有修改并刷新頁面。

自定義查看源

選擇查看源的工具，有默認的內建查看器、記事本及其他程序可選。

在線幫助F1

顯示在線幫助。

退出F12

退出F12工具。

表1

2.查找：查找菜單只有單擊選擇元素1項。

命令名稱	描述
單擊選擇元素	當你單擊某元素進行選擇。頁面上的被選擇元素周圍將顯示一個邊框，開發人員工具的左邊面板焦點將會轉至HTML選項卡中的元素所在并高亮顯示，而右邊面板顯示所選擇元素的細節信息，包括樣式、跟蹤樣式、布局、屬性。

表2

3.禁用：禁用菜單包括腳本、彈出窗口阻止程序、CSS3項。該工具幫助開發人員測試用戶在不同瀏覽器配置情況下的體驗。以下命令單擊一次禁用功能、再次單擊開啟功能。

命令名稱	描述
腳本	禁用頁面上所有腳本，但只能在保護模式關閉時使用。每當該選項更改時，頁面將會重新加載來反映變化。
彈出窗口阻止程序	禁用所有彈出窗口程序使彈出窗口可用。當Internet安全選項中的保護模式開啟時，這個設置不可用。
CSS	禁用所有應用在頁面上的CSS。每當該選項更改時，頁面將會重新加載來反映現在的新設置。另外，每當頁面刷新時，CSS將自動啟用。

表3

4.查看：查看菜單包括類和ID信息、鏈接路徑、鏈接報告、選項卡索引、訪問鍵、查看源（帶有樣式的元素元源等）6項。查看菜單可以在頁面上顯示元素的類和id信息等。

命令名稱	描述
類和ID信息	在頁面上顯示所有HTML元素的class和id值。
鏈接 路徑	在頁面上顯示所有鏈接路徑。
鏈接 報告	生成該頁面上所有鏈接的一個列表，并在新選項卡或窗口中顯示。
選項卡索引	顯示頁面上選項卡索引已定義的元素的選項卡索引。
訪問鍵	顯示頁面上訪問鍵已定義的元素的訪問鍵。
源	帶有樣式的元素源，DOM（元素）、DOM（頁）、原始狀態。源的子選項卡提供文檔的不同源視圖。當選擇某項時（前兩個子選項卡需要先選擇一個HTML元素），元素的源或頁面源將在新窗口顯示。

表4

查看菜單中的源包含4個子菜單項，如表5所示。

命令名稱	描述
帶有樣式 的元素源	在新窗口中顯示選擇的元素的HTML源，內容以及CSS樣式規則。
DOM（元素）	在新窗口中顯示選擇的元素的HTML源及其內容。
DOM（頁）	在新窗口中顯示整個HTML源，顯示頁面的DOM結構，包括用腳本寫的動態DOM的HTML源。
原始狀態	在新窗口中顯示原始HTML源，這其實就是和在IE里查看源一樣。用腳本寫的DOM動態內容將不予顯示。

表5

5.圖像：圖像菜單包括禁用圖像、顯示圖像分辨率、顯示圖像文件大小、顯示圖像路徑、查看Alt文本、查看圖像報告6項。圖像菜單提供頁面上的圖像信息。

命令名稱	描述
禁用圖像	該命令會刷新頁面并禁止顯示頁面上所有圖像，同時禁止顯示圖像文件大小命令。只有當保護模式關閉時，禁用圖像命令有效。
顯示圖像分辨率	在頁面上顯示所有圖像的分辨率。
顯示圖像文件大小	在頁面上以字節為單位顯示圖像文件大小。禁用圖像命令會同時禁用顯示圖像文件大小命令。
顯示圖 像路徑	顯示頁面上所有圖片的絕對路徑。
查看Alt 文本	顯示所有alt屬性已定義的圖像的alt文本。
查看圖 像報告	生成一個所有頁面圖像的列表，并在新選項卡或窗口中顯示。

表6

6.緩存：緩存菜單包括始終從服務器中刷新、清除瀏覽器緩存、清除此域的瀏覽器緩存、禁用cookie、清除會話cookie、清除域的cookie、查看cookie信息7項。這些命令幫助開發人員確保頁面是從服務器上下載而不是從本地緩存讀取。

命令名稱	描述
始終從服 務器刷新	該命令只有在保護模式關閉時才可更改。
清除瀏覽 器緩存	刪除瀏覽器緩存和臨時文件。
清除此域的 瀏覽器緩存	僅刪除瀏覽器緩存和屬于該域的臨時文件。
禁用cookie	該命令與始終從服務器刷新命令一樣，只在保護模式關閉時才可更改。
清除會話cookie	刪除所有此次瀏覽器會話的cookie。
清除域的cookie	刪除屬于該域的cookie。
查看cookie 信息	生成一個所有存儲在IE10中的cookie信息列表并在新選項卡或窗口顯示。

表7

7.工具：工具菜單包括重新調整大小、更改用戶代理字符串、導航時清除項，顯示標尺、顯示顏色選取器、輪廓元素6項，如下表所示。

命令 名稱	描述
重新調整大小	提供一系列預定義的屏幕尺寸的子菜單以及一個自定義選項。當你選擇預定義的屏幕尺寸時，IE窗口會立即調整至所選大小。
更改用戶代理字符串	幫助開發人員通過改變用戶代理字符串來改變IE對站點的顯示方式。子菜單顯示PC和Windows Phone上的IE版本以及其他瀏覽器。自定義設置幫助開發人員增加并設置自己的UA字符串。默認設置返回瀏覽器當前的默認設置。
導航時 清除項	幫助開發人員在調試會話中導航至新頁面時保持或清除控制臺信息以及網絡日志。默認情況下，離開頁面時IE清除所有控制臺信息以及網絡數據捕獲日志。
顯示 標尺	幫助開發人員在屏幕上測量對象。該命令將打開一個帶有選項和提示的標尺窗口。標尺畫好后將顯示x-y坐標系。標尺長度以像素為單位在標尺中心顯示。標尺可以移動、重置大小或重置角度。標尺窗口關閉時將隱藏所有標尺，直到窗口再次打開。
顯示顏色選取器	顏色拾取器可以對頁面上的元素進行顏色的取樣。顏色拾取窗口顯示取樣顏色的樣本、顏色的RGB值和HEX值。
輪廓 元素	通過使開發人員簡單地識別元素的大小和位置來幫助開發人員理解和調試頁面布局。開發人員可以設置一個顏色來識別所有特定元素類型的元素。識別網頁上的元素必須用CSS的選擇器語法。比如，為了高亮所有圖像，在選擇器一欄填寫p并選擇一個顏色。在關閉對話窗后，元素就被凸顯出來了。

表8

8.驗證：驗證菜單包括HTML、CSS、源、鏈接、本地HTML、本地CSS、輔助功能、多個驗證8項。該工具通過基于網絡的驗證服務來驗證當前網頁或文件。

命令名稱	描述
HTML	驗證當前頁面的HTML。
CSS	驗證當前頁面的CSS
源	驗證RSS的源。
鏈接	驗證當前頁面的鏈接。
本地HTML	打開新窗口或選項卡并輸入URL、選擇一個本地HTML文件或復制代碼來驗證。
本地CSS	打開新窗口或選項卡并輸入URL、選擇一個本地CSS文件或復制代碼來驗證。
輔助 功能	利用子菜單中的WCAG Checklist或Section 508 Checklist輔助驗證服務來驗證當前頁面。
多個 驗證	開發人員可以在一次請求中進行多個驗證檢查。點擊該功能并選擇彈出的對話框中需要驗證的項目，且每個項目都會在一個新的選項卡或窗口中顯示。

表9

9.瀏覽器模式：瀏覽器模式包括IE10、IE10兼容、IE9、IE8、IE75種模式供選擇。幫助開發人員測試頁面在不同IE版本下的表現。
10.文檔模式：文檔模式包括標準、Quirks、IE9、IE8、IE7、IE5Quirks6供模式供選擇。該工具幫助開發人員在不修改源文件中的DOCTYPE和META標簽即可修改當前頁面的文檔模式。

命令名稱	描述
標準	這是IE10提供的最為標準兼容的行為模式。
Quirks	該行為模式提供了增強的HTML5支持。
IE9	IE9兼容模式。
IE8	IE8兼容模式。
IE7	IE7兼容模式。
IE5Quirks	該行為模式是IE解釋無文檔類型文檔或Quirks文檔時的行為模式。它類似于IE5的行為模式、IE6和IE7的Quirks行為模式。

表10

現在我們來看一下幾個視圖（標簽）的功能和使用方法。
1.HTML：HTML標簽幫助開發人員查看文檔源并進行修改來測試影響。

命令名稱	描述
工具欄	提供了HTML標簽可用的命令。
詳細視圖	顯示HTML視圖中選擇的元素的詳細信息。

表11

工具欄提供了HTML標簽可用的命令，共包括7個子項。如下表所示。

命令名稱	描述
單擊選 擇元素	幫助開發人員快速尋找當前頁面上元素的源。點擊該按鈕并選擇頁面上的元素，該元素會在頁面上凸顯出來且元素的源圍在左邊面板高亮顯示。詳細視圖則顯示被選元素的樣式、追蹤樣式、布局和屬性。
清除瀏覽器緩存	清除瀏覽器緩存按鈕會清除瀏覽器緩存，使下次刷新時從服務器得到新的頁面。
保存HTML	打開另存為窗口來保存HTML視圖中的源。文件會以.txt的文件形式保存來防止覆蓋原先的源文件。
刷新	在HTML視圖中刷新內容。當編輯模式開啟時，刷新按鈕無效。
帶有樣式的元素源	打開新窗口，以網狀元素結構來顯示所選元素的HTML源和CSS樣式。在使用該命令前要先選擇一個頁面上的元素。
編輯	點擊編輯按鈕后，將在HTML視圖中編輯當前HTML源文件。當再次點擊編輯按鈕后，頁面將刷新來顯示修改。
自動換行	自動換行功能只有在編輯命令開啟時有效。

表12

詳細視圖顯示HTML視圖中選擇的元素的詳細信息。

命令名稱	描述
樣式	顯示CSS規則、屬性和值是如何應用到所選元素上的。可以對規則最左一列的復選框進行勾選或清除來查看CSS規則如何影響頁面元素的顯示。
跟蹤樣式	跟蹤樣式視圖顯示的信息與樣式視圖相同，但是它是以屬性而不是元素進行分組。
布局	布局視圖顯示了元素框模型屬性。該視圖顯示了元素與周圍元素的一個關系。
屬性	屬性視圖顯示所有當前所選元素的屬性和值。

表13

2.CSS：CSS標簽包含四項功能如下表所示。

命令名稱	描述
單擊選 擇元素	同前述。
清除瀏覽器緩存	同前述。
保存CSS	打開另存為窗口來保存CSS視圖中的源。文件會以.txt的文件形式保存來防止覆蓋原先的源文件。
查看樣式	打開下拉列表顯示所有與當前頁面相關聯的外部樣式文件。

表14

3.控制臺：控制臺視圖使開發人員可以接受來自IE10的錯誤信息，也可以發送回信息而不需要中斷執行過程。

命令名稱	描述
單擊選擇元素	同前述。
清除瀏覽器緩存	同前述。

表15

4.腳本：腳本標簽幫助開發人員查看頁面上的Javascript源。單擊查看源下拉按鈕選擇其他腳本文件。腳本視圖顯示行數和語法著色，并可在其中設置斷點。

命令名稱	描述
腳本工具欄	提供10項腳本命令。
腳本詳細面板	腳本視圖的詳細面板顯示關于代碼的信息。

表16

腳本工具欄的具體命令如下表所示。

命令名稱

描述

單擊選擇元素

同前述。

清除瀏覽器緩存

同前述。

繼續

繼續執行腳本直到另一個斷點或錯誤出現。

全部中斷

在下一個腳本陳述執行前立即暫停執行。

逐語句

執行下一條腳本并暫停，即使下一條語句在一個新函數內。

逐過程

繼續執行直到函數的下一條腳本并暫停。

跳出

繼續執行腳本直到調用函數的下一行。

配置

顯示一個關于配置的下拉列表，包括在未處理的異常處中斷、在所有異常處中斷、異常后繼續、自動換行、格式化Javascript。

啟動調試

單擊啟動調試按鈕開始調試。再次單擊結束調試。在開始調試后，調試控制可用而在調試結束后不可用。

查看源

單擊后在腳本查看視圖中顯示與當前頁面相關聯的外部腳本文件列表。

表17

腳本視圖的詳細面板顯示關于代碼的信息。

命令名稱	描述
控制臺	控制臺接受來自IE10的錯誤消息。使用控制臺API，開發人員的代碼可以向控制臺發送消息而不需要中斷執行過程。控制臺命令行可以在執行代碼的外部執行單個或多行腳本陳述。陳述將立即執行并且結果會在控制臺面板顯示。
監視	監視變量。添加局部變量或全局變量的做法如下：在右邊面板單擊”單擊以添加“來添加需要監視的變量類型或對象名類型或在左邊面板右擊變量或對象并選擇添加監視。該命令需要在調試開始并且停止在斷點上時啟用。
局部變量	當調試正在運行并且執行停在一個斷點上時，開發人員可以查看當前函數范圍內的局部變量。如果想跳進另一函數，局部變量視圖會刷新以顯示新的當前函數內的局部變量。
調用堆棧	追蹤執行代碼的函數調用過程。當前函數在棧頂端而調用它的函數其下。開發人員可以雙擊函數來查看其在源中的定義。該命令需要調試開始并且執行在斷點中斷。
斷點點	設置斷點可以在腳本運行過程中在指定位置中斷運行來檢查代碼。在腳本視圖面板中，開發人員設置斷點的方法如下：右擊一行代碼并選擇插入斷點、單擊行數或在一行設置光標并按下F9。斷點可以再任何時候設置。當斷點設置好后，該行代碼將會高亮顯示并且一個紅色圓形圖標行數邊上。開發人員也可以設置一個帶條件的斷點使得當條件為真時，執行中斷。設置帶條件的中斷可以在左邊或右邊的面板中右擊斷點的紅色圖標并選擇條件。在中斷面板中，開發人員可以查看一個包含所有與調試頁面相關中斷的列表。雙擊一個斷點可以跳到該斷點在代碼中的位置。

5.探查器：IE10開發人員工具提供一個內建的探查器幫助開發人員采樣在IE10中運行的Javascript代碼。當前視圖控制采樣的信息如何顯示，右擊可視區域，選擇添加/刪除列然后單擊希望報告的列名。

命令名稱稱	描述
單擊選擇元素	同前述。
清除瀏覽器緩存	同前述。
導出數據	將當前報告的采樣數據導出到一個CSV文件。在彈出的另存為對話框中鍵入文件名。單擊選擇保存來導出采樣數據。
開始采樣	單擊該按鈕開始采樣信息。當探查器開始，單擊網頁上你想采樣的活動。這些腳本活動將會被采集并在報告中顯示。單擊停止采樣按鈕來停止采樣并查看報告。會話被記錄到報告中并顯示。
當前視圖	可以設置采樣報告的當前視圖，包括函數和調用樹兩種視圖。函數視圖列出所有在采樣會話中運行的函數，而調用樹視圖顯示一個調用的層次結構。在兩種視圖中，采樣數據都在不同列中顯示。右擊面板可以選擇添加/刪除列來選擇要查看的數據。
當前報告	每個記錄的采樣會話會生成一個報告。單擊下拉列表中的不同報告來切換。單擊導出數據來導出數據至一個CSV格式的文件。
關閉報告	關閉當前報告，則當前報告將從報告列表移除并顯示下一報告。

表19

6.網絡：網絡標簽通過顯示所有與當前網頁相關的網絡數據來幫助開發人員診斷與網絡相關的問題。開發人員可以查看網頁上元素加載和解釋需要的相關時間花銷，使得問題的發現和解決變得更加便捷。

命令名稱	描述
單擊選擇元素	同前述。
清除瀏覽器緩存	同前述。
導出捕獲的流量	該按鈕幫助開發人員保存捕獲的網絡數據并記錄到一個XML或CSV文件以供進一步研究。
開始/結 束捕獲	單擊該按鈕來記錄網絡數據。再次單擊停止記錄并查看生成的報告。
轉到詳 細視圖	詳細視圖顯示所有記錄的網絡活動。單擊按鈕改變至詳細視圖來查看單個URL信息。在詳細視圖中，單擊上一步或下一步來查看每一個URL信息。
清除	單擊按鈕清除所有報告記錄的數據。

表20

通過IE10的F12開發人員工具查看頁面時，其視圖是IE10文檔對象模型解釋頁面的實際方式，并不是原始的源代碼。例如，如果使用腳本生成網頁，則查看源無法顯示實際顯示給用戶的內容。如果使用原始的源代碼，則可能需要花一些時間才能發現HTML或層疊樣式表CSS呈現Bug，但如果使用F12開發人員工具，則將會看到IE10在 DOM 中解釋的實際代碼。

總體來說，IE10的開發人員工具功能強大，可以幫助開發人員對網頁進行各類測試，但是其仍存在一些不足，包括不支持改變布局，不支持元素刪除、不支持Javascript對象瀏覽、不支持錯誤調用棧的查看。如果IE10開發人員工具可以再上述四點進行改進，IE10開發人員工具將更加完美。

總結

以上是生活随笔為你收集整理的IE10 开发人员工具详解(转)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。