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

Kayce Basques

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

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

2. [Create Live Expression]（ライブ式を作成）アイコン をクリックします。

   

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

3. タイプ document.activeElement。

4. [Live Expression] UI の外側をクリックして保存します。

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

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