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

119

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 .

Don P.
quelle
9
Nur zu Ihrer Information, wenn das Element aufgrund von CSS anstelle von JS angezeigt wird, können Sie es erzwingen :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.
MMM

Antworten:

226

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
Irgendein Typ
quelle
1
@YuriyGalanter Es ist über das Fernglas-Symbol oben links verfügbar. Klicken Sie einfach auf das Symbol und dann auf den Tooltip :)
Šime Vidas
3
Ja, ich habe ein GIF hinzugefügt, damit Sie leichter sehen können, was ich tue.
Einige Guy
2
@DonnyP Ich habe verwendet byzanz-record. Es ist ein Paket, mit dem Sie bekommen können sudo apt-get install byzanz.
Einige Guy
5
Es gibt auch LICEcap , das einen Teil des Bildschirms direkt in einem superoptimierten GIF aufzeichnet. Windows, OS X und Linux.
Fregante
2
@ bfred.it LICEcap ist für Linux nicht verfügbar. Siehe diese Github-Ausgabe zum Thema. Scheint, als hätten die Leute Erfolg mit WINE .
Isaac Gregson
15

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:

Die Kontrollkästchen in Safari

Chrom:

Die Kontrollkästchen in Chrome

zıəs uɐɟəʇs
quelle
5
Der Tooltip wird nicht durch :hoverStile ausgelöst .
Šime Vidas
2
Firebug auf Firefox hat das gleiche (Minus :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
Izkata
1
@Izkata Für Firefox nativen Entwickler - Tools rechten Maustaste auf das Element in den Brotkrumen oder der HTML / DOM - Baum, und wählen Sie aus :hover, :activeoder :focus.
Kiran Price
4

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.

Nicolas Forney
quelle
1
So habe ich es in der Vergangenheit gemacht, aber die Antwort von @ SomeGuy ist der beste und einfachste Weg.
John Washam
@ JohnDubya Nein, das ist es wirklich nicht. Es mag der offizielle Weg sein, aber es ist sicherlich nicht einfacher. Es sind viel zu viele Schritte erforderlich.
MiniRagnarok
Das mache ich normalerweise, aber es funktioniert nicht immer.
Synetech
3

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).

blgt
quelle
1
Während Sie das Element untersuchen, können Sie dennoch andere Ereignisse (wie z. B. 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.
MMM