Überprüfen von Dropdown-Menüs in neuem Chrome

Ich bin auf Chrome Version 41.0.2272.101 m (neueste), und dieses Update ist durcheinander. Sie sagen, wenn Sie den Inspektor geöffnet haben, dass jede DOM-Änderung mit lila auf dem geänderten Element blinkt (wie in Firefox), aber jetzt kann ich kein schwebendes Objekt inspizieren (auch wie in FF, weshalb ich es nicht mag um es bei der Front-End-Entwicklung zu verwenden).

Ich spreche von js ausgelösten Ereignissen, wie zum Beispiel Superfish. Vorher konnte ich den Mauszeiger über das Menü bewegen und das Menü mit dem Inspektor abdecken, und das Menü blieb geöffnet, und ich konnte im Inspektor nachsehen, welche Pseudoelemente erstellt wurden, die Auffüllungen und dergleichen direkt ändern und die Änderung sehen. Wenn ich jetzt den Mauszeiger über das Menü bewege und mit der rechten Maustaste darauf klicke, um es zu überprüfen, wird das Menü geschlossen und ich kann es nicht überprüfen!

Ich habe versucht, den Inspektor zu ziehen, aber nichts hat geholfen. Diese neue "Funktion" ist höllisch nervig. Gibt es eine Möglichkeit, js ausgelöste Ereignisse zu untersuchen, ohne Elemente mit Haltepunkten zu versehen (was funktioniert, aber ein bisschen nervt)?

Bewegen Sie den Mauszeiger über das Element und drücken Sie F8 (dies funktioniert nur in Chrome), um die Skriptausführung anzuhalten. Der Schwebezustand bleibt für Sie sichtbar. Wenn Sie einen Mac verwenden, müssen Sie möglicherweise die Systemeinstellungen öffnen und das Kontrollkästchen "Alle F1, F2 usw. verwenden" aktivieren (oder einfach fn + F8 verwenden).

Manchmal funktioniert es nur, wenn Sie sich auf der Registerkarte Quellen des Inspektors befinden.

Abhängig vom Menüelementtyp bin ich auf dieses Problem mit Dropdown-Eingabemenüs gestoßen. Der Grund, warum es verschwindet, wenn ich es inspiziere, ist, dass immer ein blurEreignis auf dem Element ausgelöst wird, wenn ich irgendwo außerhalb des Elements klicke.

Eine Möglichkeit, das Element zu untersuchen, besteht darin, zu verhindern, dass das Unschärfeereignis ausgelöst wird, indem der Listener für Unschärfeereignisse entfernt wird:

• Überprüfen Sie das Eingabeelement in Chrome
• Wechseln Sie zur Registerkarte Ereignis-Listener, und entfernen Sie das Unschärfeereignis

Sobald das Unschärfeereignis entfernt wurde, können Sie das Menü öffnen und überprüfen, ohne zu verschwinden

Drücken Sie in Chrome F12, um die Entwicklerkonsole zu öffnen, und klicken Sie dann auf Einstellungen (Zahnradsymbol) oder drücken Sie F1:

Suchen und aktivieren Sie dann die Option "Eine fokussierte Seite emulieren".

Auf einem Mac können Sie cmd+ drücken, \um das Skript anzuhalten, nachdem Sie die Dropdown-Liste geöffnet haben. Sie können dann shift+ cmd+ verwenden c, um Elemente zu überprüfen.

Wenn ich jetzt den Mauszeiger über das Menü bewege und mit der rechten Maustaste darauf klicke, um es zu überprüfen, wird das Menü geschlossen und ich kann es nicht überprüfen!

Ich hatte das gleiche Problem und verwendete die Option " Rekursiv erweitern " für Chrome-Entwicklungstools:

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:

Sie können ein Intervall festlegen, in dem der Inhalt eines bestimmten Elements in der JS-Konsole jede Sekunde geschrieben wird. Legen Sie dies in der Konsole ab und öffnen Sie die Dropdown-Liste.

setInterval(() => 
    console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)

In Firefox

Klicken Sie im Inspektor mit der rechten Maustaste auf einen Knoten, der das Dropdown-Menü enthält, und wählen Sie Folgendes aus:

Pause ein ...> Teilbaumänderung

Dadurch wird die Ausführung angehalten, sobald das Dropdown-Menü ... nun ... heruntergefallen ist.

Ich denke, Sie können den CSS-Editor in Chrome verwenden, um einen Status anzuwenden, z. B. den Status "Schweben".

In den Entwicklertools wählen Sie ein Element aus. Auf der rechten Seite haben Sie ein Quadrat mit einem Pfeil darüber. Klicken Sie darauf und Sie können einen Status auswählen. Wählen Sie beispielsweise "Schweben" und Sie sehen sowohl Ihr Fenster als auch Ihr CSS-Update so, als ob das Element gerade schwebt.

Keines der oben genannten Mittel hat bei mir funktioniert. Da unser Dropdown-Menü (reaktionsbasiert) bei jedem einzelnen Klick (rechts oder links) geschlossen wird, haben wir die folgende Problemumgehung herausgefunden:

• In Chrome Open-Entwicklertools
• Klicken Sie zuerst auf das Dropdown-Menü im reduzierten Zustand und lassen Sie es mit Optionen erweitern
• Klicken Sie dann unter dem Elementabschnitt mit der rechten Maustaste auf den div-Knoten (stellen Sie sicher, dass Sie nicht mit der linken Maustaste klicken, bevor Sie mit der rechten Maustaste klicken), der Details zu den Dropdown-Elementen enthält
• Wählen Sie dann die Option ' Rekursiv erweitern '.
• Dann wurden die erforderlichen Details angezeigt

Ändern HTML in der Elemente - Fenster

• Bewegen Sie den Mauszeiger über das Menü , das Sie im Inspektionsmodus geöffnet halten möchten .
• Beachten Sie die HTML - Änderungen an dem Element im Element - Fenster zwischen den offenen / geschlossenen Zustand des Menüs. Meistens ist dies eine Stiländerung.
• Wenn Sie herausfinden, wie das Menü geöffnet und geschlossen wird (in diesem Beispiel eine Klasse mit dem Namen "dropdownOpen", die zwischen den Menüzuständen hinzugefügt und entfernt wird), doppelklicken Sie auf der Registerkarte Element auf HTML und nehmen Sie die erforderlichen Änderungen vor. In diesem Beispiel fügen wir dem Element die Klasse "dropdownOpen" hinzu <li>.

Mit jQuery im Konsolenfenster

Wenn Sie dieses Verhalten wiederholen müssen, können Sie jQuery verwenden. Sie wählen das Element mit jQuery aus und nehmen die erforderlichen Änderungen in der Konsole vor . In diesem Beispiel wählen wir das Element anhand seiner ID aus und fügen ihm die Klasse "dropdownOpen" folgendermaßen hinzu:

jQuery("#menu-item-11012").addClass("dropdownOpen");