本文協助你透過鍵盤及螢幕閱讀器等輔助科技使用 DevTools。 本指南會帶你了解最容易取得的工具和分頁，並強調你可能遇到的問題。
關於提升網頁無障礙性的 DevTools 功能，請參見 無障礙測試功能。
帶有標籤的工具面板，內含標籤與頁面
關於分頁、工具與面板的術語，請參閱開發工具概述中的標籤工具面板，內含標籤與頁面。
技術上來說，這些標籤是 ARIA 的標籤表。
快速鍵
關於 DevTools 的預設鍵盤快捷鍵，請參見 鍵盤快捷鍵。 記得先收藏，並在探索不同工具時回頭參考。
開放開發工具
在 Microsoft Edge 中，您可以使用滑鼠或鍵盤開啟 DevTools，以下任一方式。 開啟哪個工具取決於你怎麼開啟 DevTools。
主要方式：
| 動作 | 結果工具 |
|---|---|
| 在網頁上右鍵點擊任一項目，然後選擇 檢查。 | 元素 工具， DOM 樹展開顯示右鍵點擊的頁面元素。 |
| 在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。 | 先前使用的工具，或 [歡迎使用] 工具。 |
| 按 F12。 | 先前使用的工具，或 [歡迎使用] 工具。 |
其他方式：
| 動作 | 結果工具 |
|---|---|
在 Microsoft Edge 工具列，選擇「設定及更多」 (「 ) >更多工具>開發人員工具。 |
先前使用的工具，或 [歡迎使用] 工具。 |
| 在 Windows、Linux () 按 Ctrl+Shift+J ，或在 macOS) 按 Command+Option+J (。 | 控制台工具。 |
| 在 Windows、Linux) 按 Ctrl+Shift+C (macOS) 按 Command+Option+C (。 | [元素] 工具並展開 DOM 樹狀結構，顯示 <body> 元素。 |
| 按 Shift+F10 開啟右鍵選單。 若要選取 [檢查] 命令，請按向上鍵，然後按 Enter 鍵。 | [元素] 工具並展開 DOM 樹狀結構，顯示 <html> 元素。 |
| 按 Tab 或Shift+Tab 來將焦點放在頁面元素上。 然後按 Shift+F10 開啟右鍵選單。 若要選取 [檢查] 命令，請按向上鍵，然後按 Enter 鍵。 | 元素工具，DOM 樹展開顯示聚焦的頁面元素。 |
工具間的導航
你可以透過鍵盤導覽鍵或指令 選單在工具間切換。
鍵盤導航
開啟 DevTools 時，按下 Windows、Linux) (Ctrl+] 或 macOS) (Command+] 將焦點移到 活動列的下一個工具。
按下 Ctrl+[ (Windows、Linux) 或 Command+[ (macOS) 可將焦點移回活動 列上上一個工具。
反覆按 Tab 或Shift+Tab ，直到焦點移到 活動列 或 快速檢視 工具列的分頁，然後用方向鍵在工具間移動。
已知問題：
部分工具，如 Console 和 Performance 工具，可能會在選擇工具後立即將焦點移至該工具的內容區域。 這可能會讓用方向鍵操作變得困難。
所選工具名稱會被宣布，但前提是先公布工具中重點內容。 這連串的公告可能會讓人容易忽略工具名稱。
透過指令選單導航
要選擇特定工具，請使用 指令選單。 在 指令選單中，工具會標示為 面板 項目或 快速檢視 項目。
開啟 DevTools 後，按下 Windows、Linux) (Ctrl+Shift+P 或 macOS) 按 Command+Shift+P (開啟 指令選單。
指令選單是一個模糊搜尋自動補全的組合框。
輸入工具名稱，然後用鍵盤上的 向下箭頭 導航到正確的選項。
按 Enter 鍵執行指令。
要開啟 Elements 工具：
打開 指令選單。
開始輸入 元素，選擇 「顯示元素 」指令，然後按下 Enter。
用這種方式開啟工具會讓焦點放在工具的內容區域。 在 元素 工具中，焦點會移至 DOM樹。
Elements 工具
檢查頁面上的元素
用螢幕閱讀器的游標切換到你想檢查的元素。
右鍵點擊元素，然後選擇 檢查 選項。 這 會開啟元素工具，並將元素聚焦在 DOM 樹中。
DOM 樹架構為 ARIA 樹狀結構。 舉例來說，請參考「用鍵盤導航 DOM 樹」。
複製 DOM 樹中元素的程式碼
右鍵點擊 DOM 樹中的節點。
展開 複製 選項。
選擇 複製 outerHTML。
已知問題：
-
Copy outerHTML 通常不會選擇目前的節點，而是選擇父節點。 然而，該元素的內容仍應包含在複製
outerHTML的 中。
修改 DOM 樹中元素的屬性
當焦點放在 DOM 樹的節點時，按 Enter 鍵編輯該節點。
按 Tab 鍵即可在屬性值間切換。 當你聽到「空格」時，表示你進入了一個空白的文字輸入，可以輸入新的屬性值。
按下 Windows、Linux) (Ctrl+ Enter 或 macOS) 按 Command+Enter (接受變更並完整聆聽該元素的內容。
已知問題：
- 當你輸入文字時，卻沒有任何回饋。 如果你打錯字，然後用方向鍵來探索你的輸入，也不會得到任何回饋。 檢查你工作最簡單的方法是接受變更，然後聆聽整個元素的公告。
編輯 DOM 樹中元素的 HTML
當焦點放在 DOM 樹的節點時，按 Enter 鍵編輯該節點。
按 Tab 鍵即可在屬性值間切換。 例如，當你聽到元素名稱時，
h2你正處於文字輸入中，可以更改元素的類型。按下 Windows、Linux) (Ctrl+ Enter 或 macOS) (按 Command + Enter 以接受變更。
例如，當你輸入 h3 ，然後按 Windows、Linux) 按 Ctrl+ Enter 或 macOS) 按 Command+ Enter ( (，元素的 h3 開始和結束標籤就會改變。
元素工具中的分頁
元素工具包含額外的分頁，用來檢查像是套用到元素上的 CSS 或無障礙樹中相關位置。
當焦點放在 DOM 樹上時，按 Tab 鍵直到聽到樣 式 選窗被選中為止。
按 右箭頭 可探索其他可用分頁。
DOM 樹會將帶有href屬性的元素轉換成可聚焦的連結，因此你可能需要按多次 Tab 鍵才能進入樣式窗格。
已知問題：
DOM 斷點和屬性分頁無法用鍵盤操作。
風格面板
樣式面板有篩選樣式、切換元素狀態 (如 ：active 和 ：focus) 、切換類別，以及新增類別的控制。 此外，還有強大的樣式檢查工具，可以探索並修改目前套用於 DOM 樹中焦點元素的樣式。
關於 樣式 窗格的關鍵概念是，它只會顯示目前選擇的節點在 DOM 樹中的樣式。 舉例來說，假設你檢查完一個 <header> 節點的樣式，現在想查看該 <footer> 節點的樣式。 要做到這點，你首先需要在 DOM 樹中選擇節點。<footer>
你可能會發現用 Inspect 工作流程檢查 footer 節點附近 (節點，例如頁腳) 中的連結，這樣會聚焦 DOM 樹，然後用鍵盤直接導覽到你感興趣的節點。
瀏覽樣式窗格
因為所有樣式工具都會以某種方式連接到 樣式 窗格，所以先成為這個工具的專家是合理的。
在樣 式 面板上專注於焦點，按下 Tab 鍵將焦點移入並探索內容。
按 Tab 直到第一個樣式啟用。 如果你使用螢幕閱讀器，這個第一個樣式會被宣告為
element.style {}。按 下箭頭 可依照具體順序瀏覽風格清單。 螢幕閱讀器會以 CSS 檔案名稱、該樣式出現的行號及樣式名稱開始宣告每個樣式。 例如，
main.css:233 .card__img {}。按 Enter 鍵可更詳細地檢視風格。 重點從可編輯的樣式名稱開始。
按 Tab 鍵可在每個 CSS 屬性的可編輯版本與對應值之間切換。 每個樣式區塊的末尾有一個空白的可編輯文字欄位，你可以用來新增額外的 CSS 屬性。
你可以繼續按 Tab 來瀏覽風格列表，或按 Escape 退出模式，回到用方向鍵導航。
如需更多快捷鍵，請參閱 Styles 面板鍵盤參考。
已知問題：
- 如果你用 Filter（可 編輯的篩選）文字欄位，就無法在樣式清單中導航。
切換元素狀態
切換元素的狀態，例如:active：:focus
進入 樣式 窗格，然後按 Tab 鍵，直到切換 元素狀態 按鈕對焦。
按 Enter 鍵可顯示 Force 元素狀態 區塊，該區段包含勾選框。
按 Tab 直到第一個狀態
:active，，有焦點。按 空白鍵 選擇 (啟用) 勾選框。 如果目前選取的 DOM 樹元素有
:active樣式，該樣式即被套用。按 Tab 鍵探索所有可用州份。
新增一個現有的類別
元素類別按鈕位於切換元素狀態按鈕旁邊。 要將焦點移到 元素類別 按鈕，按 Tab 鍵，然後按 Enter。 Focus 會移到一個標示為 「新增類別」的編輯文字欄位。
元素 類別 按鈕主要用於將現有類別加入元素。 舉例來說，如果你的樣式表中有個名為 .clearfix的輔助類別，你可以在編輯文字欄位內按.，顯示類別的建議清單，並用向下箭頭找到該建議。.clearfix 或者自己輸入課程名稱，然後按 Enter 鍵套用。
新增風格規則
元素 類別 按鈕旁邊是 新風格規則 按鈕。 要把焦點移到那裡，先按 Tab 鍵再按 Enter。 焦點會移到風格檢查器內的可編輯文字欄位。 欄位的初始文字內容是 DOM 樹中所選元素的標籤名稱。 你可以在這個欄位輸入任何你想要的類別名稱，然後按 Tab 鍵來指派 CSS 屬性。
計算分頁
在「 計算」 分頁時，按下 Tab 鍵即可將焦點移入並探索內容。 在 「計算」 分頁中，有控制項可依具體性順序探索實際套用哪些 CSS 屬性。
探索所有計算式樣
按 Tab 直到你看到計算出的樣式集合。 計算出的樣式以 ARIA 樹形式呈現。 展開清單框會顯示哪些 CSS 選擇器正在套用該計算出的樣式。 這些選擇器依具體性組織。 螢幕閱讀器會宣告計算出的值、CSS 選擇器目前匹配的值、包含該選擇器的樣式表檔案名稱，以及選擇器的行號。
已知問題：
- 如果你使用 篩選 文字欄位，就無法檢查樣式了。
事件監聽者標籤
要檢查套用到元素的事件監聽器，請選擇 元素工具， 然後選擇事件 監聽器 標籤， (與 樣式 標籤分) 。
當焦點在 樣式 標籤時，按 右箭頭 即可切換到 事件聆聽者 標籤。
探索活動聽眾
活動聽眾會以 ARIA 樹狀呈現。 你可以用方向鍵來導航。 螢幕閱讀器會宣告事件監聽器所附加的 DOM 物件名稱、事件監聽器定義的檔名和行號。
無障礙分頁
在 Elements 工具的無障礙標籤中，選擇 Tab 鍵來移動。
無障礙分頁靠近樣式分頁。在無障礙標籤中，有控制項用來探索無障礙樹、套用到元素的 ARIA 屬性，以及計算出的無障礙屬性。 請參閱 使用無障礙標籤的測試無障礙。
無障礙樹
無障礙樹以 ARIA 樹呈現，每個 treeitem ARIA 樹對應 DOM 中的一個元素。 樹狀結構會宣告所選節點的計算角色。 像 div 和 span 這類通用元素會在樹中以「GenericContainer」標示。 使用方向鍵橫越樹狀結構並探索父子關係。
已知問題：
- Microsoft Edge 對於 macOS 螢幕閱讀器（如 VoiceOver）所使用的 ARIA 樹類型，可能未被正確公開。 訂閱 Chromium 第 #868480 期，以掌握本期進展資訊。
- ARIA 屬性和計算屬性的每個區塊都標示為 ARIA 樹狀結構，但目前每個區塊都沒有對焦管理功能，也無法用鍵盤操作。
持續保留檢查工具的提示與格子顏色覆蓋
當你點擊 檢查 工具按鈕並在渲染後的網頁中移動時，檢查工具提示會改變。 要保持目前工具提示和格線顏色覆蓋層顯示，在渲染網頁中移動時，按住 Ctrl+Alt (Windows、Linux) ，或 macOS () 按 Ctrl+Option 。
這種技巧在使用螢幕放大鏡或其他輔助科技時會很有幫助。 如果你沒有讓檢查工具的工具提示持續存在，當你使用 檢查工具 (檢查 
) 時，滑鼠覆蓋層會不斷變化。
請參閱 使用檢查工具分析頁面。
燈塔工具
Lighthouse 會針對一個網站進行一系列測試，以檢查與效能、無障礙性、SEO 及其他多項相關問題。
設定並產生報告
當 Lighthouse 工具首次在 DevTools 中開啟時，焦點會放在 「產生報告 」按鈕上。 預設情況下，表單會設定為在模擬 3G 連線上，透過行動模擬為每個類別執行報告。
要更改報表設定，請使用 Shift + Tab 將焦點置於 Lighthouse 設定，或回到瀏覽模式中返回。
當你準備好執行報告時，請回到 「產生報告 」按鈕並按下 Enter。
Focus 會進入一個模式視窗，並有 取消 按鈕，讓你可以退出審核。 你可能會聽到一連串的耳機聲，審核執行並多次刷新頁面。
已知問題：
- 配置表單的不同區塊目前沒有標示任何
fieldset元素。 在瀏覽模式中瀏覽這些控制區塊可能會比較容易，以了解每個區段對應哪些控制項。 - 審核結束後不會有耳罩或現場區域公告。 通常稽核大約需要30秒，之後你就能直接瀏覽結果。 使用瀏覽模式可能是取得結果最簡單的方法。
導航燈塔報告
燈塔報告依照各審計類別組織。 報告開頭列出各類別的分數。 這些分數也是連結，你可以直接跳到相關章節。 每個章節內都有可 details 擴充的元素，包含與通過或未通過稽核相關的資訊。 預設情況下，只有未通過的稽核會被顯示。 每個部分最後都會有一個 details 包含所有通過審核的元素。
要執行新的稽核，請使用 Shift+Tab 退出報告並選擇 產生報告 按鈕。
另請參閱
注意事項
本頁部分內容基於 Google 創作與 分享 的作品，並依 據創用CC 姓名標示 4.0 國際授權條款進行修改。 原始頁面由Rob Dodson撰寫。
本作品採用 創用CC 姓名標示4.0國際授權條款授權。