追蹤哪個元素有焦點

要隨時標示哪個元素有焦點，請在 控制台 工具中使用即時表達。這很有幫助，因為當你測試頁面的鍵盤導覽無障礙性時，當你按 Tab 或 Shift + Tab 來瀏覽渲染後的網頁時，網頁中的焦點環指示器有時會消失，因為有焦點的元素被隱藏或不在視野中。

使用即時表達來判斷哪個元素是焦點

要在 DevTools 的主控台中使用 Live Expression 追蹤 Tab 重點元素：

請在新視窗或分頁中開啟無障礙測試示範網頁。
要開啟 DevTools，請右鍵點擊網頁，然後選擇檢查。或者，在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。 DevTools 開啟。
如果 DevTools 裡看不到 快速檢視 工具列，按 Esc 鍵就能顯示 快速檢視 面板。
在 快速檢視 工具列中，選擇 控制台 標籤：
點擊 「建立即時表達 」 () 」按鈕。即時表達區塊出現：
在表達式文字框中，輸入以下內容： document.activeElement
點擊表達 式文字框 外以儲存即時表達式。即時表達式會被評估，結果會顯示在表達 式文字框 下方：
點擊渲染中的網頁來對焦，然後按 Tab 鍵 或 Shift+Tab 鍵在渲染頁面中移動焦點。

下方 document.activeElement 顯示的數值是該表達式的結果。當你按 Tab 鍵 在網頁元素間移動時，數 document.activeElement 值會改變：

即時運算式中的 JavaScript 程式碼會被即時評估，程式碼下方顯示的結果總是代表當前表達式的值。

即時表達數值僅以文字預覽形式顯示於 主控台 。 DOM 節點是透過標籤名稱及可選的類別或 ID 屬性來渲染的。例如：

要指示渲染網頁中哪個元素有焦點，請使用下一節所述的元素工具。

即時表達的結果 document.activeElement 僅是帶有焦點的 DOM 元素預覽。要精確知道渲染網頁中哪個元素有焦點，請使用元素工具：

在 控制台 工具中，將滑鼠移到Live Expression (document.activeElement 的結果上，位於Live Expression) 下方。

聚焦元素會在渲染網頁中標示：
右鍵點擊即時表達式的結果，然後 在元素面板中選擇「揭示」。

在元素工具中，DOM 樹會自動展開並選擇目前聚焦的 DOM 節點：

活動元素是你按 Tab 或 Shift+Tab 導覽到的網頁項目的 DOM 樹狀表示。

要在 控制台 工具中操作焦點元素，請建立一個參考：

在 控制台 工具中，將滑鼠移到Live Expression (document.activeElement 的結果上，位於Live Expression) 下方。
右鍵點擊 Live 表達式的結果，然後選擇 「儲存 outerHTML」作為全域變數。

一個新的變數名稱，類似 temp1 於 控制台 工具中，其值如下所示：
在 控制台 工具中，根據需要使用 temp1 變數來使用該元素。例如，執行 temp1.value = "cat" 以將焦點元素的值改為「cat」：