Schwebeelement in Chrome untersuchen?

Ich versuche mithilfe der Entwicklertools von Chrome anzuzeigen, wie QuickInfos auf einer Website strukturiert sind. Selbst wenn ich mit der Maus über das Element schwebe und das Element "inspiziere", wird für den Tooltip im HTML-Code nichts angezeigt. Ich weiß, dass ich den Stil einstellen kann :hover, aber ich kann das HTML oder CSS des Tooltips immer noch nicht sehen.

Irgendwelche Ideen?

Ich habe tatsächlich einen Trick gefunden, um dies mit den Twitter Bootstrap-Tooltips zu tun. Wenn Sie die Entwicklungswerkzeuge (F12) auf einem anderen Monitor öffnen, bewegen Sie den Mauszeiger über das Element, um den Tooltip aufzurufen, und klicken Sie mit der rechten Maustaste, als würden Sie "Element überprüfen" auswählen. Wenn Sie dieses Kontextmenü geöffnet lassen, verschieben Sie den Fokus auf die Entwicklungswerkzeuge. Das HTML für den Tooltip sollte neben dem Element angezeigt werden, für das es einen Tooltip im HTML gibt. Dann können Sie es betrachten, als wäre es ein anderes Element. Wenn Sie zu Chrome zurückkehren, verschwindet der HTML-Code.

Irgendwie komisch, aber es hat bei mir funktioniert, also dachte ich mir, ich würde es teilen.

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 zum Anzeigen des Fensters in der oberen rechten Ecke der Konsole, um die Konsole in einem anderen Fenster zu öffnen.

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

F8 wird das Debuggen anhalten.

Fahren Sie mit der Maus über den Tooltip und drücken Sie, F8während er angezeigt wird.

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

Sie müssen lediglich den Tooltip als solchen erzwingen

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

Jetzt wird der Tooltip unabhängig vom Schwebezustand angezeigt.

Scrollen Sie unten im DOM nach unten, wo Sie das Markup sehen sollten.

Update siehe cneuros Kommentar zu Bootstrap 3.

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

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

$($0).tooltip('show')

Klicken f12Sie auf die Registerkarte Konsole 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 brechen 5 seconds. Anschließend können Sie das Zielelement überprüfen

(Beispiel: Bewegen Sie den Mauszeiger über das Element und warten Sie 5 Sekunden.

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

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

1. In der Konsole:, Ausführen:

    const F12 = 123
    window.addEventListener('keydown', function(event) { 
      if (event.keyCode === F12 ) {
        debugger; 
      }
    });

2. Element mit Inspektor hervorheben

3. Drücken Sie F12

Sie können das Element jetzt mit angehaltenem JavaScript untersuchen, damit sich das DOM nicht ändert.

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 Befehl + Option + I (Mac).
• Wählen Sie im DevTools-Fenster die Registerkarte Quellen .
• Bewegen Sie den Mauszeiger über das Element, das Sie untersuchen möchten, um den Tooltip sichtbar zu machen.
• Drücken Sie F8 (Windows / Linux / Mac), um die Skriptausführung anzuhalten. Das Hauptfenster wird grau und ein Popup "Im Debugger angehalten" wird angezeigt.
• Wählen Sie im DevTools-Fenster die Registerkarte Elemente
• Bei Bootstrap-Tooltips wird der Tooltip als letzter <div>in der angezeigt<body>

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

Überprüfen Sie mit den devtools von Chrome das enthaltende / übergeordnete Element des Tooltips. Klicken Sie auf der Registerkarte "Elemente" mit der rechten Maustaste auf das Container-DOM-Element und wählen Sie "Unterbrechen"> "Teilbaumänderungen". Wenn Sie das nächste Mal mit der Maus über den Teil des DOM fahren, in dem sich der Tooltip befindet, wird der JS-Code angehalten, sodass Sie den Inhalt des Tooltips überprüfen können.

Folge diesen Schritten

1. InspectFenster in Chrom öffnen .

2. Platzieren Sie die Maus über dem Tooltip.

3. Drücken Sie F8

   Die JS-Ausführung wird angehalten, und Sie können den Tooltip überprüfen.

4. Drücken Sie F8erneut, um die Ausführung zu starten und F10zu debuggen.

Hier ist eine einfache Lösung: Wenn Sie über dynamische Tooltips verfügen, können Sie diese "persistent" machen, indem Sie das Triggerereignis (vorübergehend) in ändern click. Dies hat zur Folge, dass der Tooltip nur bei einem Click-out verschwindet:

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

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

1) Öffnen Sie das Inspektionsfenster, indem Sie auf F12 klicken

2) Gehen Sie zur Registerkarte Quelle (neben der Konsole).

3) Bewegen Sie nun den Mauszeiger über das zu inspizierende Element und halten Sie die Maus dort.

