開始使用 F12 開發人員工具

這些內容是參照舊版的 F12 開發人員工具。請參閱我們最新的 F12 工具文件

如果您不是想要測試或偵錯自己內容的網頁開發人員,這裡提供一些實用的連結。

這些連結很適合任何版本的 Windows Internet Explorer。

若要關閉 F12 工具,再按一次 F12,或按一下 F12 工具右上角的 [X]

若要讓 Internet Explorer 工具列維持可見,請按一下 Alt 鍵,按一下 [檢視],指向 [工具列],勾選 [功能表列],然後按一下 [鎖定工具列]。在 Internet Explorer 中找不到功能表列和工具列知識庫文章中也可以找到更多資訊。

F12 工具的功能表及按鈕提供頁面及視覺工具,協助您瀏覽工具套件。您可以利用這個工具建立文件中所有連結的報告清單、變更文件模式,或是以視覺化方式概述頁面上的特定元素。 本主題包括下列各節。

附註  F12 工具與 Internet Explorer 共用一些快速鍵。您想要使用 F12 工具的快速鍵時,需要確定焦點在 F12 工具上。換句話說,就是在 F12 開發人員工具內按一下,然後就可以使用快速鍵。

網頁工具

主功能表下有許多工具及選項。F12 工具套件提供的許多工具都可以在網頁或瀏覽器上操作,或是提供方法以使用各種程式碼檢視的選項及功能。下表概述工具提供的功能表及選項。

[檔案] 功能表

功能表項目說明
全部復原重設已對 Internet Explorer 目前執行個體進行的所有變更 (例如屬性值),然後重新整理網頁。
自訂 Internet Explorer 檢視原始檔 提供包含下列選項的功能表,以設定 [檢視原始檔] 檢視器:
  • 預設檢視器:具備程式碼格式設定功能的內建檢視器。
  • 記事本:使用 Windows 記事本顯示原始檔。
  • 其他:讓您瀏覽並指定電腦上安裝的其他編輯器或檢視器應用程式。
線上說明 (F1)提供本文件的連結。
結束 (F12)關閉 F12 工具。

 

[尋找] 功能表

[尋找] 功能表只有一個項目,也就是 [按一下以選取元素]。您可以按一下 [按一下以選取元素] 按鈕 [按一下以選取元素] 按鈕的圖片 或按 Ctrl+B,從功能表項目啟用此功能。啟用此功能之後,只要按一下頁面上的元素,即可選擇網頁上的元素。按一下網頁上的元素之後,就會在元素周圍繪製邊框。如果已開啟 [HTML] 索引標籤,左窗格就會捲動並反白選取的元素。屬性窗格 (右窗格) 會根據您目前選擇的屬性類型 (樣式、追蹤樣式、配置或屬性),顯示所選元素的屬性。如果 [HTML] 索引標籤目前未開啟,請使用 [按一下以選取元素] 選取元素,然後焦點便會自動切換回 [HTML] 索引標籤。 除非您按一下元素,否則不會啟用 [按一下以選取元素]

附註  若要使用 Ctrl+B,您需要讓焦點在 F12 工具內。如果焦點在您的網頁上,您會看到 [組織我的最愛] 對話方塊。

透過按一下以選取元素的圖片

[停用] 功能表

此功能表可協助您測試使用者在瀏覽器中停用網站部分功能時的體驗。使用此功能表即將這些功能開啟或關閉。

功能表項目說明
指令碼停用網頁的所有指令碼。選取此選項時,就會設定此命令,而頁面會重新整理。如果網際網路安全性已將 [受保護模式] 設為 [啟動],則無法使用此命令。若要使用此命令,請在 [網際網路選項] 中,清除 [安全性] 索引標籤上的 [啟用受保護模式]
快顯封鎖程式停用所有快顯封鎖程式,允許此網站出現快顯視窗。
CSS停用網頁的所有階層式樣式表 (CSS)。選取此選項時,就會設定此命令,而頁面會在關閉 CSS 的狀況下重新整理。如果您重新整理網頁或開始偵錯指令碼 (進而重新整理網頁),就會重新啟用 CSS。

 

