追蹤元素焦點

Kayce Basques
Kayce Basques
Alexandra Klepper
Alexandra Klepper

假設您要測試網頁的鍵盤導覽無障礙功能。 使用 Tab 鍵瀏覽網頁時,焦點環有時會消失,因為焦點所在的元素已隱藏。如要在開發人員工具中追蹤焦點元素,請按照下列步驟操作:

  1. 開啟 Console
  2. 按一下「建立即時運算式」

    建立有效運算式。

    詳情請參閱「使用即時運算式即時監控 JavaScript 值」。

  3. 輸入「document.activeElement」。

  4. 點選「Live Expression」介面以外的區域即可儲存。

document.activeElement 後方的值是運算式的結果。由於該運算式一律代表焦點元素,因此您可以追蹤哪個元素具有焦點。

  • 將游標懸停在結果上,即可醒目顯示檢視區塊中焦點所在的元素。
  • 在結果上按一下滑鼠右鍵,然後選取「在『元素』面板中開啟」,即可在「元素」面板的 DOM 樹狀結構中顯示該元素。
  • 在結果上按一下滑鼠右鍵,然後選取「Store as global variable」,建立節點的變數參照,以便在「Console」中使用。