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

152

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

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.

lukas.pukenis
quelle
2
Ihre Frage hat geholfen, obwohl ich mit den Quellen nicht zum Haltepunkt gekommen bin. Ich habe das folgende Skript in der Konsole ausgeführt: document.body.addEventListener('mouseup',function(){ debugger; })Das hat mich in eine Pause gebracht und ich konnte die erstellten Elemente überprüfen.
HMR
Du rockst. Hatte genau dieses Problem mit einem React-Select-Steuerelement, bei dem ich den HTML-Code der Listenelemente nicht anzeigen konnte, da der Teilbaum jedes Mal gelöscht wurde, wenn ich wegklickte. Benötigte die Artikel-IDs, um Klicks mit Selenium zu automatisieren. Vielen Dank!
Araisbec

Antworten:

177

(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.

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

arxpoetica
quelle
1
Um mögliche Verwirrung zu vermeiden, wird der Debugger angehalten, während Sie das Ereignis auslösen, auch bekannt als Eingabe eines Ortsnamens. Wenn der Bildschirm angehalten wird, drücken Sie einfach die Wiedergabetaste am DOM selbst und Sie können das Ereignis auslösen.
Dylan Pierce
Dies funktioniert nicht, wenn die Seite den Rechtsklick erfasst hat und beim Rechtsklick ihre eigene Sache macht.
Michael
Dies funktioniert nicht für den ersten von zwei Dialogen im selben Container
Still_learning
@Still_learning Können Sie erklären, was Sie unter "zwei Dialogen im selben Container" verstehen?
Arxpoetica
<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 der
Datenbank eingehen
92

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.
Joseph Tinoco
quelle
3
Perfekt!! Dies macht genau das, was ich wollte
Daniel Loiterton
2
Ich habe festgestellt, dass dies nur funktioniert, wenn Sie die Entwicklertools bereits auf der Registerkarte "Quellen" geöffnet haben.
Hbulens
3
Der Code wird zwar nicht mehr ausgeführt, aber das Element ist immer noch verschwunden (ich verwende React).
Lorem Ipsum Dolor
Mein Chrome sagt F8 oder Crtl + \ (nicht Crtl + /). Auch das Crtl + \ funktioniert in meinem Fall nicht ...
Roger Veciana
Dies funktioniert nicht in Popups der Google-Videosteuerung. Das Steuerelement scheint ausgeblendet zu werden, sobald Sie die Taste drücken, und ist vor dem Einfrieren vollständig ausgeblendet.
Michael
18
  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.

Mojtaba
quelle
1
Dies ist der schnellste und stabilste Weg, um verschwindende Elemente zu debuggen ^
warmwhisky
8

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.
Schwarze Mamba
quelle
1
Danke, danke für die ausführliche Anleitung! Nach einer Show extremer Geschicklichkeit - Klicken auf eine Schaltfläche, Drücken Ctr + Shift + C, Bewegen der Maus, um über das Element zu schweben, und Drücken F8innerhalb von anderthalb Sekunden - habe ich mein Element endlich in den inspizierbaren Modus versetzt
Still_learning
2

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

Sebastian Zartner
quelle
Auch Chrome hat einen anständigen Inspektor. Das Problem ist - ein Rechtsklick auf ein Element lässt es in meinem Fall verschwinden. Chrome hat auch Break on DOM mutate. Das Problem dabei - ich weiß nicht, um welches Element es sich handelt, da es dynamisch generiert wird
lukas.pukenis
1
Ich habe gerade meine Antwort bearbeitet, um einen Hinweis zu geben, wie ich herausfinden kann, um welches Element es sich handelt.
Sebastian Zartner
2

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 : Geben Sie hier die Bildbeschreibung ein
  5. Wir können sehen, dass alle Elemente da sind

Hier ist eine Demo:

Geben Sie hier die Bildbeschreibung ein

Raja David
quelle
2

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.

Vivekanand Panda
quelle
0

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.

matpol
quelle
1
Ja. Ich habe angegeben, dass Änderungen in DOM zu schnell erfolgen und die Seite DOM stark modifiziert, so dass dies wirklich keine Lösung ist, da ich meine benötigten Elemente nicht überall von einer Reihe von Änderungen unterscheiden kann :)
lukas.pukenis
Sie können versuchen, mithilfe von console.log zu verfolgen, was gerade passiert, z. B. zu Beginn der Funktion, die Sie überprüfen möchten, können Sie Objekt-CSS usw. anzeigen. Oder Sie können die Änderungen verlangsamen, bis Sie wissen, dass sie ordnungsgemäß funktionieren, und dann die Geschwindigkeit auf Ihre Werte ändern Ich möchte, dass es zB in jquery versteckt ist ('langsam')
matpol
Das Problem ist - es ist nicht meine eigene Codebasis, es ist eine alte, große Codebasis, bei der mir das einfache Durchsuchen der Dateien nichts bringt. :)
lukas.pukenis
Sie können auch im Inspektor anzeigen, welche Dateien von der Seite verwendet werden. Ich würde sie entfernen, bis sie kaputt gehen, dann in die Datei schauen, die sie kaputt gemacht hat, und von dort aus gehen. Sie können auch immer die tatsächlichen Dateien durchsuchen.
Matpol
2
Wie wäre es damit: stackoverflow.com/questions/10213703/…
matpol
0

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

Hani Yassine
quelle