[檢視] 功能表

此功能表讓您不需要先找出 HTML 樹狀結構或原始檔中的項目,即可檢視頁面上的元素相關資訊。

功能表項目說明
類別和識別碼資訊 (Ctrl+I)顯示網頁上所有 HTML 元素的類別及識別碼值。在對應的元素中,資訊會以重疊方式顯示在網頁上。按兩下重疊即可反白資訊。按 Ctrl+C 即可複製。
連結路徑顯示網頁上所有連結的連結路徑。資訊會以文字重疊方式顯示在網頁元素上。按兩下重疊即可反白資訊。按 Ctrl+C 即可複製。
連結報告產生此網頁上所有連結的清單,並在新的 Internet Explorer 執行個體中報告清單。不需要瀏覽整個 HTML 原始檔就能檢查所有連結,既輕鬆又方便。
標籤索引針對已定義 tabindex 屬性的元素,將標籤索引以數字重疊方式顯示在網頁上。
便捷鍵針對已定義 accesskey 屬性的元素,將便捷鍵以重疊方式顯示在網頁上。
原始檔 檢視功能表的子功能表 (說明顯示於下表)。

 

原始檔子功能表項目說明
具樣式的元素原始檔只將所選元素的 HTML 原始檔內容以及套用的 CSS 顯示於新視窗。這樣有助於將焦點只放在所選元素的原始檔。您必須使用 [HTML] 索引標籤檢視來選取 HTML 樹狀結構 body 中的 HTML 元素,才能執行此命令。若要選取元素,請使用 [按一下以選取元素] 命令,或是按一下 HTML 樹狀結構中的元素。
DOM (元素)只將所選元素的 HTML 原始檔及其內容顯示於新視窗。您必須使用 [HTML] 索引標籤檢視來選取 HTML 元素,才能執行此命令。若要選取元素,請使用 [按一下以選取元素] 命令。
DOM (頁面)在新視窗中顯示完整 HTML 原始檔,以顯示元素巢狀結構。這個原始檔檢視可顯示頁面的文件物件模型 (DOM) 結構,包括使用指令碼 (由 Internet Explorer 呈現) 動態寫入 DOM 的原始檔。
原始在新視窗中顯示原先的 HTML 原始檔。

 

[影像] 功能表

此功能表提供的命令可協助您識別元素大小及位置,進而了解並偵錯頁面配置。它也會根據元素類型以色彩編碼,協助您以視覺方式識別特定類型的所有元素。

功能表項目說明
停用影像關閉網頁上呈現的所有影像。此命令會造成網頁重新整理,而且不顯示任何影像,也會停用 [顯示影像檔案大小] 命令。
顯示影像尺寸以文字重疊方式顯示網頁上所有影像的影像尺寸。
顯示影像檔案大小以文字重疊方式顯示網頁上所有影像的影像檔案大小。報告中檔案大小的單位是位元組。使用 [停用影像] 命令時,會停用此命令。
顯示影像路徑以重疊方式顯示網頁上所有影像的影像絕對路徑。
檢視替代文字針對已定義 alt 屬性的所有影像顯示替代文字。若影像尚未定義 alt 屬性,則不會出現重疊。
檢視影像報告產生目前網頁之 body 程式碼中定義的所有影像清單,並顯示於新的 Internet Explorer 索引標籤中。此清單不包括使用 CSS 載入的影像 (例如 "background-image:url()")。

 

[快取] 功能表

