ページのキーボード ナビゲーションのユーザー補助機能をテストするとします。Tab キーでページ内を移動すると、フォーカスのある要素が非表示になり、フォーカス リングが消えることがあります。フォーカスされた要素を DevTools でトラッキングするには:
- コンソールを開きます。
[Create Live Expression]()をクリックします。
詳しくは、Live Expressions を使用して JavaScript 値をリアルタイムで確認するをご覧ください。
タイプ
document.activeElement
。[Live Expression] UI の外側をクリックして保存します。
document.activeElement
の下に表示される値は、式の結果です。この式は常にフォーカスされた要素を表すため、どの要素がフォーカスされているかを常に追跡できるようになりました。
- 結果にカーソルを合わせると、ビューポートでフォーカスされている要素がハイライト表示されます。
- 結果を右クリックして [要素で表示] を選択すると、[要素] パネルの [DOM ツリー] に要素が表示されます。
- 結果を右クリックして [Store as global variables] を選択し、コンソールで使用できるノードへの変数参照を作成します。