Überprüfen Sie das Element, das nur angezeigt wird, wenn ein anderes Element mit der Maus über- oder eingegeben wurde

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 .

In Chrome 38.0.2094.0 ist das ziemlich einfach.

So wird es aussehen:

Schritt für Schritt:

1. Öffnen Sie die DevTools im Quellenbedienfeld
2. Lassen Sie den Tooltip angezeigt werden, indem Sie den Mauszeiger über die Schaltfläche bewegen
3. Drücken Sie F8, um die Seite einzufrieren
4. Wechseln Sie zum Bedienfeld „Elemente“ und wählen Sie mithilfe des Lupensymbols oben links den Tooltip aus

Wenn der Tooltip aufgrund von CSS angezeigt wird, können Sie in diesem Fall Folgendes tun:

Schritt für Schritt:

1. Öffnen Sie die DevTools
2. Wählen Sie das auslösende Element in den Entwicklungswerkzeugen aus (der Link)
3. Klicken Sie mit der rechten Maustaste, wählen Sie "Elementstatus erzwingen" und wählen Sie ": Hover".
4. Überprüfen Sie den CSS-Tooltip

Sowohl Safari und Chrome Web Inspector bietet Kontrollkästchen , wo Sie die hin- und herschalten :active, :focus, :hoverund :visitedZustand eines Elements. Die Verwendung dieser könnte noch einfacher sein.

Safari:

Chrom:

Es gibt noch einen anderen kniffligen Weg:

1. Gehen Sie über das Element, durch das Ihr Tooltip angezeigt wird.
2. Klicken Sie mit der rechten Maustaste, um das Kontextmenü zu öffnen.
3. Bewegen Sie die Maus zu Ihrem Entwicklungswerkzeugfenster und klicken Sie mit der linken Maustaste auf eine beliebige Stelle im Entwicklungswerkzeugfenster.

Ihr Tooltip bleibt sichtbar. Sie können ihn dann auf der Registerkarte Element überprüfen.

Auf Chrome getestet. Scheint unter Firefox nicht zu funktionieren.

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

document.getElementById('id').dispatchEvent(new Event('event-type'));

(mit reiner Javascript-spezifischer Syntax kann je nach Browser variieren)

Noch einfacher mit jQuery:

$('#id').trigger('event-type');

Öffnen Sie in Ihrem Beispiel ( http://getbootstrap.com/javascript/#tooltips ) die Konsole und geben Sie Folgendes ein:

$("button:contains('Tooltip on right')").mouseenter();

Der Tooltip wird im DOM angezeigt und kann manuell überprüft / geändert werden:

<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>

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 eingeben debugger;(was dem Skript entspricht).