it-swarm.com.de

Hover-Element in Chrome prüfen?

Ich versuche mit den Entwicklertools von Chrome zu sehen, wie Tooltips auf einer Website strukturiert sind. Selbst wenn ich über dem Objekt schwebe, wenn ich "Element inspizieren" zeigt, wird für den Tooltip in der HTML-Datei nichts angezeigt. Ich weiß, ich kann den Style auf :hover setzen, aber ich kann immer noch nicht die HTML- oder CSS-Datei des Tooltips sehen. 

Irgendwelche Ideen?

65
Skitterm

Mit den Tooltips von Twitter Bootstrap habe ich tatsächlich einen Trick gefunden. Wenn Sie die Entwicklungswerkzeuge (F12) auf einem anderen Monitor öffnen, bewegen Sie den Mauszeiger über das Element, um die QuickInfo aufzurufen. Klicken Sie mit der rechten Maustaste, als würden Sie 'Element prüfen' auswählen. Wenn Sie das Kontextmenü geöffnet lassen, bewegen Sie den Fokus auf die Entwicklungswerkzeuge. Die HTML-Datei für die QuickInfo sollte neben dem Element angezeigt werden, für das eine QuickInfo im HTML-Code angezeigt wird. Dann können Sie es so betrachten, als ob es ein anderes Element wäre. Wenn Sie zu Chrome zurückkehren, wird der HTML-Code nicht mehr angezeigt.

Irgendwie ein komischer Weg, aber es funktionierte für mich, also dachte ich, ich würde es teilen.

54
Justin Chmura

Sie müssen nur die QuickInfo erzwingen, um als solche angezeigt zu werden

$('.myelement').tooltip('open');

Der Tooltip wird jetzt unabhängig vom Schwebezustand angezeigt.

Scrollen Sie am unteren Rand des DOMs nach unten, wo die Markierung angezeigt werden soll.

Update cneuros Kommentar zu Bootstrap 3.

$('.myelement').tooltip('show');

Update Siehe Marko Grešaks Antwort für Chrome und anscheinend auch für Safari, $0 kann als Abkürzung für das aktuell ausgewählte Element verwendet werden. Dies scheint auch in Safari zu funktionieren.

$($0).tooltip('show')
60
Adam Grant

Diese Lösung funktioniert ohne zusätzlichen Code.

Drücken Sie command-option-j, um die Konsole zu öffnen. Klicken Sie auf die Schaltfläche mit dem Fenster in der oberen rechten Ecke der Konsole, um die Konsole in einem anderen Fenster zu öffnen.

