Wie kann ich verschwindende Elemente in einem Browser überprüfen?

Wie kann ich ein Element untersuchen, das verschwindet, wenn sich meine Maus entfernt?

Ich weiß nicht, ob es sich um einen Ausweis, eine Klasse oder etwas anderes handelt, möchte ihn aber überprüfen.

Lösungen, die ich ausprobiert habe:

Führen Sie den jQuery-Selektor in der Konsole aus $('*:contains("some text")'), hatten Sie jedoch kein Glück, da das Element nicht ausgeblendet, sondern wahrscheinlich aus dem DOM-Baum entfernt wurde.

Das manuelle Überprüfen des DOM-Baums auf Änderungen gibt mir nichts, da es einfach zu schnell zu sein scheint, um zu bemerken, was sich geändert hat.

ERFOLG:

Ich war erfolgreich mit Event-Haltepunkten. Speziell - Mousedown in meinem Fall. Gehen Sie einfach Sources-> Event Listener Breakpoints-> Mouse-> mousedownin Chrome. Danach klickte ich auf das Element, das ich untersuchen wollte, und Scope Variablessah darin einige nützliche Anweisungen.

(Diese Antwort gilt nur für Chrome Developer Tools. Siehe Update unten.)

Suchen Sie ein Element, das das verschwindende Element enthält. Klicken Sie mit der rechten Maustaste auf das Element und wenden Sie "Pause ein ...> Teilbaumänderungen" an. Dies löst eine Debugger-Pause aus, bevor das Element verschwindet, sodass Sie in einem angehaltenen Zustand mit dem Element interagieren können.

Update 22. Oktober 2019: Mit der Veröffentlichung von Version 70 scheint FireFox diese Art des Debuggens endlich zu unterstützen. 2 3 :

Eine alternative Methode in Chrome:

• Öffnen Sie devTools (F12).
• Wählen Sie die Registerkarte "Quellen".
• Drücken Sie F8 (oder Strg + /), während das gewünschte Element angezeigt wird. Dadurch wird die Skriptausführung unterbrochen und das DOM genau so "eingefroren", wie es angezeigt wird.
• Verwenden Sie ab diesem Zeitpunkt Strg + Umschalt + C, um das Element auszuwählen.

1. Konsole öffnen
2. Eintippen setTimeout(()=>{debugger;},5000);
3. Drücken Sie Enter

Jetzt haben Sie 5 Sekunden Zeit, um Ihr Element anzuzeigen. Warten Sie, bis der Debugger angezeigt wird. Solange Sie nicht fortfahren, können Sie mit Ihrem Element spielen und es verschwindet nicht.

Nützlicher Tipp, um zu vermeiden, dass die oben genannten Schritte jedes Mal wiederholt werden:

Fügen Sie dies als Lesezeichen hinzu:

1. Lesezeichen für jede Seite setzen
2. Bearbeiten Sie dieses neue Lesezeichen
3. Ersetzen Sie die URL / den Speicherort durch: javascript:(function(){setTimeout(()=>{debugger;},5000);})();

Wenn Sie dies das nächste Mal verwenden möchten, klicken Sie einfach auf dieses Lesezeichen.

Ich verwende dort Chrome auf einem Mac. Ich habe die obigen Schritte ausgeführt, aber ich werde versuchen, ein bisschen mehr zu erklären:

1. Klicken Sie mit der rechten Maustaste und gehen Sie, um das Element zu überprüfen.
2. Gehen Sie zur Registerkarte Quellen.
3. Bewegen Sie dann den Mauszeiger über das Element.
4. Dann mit Tastatur F8 oder Command(Window) \ . Der Bildschirm wird in einem statischen Zustand angehalten, und das Element verschwindet beim Hoverout nicht.

In Firebug gibt es dafür verschiedene Lösungen:

1. Sie können Break On Mutate im HTML-Bereich verwenden. (Damit können Sie auch herausfinden, um welches Element es sich handelt)
2. Sie können mit der rechten Maustaste auf das Element klicken und Element mit Firebug untersuchen auswählen

Möglicherweise möchten Sie auch der Ausgabe 551 folgen , in der Sie nach einer Möglichkeit gefragt werden, bestimmte Ereignisse vorübergehend zu blockieren.

Bearbeiten:

Um herauszufinden , welches Element es ist , dass Sie auch die ermöglichen können HTML - Panel Optionen Änderungen markieren , erweitern Änderungen und Scroll Änderungen in der Ansicht auf das Element sichtbar zu machen in dem HTML - Panel.

Sebastian

In meinem Fall habe ich die Option " Rekursiv erweitern " in Google Chrome verwendet:

Die Schritte sind:

1. Überprüfen Sie das Dropdown-Feld
2. Finden Sie das dynamische DOM (das lila Highlight)
3. Klicken Sie mit der rechten Maustaste auf dieses dynamische DOM
4. Wählen Sie Rekursiv erweitern :
5. Wir können sehen, dass alle Elemente da sind

Hier ist eine Demo:

Bewegen Sie den Mauszeiger über das Element und drücken Sie F8 (dies in Chrome), um die Skriptausführung anzuhalten. Der Schwebezustand bleibt für Sie sichtbar.

Sie gelangen auf die Registerkarte Quellen. Gehen Sie zurück zur Registerkarte Elemente. Dieser Zeitcode verschwindet nicht.

Sie können die Elemente anzeigen, die im Inspektor unter Elemente angezeigt werden und verschwinden. Wenn Sie zu dem Element navigieren, wenn es sichtbar ist, sollten Sie sehen können, dass es verschwindet oder dass sich sein CSS ändert, wenn sich der Status ändert.

Dies ist mit Firebug in Firefox oder dem eingebauten Inspector in Chrom möglich.

Ich hatte das gleiche Problem, aber ich benutze Firefox. Es verschwindet, sobald ich das Inspect-Element öffne. Ich habe eine Lösung gefunden: Öffnen Sie die 4 Striche (Einstellungen). Gehen Sie zu Webentwickler> Debugger und drücken Sie sofort F8. Dies ist die Verknüpfung für die Pause, die das Skript stoppt bevor es losgeht und feststellt, dass Sie die Entwicklertools geöffnet haben