Untersuchen Sie Elemente, die nur angezeigt werden, wenn ein anderes Element mit der Maus überfahren/eingegeben wird

Oft möchte ich ein Element (z. B. Tooltip) überprüfen, das nur angezeigt wird, wenn ein anderes Element mit der Maus überfahren/eingegeben wird. Das erscheinende Element wird über das mouseenter-Event 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 den Mauszeiger auf das Element bewegen, dann das JS des Browsers anhalten und es erfolgreich überprüfen kann?

Versuchen Sie beispielsweise, die Tooltips von Twitter Bootstrap zu überprüfen: http://getbootstrap.com/javascript/#tooltips.

In Chrome 38.0.2094.0 ist es ziemlich einfach.

So wird es aussehen:

Schritt für Schritt:

1. Öffnen Sie die DevTools im Bereich „Quellen“.
2. Lassen Sie den Tooltip erscheinen, 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 verwenden Sie das Lupensymbol oben links, um den Tooltip auszuwählen

Wenn der Tooltip wegen 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 Entwicklertools (der Link)
3. Klicken Sie mit der rechten Maustaste und wählen Sie „Elementstatus erzwingen“ und wählen Sie „:hover“
4. Überprüfen Sie den CSS-Tooltip

Sowohl der Web Inspector von Safari als auch der von Chrome bieten Kontrollkästchen, in denen Sie die Option aktivieren können :active, :focus, :hover und :visited Zustand eines Elements. Die Verwendung dieser könnte noch einfacher sein.

Safari:

Chrom:

Es gibt auch eine andere knifflige Methode:

1. Gehen Sie über das Element, das Ihren Tooltip erscheinen lässt.
2. Klicken Sie mit der rechten Maustaste, um das Kontextmenü zu öffnen.
3. Bewegen Sie Ihre Maus zu Ihrem Dev-Tool-Fenster und klicken Sie mit der linken Maustaste auf eine beliebige Stelle im Dev-Tool-Bereich.

Ihr Tooltip bleibt sichtbar, Sie können ihn dann auf der Registerkarte Element einsehen.

Auf Chrome getestet. Scheint bei 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'));

(bei reinem Javascript kann die spezifische Syntax je nach Browser variieren)

Noch einfacher mit jQuery:

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

In deinem Beispiel (http://getbootstrap.com/javascript/#tooltips), öffnen Sie die Konsole und geben Sie beispielsweise Folgendes ein:

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

Und der Tooltip erscheint im DOM 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 gem. Antwort) oder tippen debugger; (was sein Skriptäquivalent ist)