功能表項目說明
永遠從伺服器重新整理 強制 Internet Explorer 永遠從伺服器取得網頁內容,而不使用快取內容。此命令會持續到您予以清除此選項或關閉 Internet Explorer 執行個體為止。
清除瀏覽器快取... (Ctrl+R)刪除瀏覽器快取及所有暫存檔。
清除這個網域的瀏覽器快取... (Ctrl+B)只刪除屬於目前網域的瀏覽器快取及所有暫存檔。
停用 Cookie停用此 Internet Explorer 執行個體的所有 Cookie。此命令會持續到您予以清除此選項或關閉 Internet Explorer 執行個體為止。
清除工作階段 Cookie刪除這個瀏覽器工作階段期間取得的所有 Cookie。
清除網域的 Cookie刪除目前網域的所有 Cookie。
檢視 Cookie 資訊產生 Internet Explorer 儲存的所有 Cookie 清單,並以新的 Internet Explorer 執行個體報告清單。如需如何使用 Cookie 的相關資訊,請參閱 cookie property 參照。

 

[工具] 功能表

此功能表提供的各種工具可協助您處理常見工作,例如以不同解析度測試網站、變更使用者代理字串、測量頁面區域,以及擷取頁面上某一點的特定色彩。

功能表項目說明
重新調整大小提供含有預先定義之螢幕大小的子功能表,以及自訂螢幕大小的選項。選取預先定義的螢幕大小之後,Internet Explorer 視窗大小就會立即調整為選取的尺寸。子功能表提供四種預設大小 (含快速鍵) 及一個自訂設定。
800x600Ctrl+Shift+1
1024x768Ctrl+Shift+2
1280x768Ctrl+Shift+3
1280x1024Ctrl+Shift+4
自訂(無快速鍵)

 

自訂設定會開啟對話方塊,讓您輸入想要的螢幕大小並予以測試。當您關閉瀏覽器之後,自訂項目將維持不變,這樣您就可以在往後的測試工作階段再次使用。

自訂調整大小螢幕對話方塊的圖片
變更使用者代理字串

用來變更您在要求網頁時傳送到網頁的使用者代理字串。提供一組預設使用者代理字串及一個自訂選項。自訂選項可顯示對話方塊,讓您輸入想要的字串。儲存自訂項目之後,就會出現在 [變更使用者代理字串] 子功能表上。重新整理頁面以顯示變更。請注意,變更 docmode 將覆寫自訂的使用者代理字串設定。

自訂使用者代理字串對話方塊的圖片
瀏覽時清除輸入

讓您在偵錯工作階段中瀏覽新網頁時,清除或保存 [主控台] 訊息及 [網路] 索引標籤記錄。根據預設,當您離開頁面時,Internet Explorer 會清除所有主控台訊息,而 [網路] 索引標籤會擷取記錄。

顯示尺規 (Ctrl+L)

允許您測量螢幕上的任意物件。[尺規] 對話方塊開啟時,會提供使用工具的選項及提示。支援多種色彩及尺規。為了精確起見,也提供放大鏡。按 CTRL+M 即可開啟或關閉放大鏡。尺規會根據點在螢幕上的相對位置,在尺規兩端顯示 ("x,y") 座標,而長度則以像素為單位顯示於尺規中央。如果將游標移到尺規上方,則 [尺規] 對話方塊下方也會出現測量值。尺規可以移動、調整大小和調整角度。若要移除尺規,請予以選取並按 Delete 鍵。完成時,請按一下右上角的 [X] 按鈕關閉對話方塊。關閉對話方塊即可隱藏所有尺規。開啟 [尺規] 對話方塊即可顯示尺規。

顯示色彩選擇器 (Ctrl+K)

顯示色彩選擇器工具,從頁面上的任一物件取得色彩樣本。[色彩選擇器] 對話方塊會顯示選擇器所在位置的色彩樣本。色彩選擇器也會顯示色彩的 RGB 及 HEX 值。若要查看網頁上使用的色彩值,請以滴管游標按一下色彩。按一下 [複製並關閉],即可將值複製到剪貼簿以用於網頁中。按一下 [X] 按鈕或此功能表上的 [隱藏色彩選擇器],關閉對話方塊。

