ブラウザで消える要素を検査するにはどうすればよいですか？

マウスが離れると消える要素をどのように検査できますか？

ID、クラスなどなんかわかりませんが調べてみたいです。

私が試したソリューション：

コンソール内でjQueryセレクターを実行します$('*:contains("some text")')が、主に要素が非表示ではなく、おそらくDOMツリーから削除されたため、運がありませんでした。

DOMツリーの変更を手動で検査しても、何が変更されたかを知るには速すぎるように見えるため、何も得られません。

成功：

イベントブレークポイントで成功しています。具体的には-私の場合はマウスダウン。Sources-> Event Listener Breakpoints-> Mouse-> mousedownChromeで移動するだけです。その後、検査したい要素をクリックし、中Scope Variablesにはいくつかの便利な指示がありました。

（この回答はChromeデベロッパーツールにのみ適用されます。以下の更新を参照してください。）

消える要素を含む要素を見つけます。要素を右クリックして、[ブレーク...]> [サブツリーの変更]を適用します。これにより、要素が消える前にデバッガーの一時停止がスローされます。これにより、一時停止状態の要素と対話できます。

2019年10月22日の更新：v。70のリリースにより、FireFoxはついにこの種のデバッグをサポートするように見えます2 3：

Chromeの代替方法：

• devTools（F12）を開きます。
• 「ソース」タブを選択します。
• 目的の要素が表示されている間にF8（またはCtrl + /）を押します。これにより、スクリプトの実行が中断され、表示されているとおりにDOMが「凍結」されます。
• この時点から、Ctrl + Shift + Cを使用して要素を選択します。

1. コンソールを開く
2. 入力する setTimeout(()=>{debugger;},5000);
3. Enterキーを押します

要素が表示されるまで5秒かかります。表示されたら、デバッガーがヒットするまで待ちます。再開しない限り、要素で遊ぶことができ、消えることはありません。

上記の手順を毎回繰り返さないようにするための便利なヒント：

これをブックマークレットとして追加します。

1. ページをブックマーク
2. この新しいブックマークを編集
3. URL /場所を次で置き換えます： javascript:(function(){setTimeout(()=>{debugger;},5000);})();

次回これを使用するときは、このブックマークをクリック/タップしてください。

MacでChromeを使用しています。上記の手順を実行しましたが、もう少し説明しようと思います。

1. 右クリックして要素を検査します。
2. ソースタブに移動します。
3. 次に、要素にカーソルを合わせます。
4. 次に、キーボードF8 または を使用しますCommand(Window) \。静的な状態で画面を一時停止し、ホバーアウト時に要素が消えることはありません。

Firebugでは、このためのさまざまなソリューションがあります。

1. HTMLパネル内でBreak On Mutateを使用できます。（これを使用すると、それがどの要素であるかを確認することもできます）
2. 要素を右クリックして、[ Firebugで要素を検査 ]を選択できます

また、特定のイベントを一時的にブロックする方法を要求する問題551に従うこともできます。

編集：

どの要素であるかを確認するには、HTMLパネルオプションの [変更を強調表示]、[変更を展開] 、[変更をビューにスクロール]を有効にして、要素をHTMLパネル内に表示することもできます。

セバスチャン

私の場合、Google Chromeで再帰的に展開オプションを使用しました：

手順は次のとおりです。

1. ドロップダウンフィールドを調べる
2. 動的DOMを見つけます（紫色のハイライト）
3. その動的DOMを右マウスクリックします
4. [再帰的に展開 ]を選択します。
5. すべての要素があることがわかります

ここにデモがあります：

要素をマウスでホバーし、F8（Chromeではthis）を押してスクリプトの実行を一時停止します。ホバー状態は表示されたままになります。

[ソース]タブが表示されます。[要素]タブに戻ります。このタイムコードは消えません。

要素の下のインスペクタに表示される要素と非表示になる要素を表示できます。表示されているときに要素に移動すると、要素が非表示になったり、ステータスが変化したときにcssが変化したりするのを確認できるはずです。

これは、firefoxのfirebugまたはchromeのビルド済みインスペクターで可能です。

同じ問題がありましたが、Firefoxを使用しています。inspect要素を開くと解決策が見つかるとすぐに消えます。4つのダッシュ（設定）を開き、Web開発者>デバッガーに移動し、すぐにF8キーを押します。キックしてデベロッパーツールを開いたことを検出する前