4) Verwenden Sie die Tastatur (Tabulatortaste oder Umschalttaste + Tabulatortaste), 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 Schwebeelement wird eingefroren. Sie können jetzt alles tun

Es ist so einfach, diese Tooltips zu bearbeiten.

Schritt 1 : Überprüfen Sie das Element mit dem Tooltip. Stellen Sie sicher, dass es in devtools blau hervorgehoben ist.

Schritt 2 : Klicken Sie mit der rechten Maustaste auf das Element (im devtools-Teil) und wählen Sie unter Break on: Attributänderungen aus

Schritt 3 : Bewegen Sie den Mauszeiger über das inspizierte Element, und über der Site wird eine graue Überlagerung mit einem kleinen Text angezeigt: Im Debugger angehalten

am oberen Rand Ihres Bildschirms

Schritt 4 : Klicken Sie auf den blauen Pfeil, bis der Schwebezustand ausgewählt ist.

Schritt 5 : Überprüfen und bearbeiten Sie den Tooltip

Ich hatte Probleme damit, also ging ich zur Dokumentation und überprüfte den Tooltip, der bereits auf der Seite gerendert ist. Das hat mir geholfen, die Dom-Struktur des Tooltips zu sehen und entsprechend zu bearbeiten.

In Chome unter Linux kann dies für JS-generierte Tooltips erreicht werden, z. B. für Referenzen in WikiPedia, indem folgende Schritte ausgeführt werden:

Öffnen Sie wie oben angegeben die Entwicklungswerkzeuge mit F12. Öffne sie in einem anderen Fenster. Markieren Sie den Tooltip und klicken Sie auf Strg-Umschalt-C (Der HTML-Inspektor). Wenn Sie sich über die Spitze bewegen, wird im Entwicklungsfenster der entsprechende Abschnitt angezeigt.

Wenn Sie die Spitze offen halten müssen, wenn Sie mit der Maus darüber fahren, um sie im anderen Fenster genauer untersuchen zu können, klicken Sie mit der rechten Maustaste auf den Tooltip, lassen Sie das Kontextmenü geöffnet und klicken Sie auf das Fenster dev dev tools. In diesem Szenario bleibt der Tipp im Wikipedia-Fenster.

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

Aus irgendeinem Grund funktionierten die hier angegebenen Antworten unter Windows nicht für mich. Ich konnte den Tooltip überprüfen, indem ich die Entwicklungswerkzeuge öffnete, dann mit der Maus über das Element fuhr, das den Tooltip aufruft, und dann mit der rechten Maustaste auf dieses Element klickte (nicht auf den Tooltip). Bewegen Sie dann den Cursor in das Inspektorfenster und scrollen Sie nach unten. Das Tooltip-Element sollte noch vorhanden sein.

Die Entwicklungswerkzeuge bieten eine Möglichkeit, ein schwebendes Element wie einen Tooltip zu untersuchen.

1 - Öffnen Sie die Entwicklungswerkzeuge mit F12.

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

3 - Wählen Sie das übergeordnete Element aus, das den Tooltip enthält.

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

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!

Eine andere Lösung habe ich für dieses Problem gefunden. Drücken Sie in der mobilen oder Tablet-Ansicht in Chrome in den Chrome Dev-Tools Strg + Umschalt + M, um die mobile Ansicht in Chrome anzuzeigen. Klicken Sie auf (Tap) auf Quick - Info div und Sie können es mit inspizieren Rechtsklick auf Tooltip

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

Bewegen command-Sie den Mauszeiger im Chrome-Fenster über das Element, das das Popover auslöst, drücken Sie, wie oft Sie sich auf die Konsole konzentrieren müssen, und geben Sie dann ein debugger. Das wird die Seite einfrieren; Anschließend können Sie das Element auf der Registerkarte Elemente überprüfen.

Es ist erwähnenswert, dass das Umschalten des: hover-Status innerhalb der dev-Tools nur dann Auswirkungen hat, wenn der Hinweistext zunächst über CSS: hover-Regeln aktiviert wird. Der Umschalter wendet den Schwebezustand nur zu Renderzwecken auf das Element an, löst jedoch kein entsprechendes JavaScript-Mouseover-Ereignis aus.

Viele Frameworks wie AngularJS hängen Tooltip-HTML dynamisch über JavaScript an den unteren Rand des Dokumentkörpers an, wenn ein Zielelement bewegt wird, sodass das Bewegen und Überprüfen des Zielelements nicht hilfreich ist.

Die Antwort von @ joeyyang hat in diesem Szenario sehr gut für mich funktioniert.

Eine der einfachsten Möglichkeiten, die ich gefunden habe, ist:

1. Öffnen Sie die Chrome-Entwicklungstools an der Seite

2. Bewegen Sie den Mauszeiger über das Element

3. Rechtsklick

4. Klicken Sie auf Entwickler-Tools

5. Jetzt können Sie Stile überprüfen und ändern