追蹤元素焦點

凱斯巴斯克
Kayce Basques
Twitter GitHub Glitch

假設您正在測試網頁的鍵盤導覽無障礙功能。使用 Tab 鍵瀏覽頁面時，由於含有焦點的元素處於隱藏狀態，焦點環有時會消失。如何在開發人員工具中追蹤焦點元素：

  1. 開啟控制台。

  2. 按一下「Create Live Expression」圖示 建立即時運算式。

    建立即時運算式。

    如需詳細資訊，請參閱「使用即時運算式監控 JavaScript 值」。

  3. 輸入 document.activeElement。

  4. 按一下「Live Expression」(即時運算式) UI 以外的位置來儲存。

您在 document.activeElement 下方看到的值是運算式的結果。因為這個運算式始終代表聚焦的元素，因此您現在可以隨時追蹤聚焦的元素為何。

  • 將滑鼠遊標懸停在結果上，即可醒目顯示可視區域中目前焦點的元素。
  • 在結果上按一下滑鼠右鍵，然後選取「Showal in Elements Panel」(在元素面板中顯示)，即可在「Elements」(元素) 面板的「DOM 樹狀結構」中顯示元素。
  • 在結果上按一下滑鼠右鍵，然後選取「Store as 全域變數」，建立可用於主控台的節點變數參照。