読者です 読者をやめる 読者になる 読者になる

chromeのコンソールでページ上の要素にフォーカスを当てる

未分類

長いことchromeを使って開発しているが、開発コンソールについてはまだまだ未知の機能が多い。 今日初めて、コンソール上からページ内の要素にフォーカスを当てる機能があることを知った。

開発コンソールを開き、「Elements」タブを選択すると画面内の要素がHTMLで表示される。 この時、タグを右クリックすると「:focus」と出てくるのでこれを選ぶ。 すると、そのタグの横にオレンジ色のマークが付き、指定したタグの画面上の要素にフォーカスが当たった状態になる。 解除するときはもう一度右クリックし同じ項目を選び直せば良い。

他にも「:active, :hover, :visited」があり、これらも同様に扱うことができる。