Siehe: Schwebezustand in den Chrome Developer Tools

Ich möchte den :hoverStil für einen Anker sehen, auf dem ich in Chrome schwebe . In Firebug gibt es eine Dropdown-Liste mit Stilen, mit der ich verschiedene Status für ein Element auswählen kann.

Ich kann in Chrome anscheinend nichts Ähnliches finden. Vermisse ich etwas

Jetzt können Sie beide Pseudoklassenregeln sehen und sie den Elementen aufzwingen.

:hoverKlicken Sie auf den kleinen :hovText oben rechts, um die Regeln wie im Bereich "Stile" anzuzeigen .

Um ein Element in den :hoverStatus zu zwingen , klicken Sie mit der rechten Maustaste darauf und wählen Sie :hover.

Zusätzliche Tipps zum Elementfenster in den Verknüpfungen zu Chrome Developer Tools .

EDIT: Diese Antwort war vor der Fehlerbehebung, siehe die Antwort von tnothcutt.

• Klicken Sie mit der rechten Maustaste auf das Element, aber bewegen Sie den Mauszeiger NICHT vom Element weg, sondern halten Sie ihn im Schwebezustand.
• Wählen Sie das Element über die Tastatur prüfen, wie im Aufwärtspfeil und dann die Eingabetaste.
• Schauen Sie in den Entwicklertools unter Übereinstimmende CSS-Regeln nach, Sie sollten sehen können: Hover.

PS: Ich habe dies an einem Ihrer Frage-Tags versucht.

Ich wollte den Schwebezustand in meinen Bootstrap-Tooltips sehen. Das Erzwingen des Status: hover in Chrome dev Tools hat nicht die erforderliche Ausgabe erstellt, aber das Auslösen des Mouseenter-Ereignisses über die Konsole hat in Chrome den Trick ausgeführt. Wenn jQuery auf der Seite vorhanden ist, können Sie Folgendes ausführen:

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

Es gibt verschiedene Möglichkeiten, HOVER STATE- Stile in den Chrome Developer Tools anzuzeigen .

Methode 01

Methode 02

Mit Firefox Default Developer Toll

Mit Firebug

Falls es hilft, scheint dies im neuesten Chrome (47.0.2526.106) einfacher zu sein:

Untersuchen Sie das Element und klicken Sie dann auf die drei weißen Punkte in der linken Rinne:

Wählen Sie dann den gewünschten Elementstatus aus dieser Dropdown-Liste:

Ich glaube nicht, dass es einen Weg gibt, dies zu tun. Ich habe eine Feature-Anfrage eingereicht . Wenn es einen Weg gibt, werden die Entwickler bei Google sicher darauf hinweisen und ich werde meine Antwort bearbeiten. Wenn nicht, müssen wir abwarten und zuschauen. (Sie können das Thema markieren, um dafür zu stimmen)

Kommentar 1 von Chrome-Projektmitglied : In 10.0.620.0 werden im Bedienfeld „Stile“ die Hover-Stile für das ausgewählte Element angezeigt, jedoch nicht: Aktiv.

(Stand dieses Beitrags) Die aktuelle Version des stabilen Kanals ist 8.0.552.224.

Sie können Ihre stabile Kanalinstallation von Google Chrome durch den Beta-Kanal oder den Dev-Kanal ersetzen (siehe Early Access Release Channels ).

Sie können auch eine sekundäre Chrome-Installation installieren , die noch aktueller ist als der Dev-Kanal .

... Der Canary Build wird noch häufiger aktualisiert als der Dev-Kanal und wird vor der Veröffentlichung nicht getestet. Da der Canary-Build manchmal unbrauchbar ist, kann er nicht als Standardbrowser festgelegt und zusätzlich zu den oben genannten Kanälen von Google Chrome installiert werden. ...

Ich weiß, dass das, was ich mache, die Problemumgehung ist, aber es funktioniert perfekt und so mache ich es jedes Mal.

Gehen Sie dann folgendermaßen vor:

