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-> mousedown
in Chrome. Danach klickte ich auf das Element, das ich untersuchen wollte, und Scope Variables
sah darin einige nützliche Anweisungen.
quelle
document.body.addEventListener('mouseup',function(){ debugger; })
Das hat mich in eine Pause gebracht und ich konnte die erstellten Elemente überprüfen.Antworten:
(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 :
quelle
<v-container><v-dialog></v-dialog><v-dialog></v-dialog></v-container>
- In meinem Fall wird der erste Dialog nur angezeigt, bis die Daten von derEine alternative Methode in Chrome:
quelle
setTimeout(()=>{debugger;},5000);
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:
javascript:(function(){setTimeout(()=>{debugger;},5000);})();
Wenn Sie dies das nächste Mal verwenden möchten, klicken Sie einfach auf dieses Lesezeichen.
quelle
Ich verwende dort Chrome auf einem Mac. Ich habe die obigen Schritte ausgeführt, aber ich werde versuchen, ein bisschen mehr zu erklären:
F8
oderCommand(Window) \
. Der Bildschirm wird in einem statischen Zustand angehalten, und das Element verschwindet beim Hoverout nicht.quelle
Ctr + Shift + C
, Bewegen der Maus, um über das Element zu schweben, und DrückenF8
innerhalb von anderthalb Sekunden - habe ich mein Element endlich in den inspizierbaren Modus versetztIn Firebug gibt es dafür verschiedene Lösungen:
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
quelle
In meinem Fall habe ich die Option " Rekursiv erweitern " in Google Chrome verwendet:
Die Schritte sind:
Hier ist eine Demo:
quelle
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.
quelle
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.
quelle
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
quelle