共用方式為

使用輔助技術流覽DevTools

  • 發行項

本文可協助您透過鍵盤和螢幕助讀程式等輔助技術來使用DevTools。 本指南會逐步引導您完成最容易存取的工具和索引標籤，並醒目提示您可能會遇到的問題。

如需改善網頁輔助功能的 DevTools 功能，請參閱 輔助功能測試功能。

包含索引標籤和頁面的索引標籤工具面板

如需索引標籤、工具和面板的術語，請參閱DevTools概觀中包含索引標籤和頁面的索引卷標式工具面板。

技術上，索引標籤是 ARIA索引標籤清單。

快速鍵

如需DevTools的默認鍵盤快捷方式，請參閱 鍵盤快捷方式。 當您探索不同的工具時，請務必將它加上書籤並回頭參考。

開啟DevTools

在 Microsoft Edge 中，您可以使用滑鼠或鍵盤，以下列任何一種方式開啟 DevTools。 開啟的工具取決於您開啟 DevTools 的方式。

主要方式：

動作 產生的工具
以滑鼠右鍵按兩下網頁上的任何項目，然後選取 [ 檢查]。 [元素] 工具會展開 DOM 樹狀結構，以顯示以滑鼠右鍵按兩下的頁面元素。
按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 先前使用的工具，或 歡迎 使用工具。
按 F12。 先前使用的工具，或 歡迎 使用工具。

其他方式：

