トラック要素のフォーカス

Kayce Basques

ページのキーボード ナビゲーションのユーザー補助機能をテストしているとします。Tab キーでページを移動すると、フォーカスがある要素が非表示になるため、フォーカス リングが消えることがあります。DevTools でフォーカスされている要素を追跡するには:

  1. コンソールを開きます。

  2. [ライブ エモーションを作成] ライブ式を作成する をクリックします。

    ライブ式の作成。

    詳細については、ライブ式を使用して JavaScript 値をリアルタイムで監視するをご覧ください。

  3. タイプ document.activeElement。

  4. ライブ式 UI の外側をクリックして保存します。

document.activeElement の下に表示される値は、式の結果です。この式は常にフォーカスされている要素を表すため、フォーカスされている要素を常に追跡できるようになります。

  • 結果にカーソルを合わせると、ビューポート内のフォーカスされている要素がハイライト表示されます。
  • 結果を右クリックし、[要素パネルに表示] を選択して、[要素] パネルの [DOM ツリー] に要素を表示します。
  • 結果を右クリックして [Store as global variable] を選択し、コンソールで使用できるノードの変数参照を作成します。