どんなときに役立つの?
タイトルにもあるとおり、オンマウス時にしか表示してくれない要素のデバッグ時に役立ちます。
(ツールチップやオンマウス時にだけ表示されるプレビューのDOM内容確認、CSSをブラウザ上で確認/調整など)
一応環境
macOS : Mojave 10.14.6
GoogleChrome : 80.0.3987.149
多分どちらも関係なく、Windowsでもできるはず(未検証)
やり方
検証ツールを開いて Sourcesタブ
を開いたあと、オンマウス要素など表示させてから F8
キーを押して停止させる。
※たまに F8
が反応してくれないときがあります。そのときはもう一度Sourcesタブ
をクリックしてあげてください。
実際にやっているとこ
F8
で停止することで、DOM要素を確認できる!
普通にやろうとすると、inspectで選択ができず、DOM要素をみることができない。
よきWEBデバッグライフを!