F12 色彩選擇器對話方塊的圖片
大綱元素

容易識別元素大小及位置,協助您了解和偵錯頁面配置。您可以設定色彩以識別特定元素類型的所有元素。 使用 CSS 選取器語法指定網頁上的元素。例如,若要反白所有段落,請在選取器欄位中使用 p,然後設定色彩。如需使用選取器的詳細資訊,請參閱了解 CSS 選取器

[大綱元素] 對話方塊的圖片

 

[驗證] 功能表

讓您使用網路上的驗證服務來驗證目前的網頁或電腦上的檔案。對話方塊會確認您要採取此動作;否則會取消要求。

功能表項目說明
HTML驗證目前網頁的 HTML。驗證報告會顯示於新視窗。
CSS驗證目前網頁的 CSS。驗證報告會顯示於新視窗。
摘要驗證網頁的「真正簡易新聞訂閱方式」(RSS) 摘要。驗證報告會顯示於新視窗。
連結驗證目前網頁中的所有連結。驗證報告會顯示於新視窗。
本機 HTML...開啟新視窗,讓您選擇電腦上要驗證的 HTML 檔案。
本機 CSS...開啟新視窗,讓您選擇本機電腦上要驗證的 CSS 檔案。
協助工具

可存取下列協助工具驗證程式:

WCAG 檢查清單W3C 的「網頁內容無障礙準則」(Web Content Accessibility Guidelines 或 WCAG)。其定義的準則適合用來建立無障礙的網頁。
區段 508 檢查清單 美國政府的存取性準則,用來建立無障礙的網頁。

 

多重驗證

讓您在單一要求中執行一或多個驗證。選取您想要的驗證,然後按一下 [確定] 起始要求。只會出現一個對話方塊,確認您要將這個頁面傳送到其他網站進行驗證。每次選取都會開啟新索引標籤,其中包含產生的驗證。

[多重驗證] 對話方塊的圖片

 

[瀏覽器模式] 功能表

此命令可讓您測試執行其他 Internet Explorer 版本的使用者操作網頁的方式。例如,如果您選擇 Windows Internet Explorer 7 瀏覽器模式,您的網頁就會根據該瀏覽器呈現,而且也無法存取較新版本的 Internet Explorer 才提供的 docmode。

功能表項目說明
Internet Explorer 7Internet Explorer 7 瀏覽器模式。
Windows Internet Explorer 8Internet Explorer 8 瀏覽器模式。
Windows Internet Explorer 9Internet Explorer 9 瀏覽器模式。這會啟用 HTML5、CSS3 及 Internet Explorer 9 支援的其他標準。
Internet Explorer 9 相容性檢視 測試 Internet Explorer 9 使用者在選擇 [相容性檢視] 選項時對於網頁的體驗。

 

[文件模式] 功能表

此命令可讓您測試網頁在其他 Internet Explorer 版本的解譯方式。對網頁進行的變更會影響頁面中的所有文件,包括 iframe。

功能表項目說明
Quirks 模式 (Alt+Q)此行為與 Internet Explorer 在呈現無文件類型或 Quirks 文件類型的文件時行為相符。作用與 Internet Explorer 7 或 Internet Explorer 8 的 Quirks 模式相同。
Internet Explorer 7 標準 (Alt+7) 此行為與 Internet Explorer 7 在呈現嚴格或不明文件類型的文件時行為相符。
Internet Explorer 8 標準 (Alt+8) 這是 Internet Explorer 8 在呈現嚴格或不明文件類型的文件時,所提供最符合標準的行為。
Internet Explorer 9 標準 (Alt+9) 這是 Internet Explorer 9 所提供最符合標準的行為。

 

相關主題

如何使用 F12 開發人員工具偵錯您的網頁

 

 

顯示:
© 2014 Microsoft