コフス技術ブログ

ブラウザでHoverしている状態をInspectする方法

Hoverしている状態の時のみDOMが出現する時(例えばmouseleaveするとDOM自体が消えちゃう)等、スクリプトによる特定の条件下の時だけ出現するDOMをブラウザの検証ツールで確認したい時は、単純にスクリプトを停止させるとよいです。

スクリプトの停止は大抵のブラウザにてサポートされており、Chrome + macOSの場合はSourceタブにてCommand + \で任意のタイミングでスクリプトを停止させることができます。
ブレークポイントを指定して特定の行で停止させることもできます。

またマウスを用いたUIを操作している最中等、検証ツールからマウスが離れる必要のある場合は数秒後にスクリプトを停止させるようにするとよいです。
例えば5秒後にスクリプトを停止させる場合は、以下のようにします。

// 5秒後にdebuggerを開く
setTimeout(()=> {debugger}, 5000)

これをConsoleタブにて実行すると、5秒後にスクリプトが停止します。
5秒間にInspectしたいUIの操作をしておくと、停止した時にその状態をInspectすることができます。