Untersuchen der Dropdown-Menüs im neuen Chrome
Ich bin in Chrome Version 41.0.2272.101 m (neuestes) und dieses Update ist durcheinander. Sie sagen, wenn ein Inspektor geöffnet ist, wird jede DOM-Änderung auf dem geänderten Element (wie in Firefox) mit Purpur blinken, aber jetzt kann ich kein verschobenes Objekt mehr untersuchen (auch wie in FF, weshalb ich nicht mag) um es zu verwenden, wenn Front-End-Entwicklung gemacht wird.
Ich spreche über js ausgelöste Ereignisse, wie zum Beispiel Superfische. Vorher konnte ich das Menü schwenken und das Menü mit dem Inspektor abdecken, und das Menü würde geöffnet bleiben, und ich könnte in den Inspektor sehen, welche Pseudoelemente erstellt werden, die Polsterungen und dergleichen direkt ändern und die Änderung sehen. Wenn ich nun das Menü schwenke und mit der rechten Maustaste klicke, um es zu untersuchen, wird das Menü geschlossen, und ich kann es nicht sehen!
Ich habe versucht, den Inspektor herumzuschleppen, aber nichts half. Dieses neue "Feature" ist höllisch nervig. Gibt es eine Möglichkeit, js-ausgelöste Ereignisse zu untersuchen, ohne Unterbrechungspunkte auf Elemente zu setzen (was zwar funktioniert, aber irgendwie nervt)?
5 Antworten
Bewegen Sie den Cursor mit der Maus über das Element und drücken Sie F8 (dies funktioniert nur in Chrome), um die Skriptausführung anzuhalten. Der Hover-Status bleibt für Sie sichtbar. Wenn Sie sich auf einem Mac befinden, müssen Sie möglicherweise die Systemdruckanzeige öffnen und das Kontrollkästchen "Alle F1, F2 usw. verwenden" aktivieren.
Ich denke, Sie können den CSS-Editor in Chrome verwenden, um einen Status, z. B. den Status von "Hover", anzuwenden.
In den Entwicklertools wählen Sie ein Element aus. Auf der rechten Seite hast du ein Quadrat mit einem Pfeil darüber. Klicken Sie darauf und Sie können einen Status auswählen. Wählen Sie zum Beispiel hovered und Sie werden sowohl Ihr Fenster als auch Ihr CSS-Update sehen, als würde das Element gerade verschoben.
Sie können ein Intervall festlegen, das den Inhalt eines bestimmten Elements jede Sekunde in der JS-Konsole ausgibt. Lassen Sie das in der Konsole fallen und öffnen Sie das Dropdown.
%Vor%HTML im Fenster Elemente ändern
- Bewegen Sie den Mauszeiger über das Menü , das Sie im Modus Prüfen geöffnet haben möchten.
- Beobachten Sie die HTML-Änderungen für das Element im Element -Fenster zwischen geöffneten / geschlossenen Zuständen des Menüs. Meistens ist dies eine Stiländerung.
- Wenn Sie herausfinden, was das Menü öffnet und schließt (in diesem Beispiel eine Klasse mit dem Namen "dropdownOpen" zwischen den Menüzuständen hinzugefügt und entfernt wird), doppelklicken Sie im HTML-Code des Elements und nehmen Sie die erforderlichen Änderungen vor. In diesem Beispiel fügen wir die Klasse "dropdownOpen" zu
<li>element. hinzu
Verwenden von jQuery im Fenster Konsole
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" wie folgt hinzu:
%Vor% 
Tags und Links google-chrome