動作 產生的工具
在 Microsoft Edge 工具列上，選取 [設定]， ( [設定及更多] 圖示) >[其他工具>開發人員工具。 先前使用的工具，或 歡迎 使用工具。
按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 主控台工具。
按 Ctrl+Shift+C (Windows、Linux) 或 Command+Option+C (macOS) 。 [元素] 工具，展開 DOM 樹狀結構以顯示 <body> 元素。
按 Shift+F10 以開啟滑鼠右鍵功能表。 若要選取 [檢查] 命令，請按 向上鍵 ，然後 按 Enter。 [元素] 工具，展開 DOM 樹狀結構以顯示 <html> 元素。
按 Tab 鍵或 Shift+Tab 將焦點放在頁面元素上。 然後按 Shift+F10 以開啟滑鼠右鍵功能表。 若要選取 [檢查] 命令，請按 向上鍵 ，然後 按 Enter。 [元素] 工具，展開 DOM 樹狀結構以顯示焦點頁面元素。

您可以使用鍵盤瀏覽鍵或使用 [命令選單] 在工具之間移動。

  • 開啟 DevTools 之後，按 Ctrl+] (Windows、Linux) 或 Command+] (macOS) 將焦點移至 活動列上的下一個工具。
  • 按 Ctrl+[ (Windows、Linux) 或 Command+[ (macOS) ，將焦點移至 活動列上的上一個工具。
  • 重複按 Tab 鍵或 Shift+Tab 鍵，直到焦點移至 活動列 或 快速檢視 工具列的索引標籤，然後使用箭頭鍵在工具之間移動。

已知問題

  • 某些工具，例如 控制台 和 效 能工具，可能會在選取工具後立即將焦點移至工具的內容區域。 這可能會讓箭頭鍵難以巡覽。

  • 只有在宣佈工具中的焦點內容之後，才會宣告所選取工具的名稱。 這一連串的公告可能會讓您輕鬆地錯過工具的名稱。

若要選取特定工具，請使用 [命令功能表]。 在 [命令功能表] 中，工具會指出為 [面板 ] 或 [ 快速檢視] 專案。

  1. 開啟 DevTools 之後，請按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 以開啟 [命令] 功能表。

    [ 命令功能表 ] 是模糊搜尋自動完成下拉式方塊。

  2. 輸入工具的名稱，然後使用鍵盤上的 向下箭號 流覽至正確的選項。

  3. 按 Enter 鍵以執行命令。

若要開啟 Elements 工具：

  1. 開啟 [命令] 功能表。

  2. 開始輸入 元素，選取 [顯示元素 ] 命令，然後按 Enter。

以這種方式開啟工具會將焦點放在工具的內容區域中。 在 Elements 工具的案例中，焦點會移至 DOM 樹狀結構。

Elements 工具

檢查頁面上的元素

  1. 使用螢幕助讀程式中的數據指標，移至您想要檢查的專案。

  2. 以滑鼠右鍵按兩下元素，然後選取 [ 檢查 ] 選項。 這 會開啟 Elements 工具，並將焦點放在 DOM 樹狀結構中的 元素。

DOM 樹狀結構會配置為ARIA樹狀結構。 如需範例，請參 閱使用鍵盤巡覽 DOM 樹 狀結構。

複製 DOM 樹狀結構中專案的程式代碼

  1. 以滑鼠右鍵按下 DOM 樹狀結構中的節點。

  2. 展開 [ 複製] 選項。

  3. 選 取 [複製 outerHTML]。

已知問題

  • 複製 outerHTML 通常不會選取目前的節點，而是改為選取父節點。 不過，專案的內容仍應在複製的 outerHTML中。

修改 DOM 樹狀結構中項目的屬性

  • 當焦點在 DOM 樹狀結構的節點上時，請按 Enter 來編輯節點。

  • 按 Tab 鍵在屬性值之間移動。 當您聽到「空格」時，您位於空白文字輸入內，而且可以輸入新的屬性值。

  • 按 Ctrl+Enter (Windows、Linux) 或 Command+Enter (macOS) 接受變更並聆聽元素的整個內容。

已知問題

  • 當您輸入文字輸入時，不會收到任何意見反應。 如果您輸入錯字，並使用箭頭鍵來探索您的輸入，您也不會收到任何意見反應。 檢查您的工作最簡單的方式是接受變更，然後接聽整個專案來宣告。

編輯 DOM 樹狀結構中專案的 HTML

  • 當焦點在 DOM 樹狀結構的節點上時，請按 Enter 來編輯節點。

  • 按 Tab 鍵在屬性值之間移動。 當您聽到元素的名稱時， h2例如，您位於文字輸入內，而且可以變更元素的類型。

  • 按 Ctrl+Enter (Windows、Linux) 或 Command+Enter (macOS) 接受變更。

例如，當您輸入 h3 ，然後按 Ctrl+Enter (Windows、Linux) 或 Command+Enter (macOS) ，元素的開始 h3 和結束標記就會變更。

專案工具中的索引標籤

Elements 工具包含其他索引標籤，可檢查套用至元素的 CSS，或輔助功能樹狀結構中的相關位置。

  • 當焦點在 DOM 樹狀結構上時，請按 Tab 鍵，直到您聽到已選取 [ 樣式 ] 窗格為止。

  • 按 向右鍵 以探索其他可用的索引標籤。

DOM 樹狀結構會將具有href屬性的項目轉換成可設定焦點的連結，因此您可能需要多次按 Tab 鍵才能到達 [樣式] 窗格。

已知問題

無法使用鍵盤存取 [DOM 斷點 ] 和 [ 屬性 ] 索引標籤。

樣式窗格

[ 樣式] 窗格有控件可篩選樣式、切換項目狀態 (例如 ：active 和 ：focus) 、切換類別，以及新增類別。 另外還有功能強大的樣式檢查工具，可探索和修改目前套用至 DOM 樹狀結構中具有焦點之元素的樣式。

瞭解 [ 樣式 ] 窗格的重要概念是，它只會顯示 DOM 樹狀結構中目前選取節點的樣式。 例如，假設您已完成檢查節點的 <header> 樣式，現在您想要查看節點的 <footer> 樣式。 若要這樣做，您必須先選 <footer> 取 DOM 樹狀結構中的節點。

您可能會發現使用 [檢查 ] 工作流程來檢查節點一般區域 footer 中的節點 (例如頁尾) 內的連結，該連結會聚焦於 DOM 樹狀結構，然後使用鍵盤流覽至您感興趣的確切節點。

因為所有樣式工具都會以某種方式連線回到 [樣 式 ] 窗格，所以先成為此工具的專家是合理的。

  • 將焦點放在 [ 樣式] 窗格上，按 Tab 鍵在其中移動焦點並探索內容。

  • 按 Tab 鍵 ，直到第一個樣式變成使用中。 如果您使用螢幕助讀程式，則會將第一個樣式宣告為 element.style {}。

  • 按 向下鍵 以依特定性的順序瀏覽樣式清單。 螢幕助讀程式會以 CSS 檔案的名稱、樣式出現的行號以及樣式的名稱來宣告每個樣式。 例如，main.css:233 .card__img {}。

  • 按 Enter 以更詳細地檢查樣式。 焦點會從可編輯的樣式名稱版本開始。

  • 按 Tab 鍵 ，在每個 CSS 屬性的可編輯版本與對應的值之間移動。 在每個樣式區塊的結尾是空白的可編輯文字欄位，可用來新增其他 CSS 屬性。

  • 您可以繼續按 Tab 鍵以移動樣式清單，或按 [逸出 ] 結束模式，然後返回以箭頭鍵巡覽。

如需其他快捷方式，請參閱 樣式窗格鍵盤參考。

已知問題
  • 如果您使用 [ 可編輯的篩選 文字] 字段，就無法瀏覽樣式清單。

切換項目狀態

若要切換項目的狀態，例如 :active 或 ： :focus

  1. 移至 [ 樣式] 窗格，然後按 Tab 鍵，直到 [ 切換項目狀態 ] 按鈕具有焦點為止。

  2. 按 Enter 鍵以顯示包含複選框的 Force 元素狀態 區段。

  3. 按 Tab 鍵， :active直到第一個狀態 取得焦點為止。

  4. 按 空格鍵 以選取 (啟用) 複選框。 如果 DOM 樹狀結構中目前選取的專案具有樣 :active 式，則現在會套用。

  5. 按 Tab 鍵以探索所有可用的狀態。

新增現有類別

[ 元素類別] 按鈕位於 [ 切換項目狀態 ] 按鈕旁邊。 若要將焦點移至 [元素類別] 按鈕，請按 Tab 鍵，然後按 Enter。 焦點會移至標示為 [新增類別] 的編輯文字欄位。

[ 元素類別] 按鈕主要用於將現有類別新增至專案。 例如，如果您的樣式表單包含名為 的 .clearfix協助程序類別，您可以在編輯文字欄位內按下 . ，以顯示類別的建議清單，並使用 向下箭號 來尋找 .clearfix 建議。 或自行輸入類別名稱，然後按 Enter 來套用它。

新增樣式規則

與 [ 元素類別] 按鈕相鄰的是 [ 新增樣式規則] 按鈕。 若要將焦點移至其中，請按 Tab 鍵，然後按 Enter。 焦點會移至樣式偵測器內可編輯的文字欄位。 欄位的初始文字內容是 DOM 樹狀結構中所選取項目的標記名稱。 您可以在此欄位中輸入任何您想要的類別名稱，然後按 Tab 將 CSS 屬性指派給它。

計算索引標籤

將焦點放在 [ 計算] 索引 標籤上，按 Tab 鍵將焦點移至內部並探索內容。 在 [ 計算] 索引 標籤中，有一些控件可探索哪些 CSS 屬性會根據特定性實際套用至專案。

探索所有計算樣式

按 Tab 鍵 ，直到您到達計算樣式的集合為止。 計算樣式會顯示為 ARIA 樹狀結構。 展開清單框會顯示哪些 CSS 選取器正在套用計算樣式。 這些選取器會依特定性進行組織。 螢幕助讀程式會宣告計算的值、CSS 選取器目前正在比對的值、包含選取器之樣式表單的檔名，以及選取器的行號。

已知問題

  • 如果您使用 [ 篩選 文字] 字段，就無法再檢查樣式。

事件接聽程式索引標籤

若要檢查套用至元素的事件接聽程式，請選取 [ 元素 ] 工具，然後選取 [ 事件接聽程式 ] 索引卷標 (以 [樣 式 ] 索引標籤) 分組。

當焦點在 [ 樣式] 索引 標籤上時，按 向右鍵 以流覽至 [事件接聽程式] 索引標籤 。

探索事件接聽程式

事件接聽程式會顯示為 ARIA 樹狀結構。 您可以使用箭頭鍵來巡覽它們。 螢幕助讀程式會宣告事件接聽程式所附加的 DOM 物件名稱，以及定義事件接聽程式的檔名和行號。

輔助功能索引標籤

選取 Tab 鍵，在 [元素] 工具的 [輔助功能] 索引標籤內四處移動。

[ 輔助功能] 索引 標籤靠近 [ 樣式] 索引標籤 。在 [輔助功能] 索引標籤上，有一些控件可探索輔助功能樹狀結構、套用至元素的 ARIA 屬性，以及計算的輔助功能屬性。 請參閱 使用 [輔助功能] 索引標籤測試輔助功能。

輔助功能樹狀結構

輔助功能樹狀結構會呈現為 ARIA 樹狀結構，其中每個treeitem樹狀結構都對應至 DOM 中的元素。 樹狀結構會宣告所選節點的計算角色。 和 之類的divspan泛型元素會在樹狀結構中宣告為 「GenericContainer」。。 使用箭頭鍵來周游樹狀結構，並探索父子式關聯性。

已知問題

  • 在適用於 VoiceOver 等 macOS 螢幕助讀程式的 Microsoft Edge 中，可能無法正確公開 [輔助功能] 索引卷標所使用的 ARIA 樹狀結構類型。 訂閱 Chromium 問題 #868480 以瞭解此問題的進度。
  • 每個 ARIA 屬性 和 計算屬性 區段都會標示為 ARIA 樹狀結構，但每個區段目前沒有焦點管理，而且無法使用鍵盤操作。

保存檢查工具的工具提示和網格線色彩重疊

當您按下 [ 檢查 工具] 按鈕並在轉譯的網頁中四處移動時，[檢查] 工具提示會變更。 若要保持顯示目前的工具提示和網格線色彩重疊，請在轉譯的網頁中四處移動時，按住 Ctrl+Alt (Windows、Linux) 或 Ctrl+選項 (macOS) 。

使用螢幕放大鏡或其他輔助技術時，這項技術會很有説明。 如果您未保存檢查工具的工具提示，當您使用 [ 檢查 工具] ([檢查工具] 按鈕 時，暫留覆迭會持續變更) 。

請參閱 使用檢查工具分析頁面。

Lighthouse 工具

Lighthouse 會對網站執行一系列測試，以檢查與效能、輔助功能、SEO 和其他一些類別相關的常見問題。

設定和產生報表

  1. 當 Lighthouse 工具第一次在 DevTools 中開啟時，焦點會放在 [ 產生報表 ] 按鈕上。 根據預設，窗體會設定為在模擬 3G 連線上使用行動模擬，針對每個類別執行報表。

  2. 若要變更報表設定，請使用 Shift+Tab 將焦點放在 Lighthouse 設定上，或在流覽模式中瀏覽回來。

  3. 當您準備好執行報表時，請流覽回 [產生報表] 按鈕，然後按 Enter。

  4. 焦點會移至具有 [ 取消 ] 按鈕的強制回應視窗，讓您結束稽核。 當稽核執行並多次重新整理頁面時，您可能會聽到一連串的耳機。

已知問題

  • 組態表單的不同區段目前並未以 fieldset 項目標示。 在流覽模式中瀏覽這些控制項可能會比較容易，以找出哪些控件與每個區段相關聯。
  • 稽核完成執行時，不會有耳機或實時區域公告。 一般而言，稽核大約需要 30 秒，之後您應該能夠巡覽至結果。 使用流覽模式可能是取得結果的最簡單方式。

Lighthouse 報表會組織成與每個稽核類別對應的區段。 報表隨即開啟，其中包含每個類別的分數清單。 這些分數也是您可以用來跳至相關區段的連結。 每個區段內都是可展開的 details 元素，其中包含已通過或失敗的稽核相關信息。 根據預設，只會顯示失敗的稽核。 每個區段的結尾都是最後 details 一個專案，其中包含所有傳遞的稽核。

若要執行新的稽核，請使用 Shift+Tab 結束報表，然後選取 [ 產生報表] 按鈕。

另請參閱

注意事項

此頁面的部分是根據Google所建立和 共用的工作進行 修改，並根據 Creative Commons Attribution 4.0 國際授權中所述的條款使用。 原始頁面 位於此處 ，並由 Rob Dodson 撰寫 (參與者 Google WebFundamentals) 。

Creative Commons 授權 此工作是根據 Creative Commons Attribution 4.0 International License 授權。