F12 開發(fā)人員工具的菜單和按鈕提供了可幫助你在該工具套件中導航的頁面和可視化工具。在這些工具中，你可以創(chuàng)建包含文檔中所有鏈接的報告列表、更改文檔模式或以可視方式繪制頁面上的特定元素的輪廓。
網(wǎng)頁工具
主菜單下有許多工具和選項。F12 工具套件中的許多工具對網(wǎng)頁或瀏覽器自身進行操作，或提供方法來獲取各種代碼視圖的選項和功能。下表概述了這些工具提供的菜單和選項。
“文件”菜單
| 菜單項 | 描述 |
|---|---|
| 全部撤消 | 重置對 Windows Internet Explorer 的當前實例的所有更改（如屬性值）并刷新網(wǎng)頁。 |
| 自定義 Internet Explorer 查看源文件 | 為你提供一個菜單，該菜單具有用于設置“查看源文件”查看器的以下選項：
|
| 聯(lián)機幫助 (F1) | 提供到該文檔的鏈接。 |
| 退出 (F12) | 關閉 F12 工具。 |
“查找”菜單
“查找”菜單只有“單擊選擇元素”這一個菜單項。你可以從菜單項啟用該功能，方法是單擊“單擊選擇元素”按鈕
“禁用”菜單
此菜單可幫助你測試當用戶禁用其瀏覽器中的特定功能時，會在你的網(wǎng)站上獲得怎樣的用戶體驗。通過使用此菜單，你可以打開或關閉這些功能。
| 菜單項 | 描述 |
|---|---|
| 腳本 | 禁用網(wǎng)頁上的所有腳本。選定后，會設置該命令并且頁面會刷新。如果“Internet 安全性”的“保護模式”設置為“啟用”，則此命令不可用。若要使用此命令，請在“Internet 選項”中的“安全”選項卡上，清除“啟用保護模式”。 |
| 彈出窗口阻止程序 | 禁用所有彈出窗口阻止程序以便在該網(wǎng)站上允許彈出窗口。 |
| CSS | 在網(wǎng)頁上禁用所有級聯(lián)樣式表 (CSS)。選定后，會設置該命令并且頁面會刷新為關閉 CSS。如果刷新網(wǎng)頁，或者開始調試刷新網(wǎng)頁的腳本，將重新啟用 CSS。 |
“查看”菜單
此菜單使你不用首先在 HTML 樹或源文件中找到元素，就可以查看頁面上元素的相關信息。
| 菜單項 | 描述 |
|---|---|
| 類和 ID 信息 (Ctrl+I) | 顯示網(wǎng)頁上所有 HTML 元素的 ID 值。在相應的元素中，信息會作為覆蓋顯示在網(wǎng)頁上。雙擊覆蓋可突出顯示信息。按 Ctrl+C 即可復制。 |
| 鏈接路徑 | 顯示網(wǎng)頁上所有鏈接的鏈接路徑。此信息會作為文本覆蓋顯示在網(wǎng)頁元素上。雙擊覆蓋可突出顯示信息。按 Ctrl+C 即可復制。 |
| 鏈接報告 | 生成位于該網(wǎng)頁上的所有鏈接的列表并在新的 Internet Explorer 實例中報告此列表。這樣，無需瀏覽整個 HTML 源文件，就可以輕松方便地檢查所有鏈接。 |
| 選項卡索引 | 對于定義其 tabindex 屬性的元素，將選項卡索引顯示為網(wǎng)頁上覆蓋的數(shù)量。 |
| 訪問鍵 | 對于網(wǎng)頁上定義其 accesskey 屬性的元素，將訪問鍵顯示為覆蓋。 |
| 源 | 查看菜單的子菜單，描述顯示在下表中。 |
| 源子菜單項 | 描述 |
|---|---|
| 帶有樣式的元素源 | 僅在新窗口中顯示選定元素的 HTML 源及其內容，以及適用于它的 CSS。這有助于只關注選定元素的源文件。必須首先使用“HTML”選項卡視圖選擇 HTML 樹的主體內的某個 HTML 元素，然后才可以執(zhí)行此命令。若要選擇某個元素，可使用“單擊選擇元素”命令，或在 HTML 樹中單擊某個元素。 |
| DOM（元素） | 在新窗口中只顯示所選元素的 HTML 元素及其內容。必須首先使用“HTML”選項卡視圖選擇 HTML 元素，然后才可以執(zhí)行此命令。若要選擇某個元素，請使用“單擊選擇元素”命令。 |
| DOM（頁面） | 在新窗口中顯示全部 HTML 源，從而顯示嵌套的元素。此源文件顯示頁面的文檔對象模型 (DOM) 結構，包括使用由 Internet Explorer 表示的腳本動態(tài)寫入 DOM 中的源文件。 |
| 原始 | 在新窗口中顯示原始 HTML 源。 |
“圖像”菜單
此菜單提供的命令通過幫助你識別元素的大小和位置，可幫助你了解和調試頁面布局。它還能幫助你通過基于元素類型的彩色編碼直觀地標識特定類型的所有元素。
| 菜單項 | 描述 |
|---|---|
| 禁用圖像 | 關閉網(wǎng)頁上所有圖像的呈現(xiàn)。此命令會使網(wǎng)頁刷新但不顯示任何圖像，并且還會禁用“顯示圖像文件大小”命令。 |
| 顯示圖像尺寸 | 對于網(wǎng)頁上的所有圖像，將圖像尺寸顯示為文本覆蓋。 |
| 顯示圖像文件大小 | 對于網(wǎng)頁上的所有圖像，將圖像文件大小顯示為文本覆蓋。文件大小以字節(jié)為報告單位。如果使用“禁用圖像”命令，則禁用該命令。 |
| 顯示圖像路徑 | 對于網(wǎng)頁上的所有圖像，將圖像絕對路徑顯示為覆蓋。 |
| 查看 Alt 文本 | 顯示定義其 alt 特性的所有圖像的替代文本。對于未定義 alt 特性的圖像，則不會顯示覆蓋。 |
| 查看圖像報告 | 在當前網(wǎng)頁上生成正文代碼中定義的所有圖像列表，并在新的 Internet Explorer 選項卡中顯示此列表。此列表不包括使用 CSS 加載的圖像（如 "background-image:url()"）。 |
“緩存”菜單
| 菜單項 | 描述 |
|---|---|
| 始終從服務器中刷新 | 強制 Internet Explorer 始終從服務器獲取網(wǎng)頁內容而不是使用緩存的內容。此命令會持續(xù)有效，直到你將其清除或 Internet Explorer 實例關閉。 |
| 清除瀏覽器緩存... (Ctrl+R) | 刪除瀏覽器緩存以及所有臨時文件。 |
| 清除此域的瀏覽器緩存... (Ctrl+B) | 只刪除屬于當前域的瀏覽器緩存和所有臨時文件 |
| 禁用 Cookie | 禁止從此 Internet Explorer 實例使用所有 Cookie。此命令會持續(xù)有效，直到你將其清除或 Internet Explorer 實例關閉。 |
| 清除會話 Cookie | 刪除此瀏覽器會話期間獲取的所有 Cookie。 |
| 清除域的 Cookie | 刪除當前域中的所有 Cookie。 |
| 查看 Cookie 信息 | 生成 Internet Explorer 中存儲的所有 Cookie 列表并在新的 Internet Explorer 實例中報告此列表。請參閱有關如何使用 Cookie 的 cookie property 參考。 |
“工具”菜單
此菜單提供了各種能幫助你完成常見任務的工具，如使用不同的分辨率測試網(wǎng)站、更改用戶代理 (User-Agent) 頭信息、測量頁面面積和捕獲頁面上某一點的具體顏色。
| 菜單項 | 描述 |
|---|---|
| 調整大小 | 提供一個子菜單（其中提供了某些預先定義的屏幕大?。┖鸵粋€用于自定義屏幕大小的選項。選定某個預定義屏幕大小后，Internet Explorer 窗口將會立即重新調整為選定的尺寸。該子菜單提供四個預設大?。ň哂锌旖萱I）和一個自定義設置。 800x600Ctrl+Shift+1 1024x768Ctrl+Shift+2 1280x768Ctrl+Shift+3 1280x1024Ctrl+Shift+4 自定義（無快捷鍵） 自定義設置會打開一個對話框，你可以在其中輸入自己要測試的屏幕大小。自定義條目在你關閉瀏覽器后仍然存在，以便你可以在以后的測試會話中再次使用它們。  |
| 更改用戶代理 (User-Agent) 頭信息 | 讓你可以更改在請求網(wǎng)頁時發(fā)送到網(wǎng)站的用戶代理 (User-Agent) 頭信息。有一組預設的用戶代理 (User-Agent) 頭信息和一個自定義選項。自定義選項會顯示一個對話框，可在其中輸入自己的字符串。保存自定義項后，它們會出現(xiàn)在“更改用戶代理 (User-Agent) 頭信息”子菜單中。刷新網(wǎng)頁可使更改顯示出來。請注意，更改文檔模式會覆蓋自定義的用戶代理設置。  |
| 導航時清除項 | 當你在調試會話中導航到新網(wǎng)頁時，使你可以清除或保持“控制臺”消息和“網(wǎng)絡”選項卡日志。默認情況下，當你離開某個頁面時，Internet Explorer 會清除所有控制臺消息和網(wǎng)絡選項卡捕獲日志。 |
| 顯示標尺 (Ctrl+L) | 允許你測量屏幕上的任意對象?！皹顺摺睂υ捒虼蜷_時會顯示選項和工具的使用提示。支持多種顏色和多個標尺。為了精確性，還提供了一個放大鏡。按 CTRL+M 可打開或關閉放大鏡。標尺相對于屏幕上點的位置顯示標尺每一端的坐標 ("x，y")，而長度以像素為單位顯示在標尺的中間。當你將光標移到標尺上時，測量值還會顯示在“標尺”對話框的底部?？梢詫顺哌M行移動、調整大小和調整角度。若要刪除某個標尺，請選擇它并按 Delete 鍵。完成后，單擊右上角的 X 按鈕可關閉該對話框。關閉該對話框將隱藏所有標尺。打開“標尺”對話框可以顯示它們。 |
| 顯示顏色選取器 (Ctrl+K) | 顯示顏色選取器工具，以從頁面上的任何對象采集顏色樣本?！邦伾x取器”對話框顯示選取器所在的顏色樣本。顏色選取器還會顯示顏色的 RGB 和 HEX 值。若要查看網(wǎng)頁上使用的顏色值，請使用取色器光標單擊感興趣的顏色。單擊“復制并關閉”可將該值得到剪貼板，以在你的網(wǎng)頁中使用。單擊 X 按鈕或此菜單上的“隱藏顏色選取器”可關閉對話框。  |
| 輪廓元素 | 通過使標識元素的大小和位置變得更加輕松，幫助你了解和調試頁面布局。你可以設置一種顏色來標識特定元素類型的所有元素。 可使用 CSS 選擇器語法在網(wǎng)頁上指定元素。例如，要突出顯示所有段落，請在選擇器字段中使用 p，然后設置一種顏色。有關使用選擇器的詳細信息，請參閱了解 CSS 選擇器。  |
“驗證”菜單
此菜單使你可以使用 Web 上的驗證服務驗證當前網(wǎng)頁或計算機上的文件。有一個對話框確認你要采取此操作；否則，請求將取消。
| 菜單項 | 描述 |
|---|---|
| HTML | 驗證當前網(wǎng)頁的 HTML。驗證的報告將顯示在新窗口中。 |
| CSS | 驗證當前網(wǎng)頁的 CSS。驗證的報告將顯示在新窗口中。 |
| 源 | 驗證網(wǎng)頁的真正簡單的整合 (RSS) 源。驗證的報告將顯示在新窗口中。 |
| 鏈接 | 驗證當前網(wǎng)頁中的所有鏈接。驗證的報告將顯示在新窗口中。 |
| 本地 HTML... | 打開一個新窗口，該窗口有一個在計算機上選擇要驗證的 HTML 文件的選項。 |
| 本地 CSS... | 打開一個新窗口，該窗口有一個在本地計算機上選擇要驗證的 CSS 文件的選項。 |
| 輔助功能 | 允許訪問以下輔助功能驗證程序： WCAG 清單W3C 的 Web 內容輔助功能指南 (WCAG)。它為創(chuàng)建可訪問網(wǎng)頁定義了指南。 第 508 條清單美國政府關于創(chuàng)建可訪問網(wǎng)頁的輔助功能指南。 |
| 多個驗證 | 你可以在一個請求中運行一個或多個驗證。選擇所需的驗證，然后單擊“確定”啟動請求。你將只看到一個對話框，確認你要將此頁面發(fā)送到另一個網(wǎng)站進行驗證。每個選擇都會在一個新選項卡中打開并包含產(chǎn)生的驗證結果。 |
“瀏覽器模式”菜單
此命令使你能測試網(wǎng)頁在面向運行其他版本 Internet Explorer 的用戶時會如何操作。例如，如果你選擇 Windows Internet Explorer 7 瀏覽器模式，則你的網(wǎng)頁將基于該瀏覽器呈現(xiàn)，并且將無法訪問只在新版本的 Internet Explorer 中提供的文檔模式。
| 菜單項 | 描述 |
|---|---|
| Internet Explorer 7 | Internet Explorer 7 瀏覽器模式。 |
| Windows Internet Explorer 8 | Internet Explorer 8 瀏覽器模式。 |
| Windows Internet Explorer 9 | Internet Explorer 9 瀏覽器模式。這會啟用 HTML5、CSS3 和 Internet Explorer 9 支持的其他標準。 |
| Internet Explorer 9 兼容性視圖 | 測試當用戶選擇“兼容性視圖”選項時 Internet Explorer 9 用戶如何體驗你的網(wǎng)頁。 |
“文檔模式”菜單
此命令使你可以測試其他版本的 Internet Explorer 會如何解析你的頁面。對網(wǎng)頁所做的更改會影響該頁中的所有文檔，包括 iframe。
| 菜單項 | 描述 |
|---|---|
| Quirks 模式 (Alt+Q) | 該行為與呈現(xiàn)無文檔類型或文檔類型為 Quirks 時 Internet Explorer 的行為匹配。作用與 Internet Explorer 7 或 Internet Explorer 8 的 Quirks 模式相同。 |
| Internet Explorer 7 標準 (Alt+7) | 該行為與呈現(xiàn)具有嚴格文檔類型或未知文檔類型時 Internet Explorer 7 的行為匹配。 |
| Internet Explorer 8 標準 (Alt+8) | 這是呈現(xiàn)具有嚴格文檔類型或未知文檔類型時 Internet Explorer 8 中可用的符合大多數(shù)標準的行為。 |
| Internet Explorer 9 標準 (Alt+9) | 這是 Internet Explorer 9 中可用的符合大多數(shù)標準的行為。 |