• Stellen Sie zunächst sicher, dass die Chrome Developer Tools nicht angedockt sind.
• Bewegen Sie dann einfach eine beliebige Seite des Dev Tools-Fensters in die Mitte des Elements, das Sie untersuchen möchten, während Sie den Mauszeiger bewegen.

• Bewegen Sie zum Schluss den Mauszeiger über das Element, klicken Sie mit der rechten Maustaste und überprüfen Sie das Element. Bewegen Sie die Maus in das Dev Tools-Fenster, und Sie können mit Ihrem Element spielen: Hover CSS.

Prost!

Ich habe ein Menü debuggt hover mit Chrome debuggt und dies getan, um den Schwebestatuscode anzeigen zu können:

ElementsKlicken Sie im Bedienfeld auf die Toggle Element stateSchaltfläche und wählen Sie:hover .

In der ScriptsPlatte geht Event Listeners Breakpointsim rechten unteren Bereich und wählen SieMouse -> mouseup .

Überprüfen Sie nun das Menü und wählen Sie das gewünschte Feld aus. Wenn Sie die Maustaste loslassen, sollte sie anhalten und Ihnen den Schwebezustand des ausgewählten Elements im ElementsBedienfeld anzeigen (siehe StylesAbschnitt).

Das Ändern des Schwebestatus in Chrome ist ziemlich einfach. Führen Sie die folgenden Schritte aus:

1) Klicken Sie mit der rechten Maustaste auf Ihre Seite und wählen Sie Inspizieren

2) Wählen Sie das Element aus, das Sie im DOM prüfen lassen möchten

3) Wählen Sie das Pin-Symbol (Elementstatus umschalten)

4) Dann kreuzen Sie den Schwebeflug an

Jetzt können Sie den Schwebezustand des ausgewählten DOM im Browser sehen!

Ich konnte den Stil sehen, indem ich die folgenden von Babiker vorgeschlagenen Schritte befolgte: "Klicken Sie mit der rechten Maustaste auf das Element, aber bewegen Sie den Mauszeiger NICHT vom Element weg, sondern halten Sie ihn im Schwebezustand. Wählen Sie das Element über die Tastatur überprüfen, wie in Pfeil nach oben und dann Eingabetaste. "

Befolgen Sie zum Ändern des Stils die obigen Schritte und dann - Ändern Sie die Registerkarte Ihres Browsers, indem Sie Strg + TAB auf der Tastatur drücken. Klicken Sie dann wieder auf die Registerkarte, die Sie debuggen möchten. Ihr Schwebebildschirm wird weiterhin angezeigt. Fahren Sie nun vorsichtig mit der Maus zum Entwickler-Tool-Bereich.

In meinem Fall möchte ich den Bootstrap-Tooltip synchronisieren. Aber die oben genannten Methoden funktionieren bei mir nicht. Ich denke, Bootstrap hat dies durch so etwas wie ein Maus-In / Out-Ereignis implementiert.

Wenn ich mit der Maus über eine Schaltfläche fahre, wird unter der Schaltfläche ein Bruder-HTML-Element generiert. Wählen Sie daher das übergeordnete Element der Schaltfläche auf der Registerkarte "Elemente" des Fensters "Entwicklertools" aus, bewegen Sie den Mauszeiger über die Schaltfläche und "Strg + C". dann kann ich den Quellcode einfügen, der den generierten Code enthält. Suchen Sie zuletzt den generierten Code und fügen Sie ihn dem Quellcode durch "Als HTML bearbeiten" auf der Registerkarte "Elemente" hinzu.

Hoffe es kann jemandem helfen.

Ich denke, dies ist in Chrome kein Problem mehr, sondern nur für den Fall. Ich habe dieses jQuery- Skript geschrieben , um das DOM zu überprüfen, wenn ich mich mit der TAB-Taste bewege.

Wenn geändert, um 'mouseover' zu verwenden, würde dies folgendermaßen aussehen:

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

Sie können es einfach ändern, um den Ereignishandler zu entfernen, wenn Sie auf ein Element klicken oder etwas tun, bei dem Sie anhalten möchten.