Bewegen Sie dann im Chrome-Fenster den Mauszeiger über das Element, das den Popover auslöst, und drücken Sie command-`. Sie müssen sich jedoch auf die Konsole konzentrieren, und geben Sie debugger ein. Dadurch wird die Seite eingefroren, und Sie können das Element auf der Registerkarte Elemente überprüfen. 

58
joeyyang

F8 hält das Debuggen an. 

Bewegen Sie den Mauszeiger über den Tooltip und drücken Sie F8, während er angezeigt wird. 

Sie können jetzt den Inspektor verwenden, um sich das CSS anzusehen. 

46
dwjohnston

Für mich funktionierte die akzeptierte Antwort nicht: Durch Klicken auf DevTools wurde der ToolTip sofort geschlossen.

Ich habe jedoch https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution gefunden, was mir geholfen hat:

  1. In der Konsole :, Ausführen: window.addEventListener('keydown', function(e) { if (e.keyCode == 123) debugger; });
  2. Markieren Sie das Element mit dem Inspektor

  3. Drücken Sie F12

Sie können das Element jetzt überprüfen, wobei JavaScript angehalten ist, damit sich das DOM nicht ändert.

19
mikemaccana

Einzelfensterantwort ohne Codierung

Keine der anderen Antworten ist ganz richtig oder hat genug Details, also hier ist mein Versuch.

  • Öffnen Sie die DevTools von Chrome mit F12/Strg + Umschalt + I (Windows/Linux) oder Befehlstaste + Wahltaste + I (Mac).
  • Wählen Sie die Registerkarte Sources im DevTools-Fenster.
  • Bewegen Sie den Mauszeiger über das Element, das Sie untersuchen möchten, um die QuickInfo sichtbar zu machen.
  • Drücken Sie F8 (Windows/Linux/Mac), um die Skriptausführung anzuhalten. Das Hauptfenster wird ausgegraut und das Popup "Im Debugger angehalten" wird angezeigt.
  • Wählen Sie im DevTools-Fenster die Registerkarte Elemente
  • Bei Bootstrap Tooltips wird der Tooltip als letzter <div> im <body> angezeigt.
6
TobyLL

Keine Codelösung für JS-aktivierte Tooltips:

Mit Chrome's devtools prüfen Sie das übergeordnete/übergeordnete Element der QuickInfo. Klicken Sie in der Registerkarte "Elemente" mit der rechten Maustaste auf das Container-DOM-Element, und wählen Sie "Aufbrechen"> "Teilbaumänderungen". Wenn Sie das nächste Mal über den Teil des DOM fahren, in dem der Tooltip untergebracht ist, wird der JS-Code angehalten, und Sie können den Inhalt des Tooltips überprüfen. 

2
clhenrick

Hier ist eine einfache Lösung: Wenn Sie dynamische Tooltipps haben, können Sie sie "persistent" machen, indem Sie das Triggerereignis (vorübergehend) in click ändern. Dies bewirkt, dass der Tooltip nur bei einem Klick ausgeblendet wird:

$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

Auf diese Weise kann es leicht mit den Debugging-Tools von FF oder Chrome geprüft werden.

2
lxg

Aus irgendeinem Grund funktionierten die hier gegebenen Antworten nicht für mich unter Windows. Ich konnte den Tooltip überprüfen, indem ich die Entwicklungswerkzeuge öffne, dann über dem Element, das den Tooltip anzeigt, schweben und dann mit der rechten Maustaste auf das Element klicken (nicht auf den Tooltip). Bewegen Sie dann den Cursor in das Inspektorfeld und scrollen Sie nach unten. Das Tooltip-Element sollte noch vorhanden sein.

0
Nolan Lindeke

Klicken Sie auf f12, gehen Sie zur Konsolenregisterkarte und fügen Sie Folgendes hinzu:

setTimeout(()=> {debugger},5000)

Dies gibt Ihnen 5 Sekunden Zeit, um zu tun, was Sie wollen, und es wird bei 5 seconds unterbrochen. Dann können Sie das Zielelement untersuchen

0
Ali Kleit

1) Öffnen Sie das Inspect-Fenster, indem Sie auf F12 klicken

2) Gehe zur Registerkarte "Quelle" (neben der Konsole)

3) Fahren Sie nun mit der Maus über das zu inspizierende Element.

4) Verwenden der Tastatur (Tab oder Umschalt + Tab), um das Steuerelement auf die Pause-Taste oder F8 zu bewegen Siehe Bild

5) Wenn der Tastaturfokus auf der Wiedergabetaste liegt. Drücke Enter. Ihr Hover-Element wird eingefroren, Sie können jetzt alles tun

0
Rajan

Mit den Dev-Werkzeugen können Sie ein schwebendes Element wie einen Tooltip untersuchen.

1 - Öffnen Sie die Entwicklungswerkzeuge mit F12.

2 - Wählen Sie die Registerkarte "Elemente".

3 - Wählen Sie das übergeordnete Element aus, das die QuickInfo enthält.

4 - Klicken Sie auf "..." (in der Zeile des übergeordneten Elements) und wählen Sie anschließend "Aufbrechen"/"Teilbaumänderungen" (siehe Abbildung unten).

Set a Break on parent element

5 - Kehren Sie schließlich zur Anwendung zurück und lassen Sie den Tooltip anzeigen. Es sollte die Ausführung blockieren, nachdem der Tooltip sichtbar wird

Hoffe, es kann für jemanden nützlich sein!

0

Ich hatte Probleme damit, also ging ich zur Dokumentation und inspizierte den bereits auf der Seite gerenderten Tooltip. Das hat mir geholfen, die dom-Struktur des Tooltips zu sehen und entsprechend zu bearbeiten.

0
philip

In Chome unter Linux kann dies für von JS generierte QuickInfos wie beispielsweise für Verweise auf WikiPedia wie folgt erreicht werden:

Wie oben erwähnt, öffnen Sie die Entwicklungswerkzeuge mit F12. Öffnen Sie sie in einem anderen Fenster. Markieren Sie die QuickInfo und klicken Sie auf Strg-Umschalt-C (Der HTML-Inspektor). Wenn Sie sich über die Spitze bewegen, wird im Dev-Fenster der entsprechende Abschnitt angezeigt.

Wenn Sie den Tipp geöffnet halten müssen, wenn Sie die Maus von der Maus nehmen, um ihn im anderen Fenster genauer untersuchen zu können, klicken Sie mit der rechten Maustaste auf den Tooltip, lassen Sie das Kontextmenü und klicken Sie auf das Dev-Tool-Fenster. In diesem Szenario bleibt der Tipp im Wikipedia-Fenster stehen.

Bis zu einem gewissen Grad funktioniert es auch mit Bootstrap-Tipps.

0
user1806949