Oft möchte ich ein Element untersuchen (z. B. einen Tooltip), das nur angezeigt wird, wenn ein anderes Element mit der Maus über- / eingegeben wird. Das angezeigte Element wird über das mouseenter-Ereignis von jQuery sichtbar gemacht.
Ich kann den Tooltip nicht überprüfen, da der Tooltip verschwindet, wenn meine Maus das enthaltende Element verlässt.
Gibt es eine Möglichkeit, JS-Ereignisse anzuhalten, damit ich mit der Maus über das Element fahren, dann das JS des Browsers anhalten und es erfolgreich überprüfen kann?
Überprüfen Sie beispielsweise die Tooltips von Twitter Bootstrap: http://getbootstrap.com/javascript/#tooltips .
:hover
, indem Sie mit der rechten Maustaste auf das Element in der Elementansicht (DOM) in Dev Tools klicken, "Elementstatus erzwingen " und dann ": Hover" auswählen.Antworten:
In Chrome 38.0.2094.0 ist das ziemlich einfach.
So wird es aussehen:
Schritt für Schritt:
Wenn der Tooltip aufgrund von CSS angezeigt wird, können Sie in diesem Fall Folgendes tun:
Schritt für Schritt:
quelle
byzanz-record
. Es ist ein Paket, mit dem Sie bekommen könnensudo apt-get install byzanz
.Sowohl Safari und Chrome Web Inspector bietet Kontrollkästchen , wo Sie die hin- und herschalten
:active
,:focus
,:hover
und:visited
Zustand eines Elements. Die Verwendung dieser könnte noch einfacher sein.Safari:
Chrom:
quelle
:hover
Stile ausgelöst .:visited
, das beschränkt ist, um das Schnüffeln zu verhindern) - auf der Registerkarte HTML befindet es sich in der Dropdown-Liste "Stil" auf der rechten Seite:hover
,:active
oder:focus
.Es gibt noch einen anderen kniffligen Weg:
Ihr Tooltip bleibt sichtbar. Sie können ihn dann auf der Registerkarte Element überprüfen.
Auf Chrome getestet. Scheint unter Firefox nicht zu funktionieren.
quelle
Während die Antwort von @ SomeGuy ausgezeichnet ist (T-up für animierte Gifs), können Sie dies alternativ immer programmgesteuert tun. Öffnen Sie einfach die Konsole und geben Sie den Ereignisnamen ein
(mit reiner Javascript-spezifischer Syntax kann je nach Browser variieren)
Noch einfacher mit jQuery:
Öffnen Sie in Ihrem Beispiel ( http://getbootstrap.com/javascript/#tooltips ) die Konsole und geben Sie Folgendes ein:
Der Tooltip wird im DOM angezeigt und kann manuell überprüft / geändert werden:
Wenn Sie wie in den Kommentaren den Mauszeiger über den Seitenrahmen bewegen, können Sie andere Ereignisse auslösen, z
mouseout
. Um dies zu verhindern, können Sie drücken F8(wie in der entsprechenden Antwort) oder eingebendebugger;
(was dem Skript entspricht).quelle
mouseout
) auslösen , sodass das Problem nicht in erster Linie gelöst wird. Sie müssen bei der Auswahl sehr vorsichtig sein. Aber es ist ein alternativer Ansatz.