ホバーしたときにだけ出現する要素の CSS を DevTools で調べる方法がわかりますか?(2 問あります)

イベントによって制御されている場合、Force state で :hover を選択しても出現する要素を調べることはできませんが、調べる方法がないわけではありません。ここでは例を見ながら実際にその方法を試してみます。
2021.08.07

ホバーをしたときに現れる要素、ここでは例として Material Design でいう Tooltips のようなものを想定します。これらの要素に当てられている CSS を Chrome DevTools を使って、コードに直接変更を加えることなく調べる方法を考えていきます。

2 つの問題を以下のページに用意してみたので、是非問いてみてください。

問題2つのサイトのキャプチャ

出題のサイトのコードも以下に公開しています。

問題 1 の解説

問題 1 では Tooltip の表示に CSS の :hover 擬似クラスを使用しています。このような場合には特に苦労することはありません。

Devtool の Elements から対象の要素を選択し、右クリックすると出現するポップアップのメニュー

Devtool の Elements から対象の要素を選択し、右クリックすると出現するポップアップのメニューから Force state の中にある :hover を選択してみましょう。

要素の左側にある黄色い丸のマーク

すると要素の左側に黄色い丸のマークが表示されているはずです。これで :hover の状態が維持されるようになりました。

::before 疑似要素の CSS

これで、hover 時に出現する ::before 擬似クラスを選択して、どういった CSS が当てられているのか調べることができます。

Elements の Styles の中にある :hov

この Force state の設定は Elements の Styles の中にある :hov を選択することで、簡単に切り替えることもできます。

実際の切り替え動作

パッと切り替えられて便利なので、個人的にはこちらでの切り替えがおすすめです。

問題 2 の解説

問題 2 では Tooltip の表示に onMouseEnter / onMouseLeave イベントを使用し、onMouseEnter 時に表示させ、onMouseLeave で非表示にしています。

この方法で Tooltip が作成されている場合、:hover を有効にする問題 1 の解答で使った方法では先述のイベントがトリガされるわけではないので Tooltip を表示させることはできません。

適切なタイミング、ここではサブツリーの変更時にブレークポイントを設定していきます。

subtree modificationsが選択されている

DevTools の Elements から対象の要素を選択し、右クリックすると出現するメニューから Break on の中にある subtree modifications を選択してみましょう。ここでの選択肢は以下のページで解説されています。

例えば Mateial UI の Tooltip ではサブツリーが変更されず、属性が変更されるため属性の変更時にブレークポイントを設定する必要があります。そのような場合には attribute modifications を選択してください。

要素の左側に青い丸のマークが表示されている

いずれかを選択すると、要素の左側に青い丸のマークが表示されているはずです。これでブレークポイントが設定されました。

ステップ実行

ホバーすると設定されたブレークポイントのおかげでステップ実行ができるようになりました。Tooltip が表示されるまで実行しましょう。

これで hover 時に追加されている要素を選択できるようになりました。

まとめ

問題 2 についてはもしかすると別解とかあるのかな、と気になっています(この記事を書いた動機でもあります)。もしご存知の方がいれば教えてもらえると嬉しいです。

追記

上記のサイトで非常に便利な方法がわかりやすく紹介されていたのでリンクさせていただきます。F8 は知りませんでした、便利ですね!