2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【小ネタ】GoogleChromeでオンマウス時にしか表示されないDOMのデバッグ方法

Last updated at Posted at 2020-03-24

どんなときに役立つの?

タイトルにもあるとおり、オンマウス時にしか表示してくれない要素のデバッグ時に役立ちます。
(ツールチップやオンマウス時にだけ表示されるプレビューのDOM内容確認、CSSをブラウザ上で確認/調整など)

一応環境

macOS : Mojave 10.14.6
GoogleChrome : 80.0.3987.149

多分どちらも関係なく、Windowsでもできるはず(未検証)

やり方

検証ツールを開いて Sourcesタブ を開いたあと、オンマウス要素など表示させてから F8 キーを押して停止させる。

※たまに F8が反応してくれないときがあります。そのときはもう一度Sourcesタブをクリックしてあげてください。

実際にやっているとこ

F8で停止することで、DOM要素を確認できる!

after.gif

普通にやろうとすると、inspectで選択ができず、DOM要素をみることができない。

before.gif

よきWEBデバッグライフを!

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?