[解決済み】ブラウザで消える要素を検査するにはどうすればいいですか？

質問

マウスを離すと消えてしまう要素を検査するにはどうしたらよいですか？

IDもクラスも何もわからないが、検査したい。

私が試した解決策

コンソール内でjQueryセレクタを実行する $('*:contains("some text")') というのも、この要素は hidden ではなく、おそらく DOM ツリーから削除されているからです。

DOMツリーの変更を手動で検査しても、何が変更されたのか気づくのが早すぎるようで、何も得られません。

成功です。

イベントブレークポイントで成功したことがあります。具体的には、私の場合はマウスダウンです。ただ Sources-> Event Listener Breakpoints-> Mouse-> mousedown をChromeで表示します。その後、インスペクションしたい要素をクリックし、その中の Scope Variables 便利な案内が表示されました。

解決するには？

(この回答は、Chromeデベロッパーツールにのみ適用されます。 以下のアップデートを参照してください)。

消えてしまった要素を含む要素を探します。その要素を右クリックして、 "Break on... > Subtree Modifications." を適用すると、要素が消える前にデバッガーが一時停止し、一時停止した状態で要素と対話できるようになります。

2019年10月22日更新 v.70のリリースにより、ついにFireFoxがこのようなデバッグに対応したようです。 2 3 :

2020年9月15日更新。 Chromeには、[⌘]+[P]コマンドメニューまたはグローバル環境設定から取得できる「フォーカスされたページをエミュレートする」オプションがあり、まさにこのニーズに対応しています。 5 - h/t @sulco on Twitter