Verwendung des Chrome Web Inspector zum Anzeigen des Hover-Codes

99

Die Verwendung von Chromes Web Inspector zum Anzeigen von Code ist sehr nützlich. Aber wie sehen Sie zum Beispiel den Hover-Code für eine Schaltfläche? Sie müssen die Maus über die Schaltfläche bewegen und können sie daher nicht im Inspektor verwenden. Gibt es im Inspektor Verknüpfungen oder andere Möglichkeiten, um dies zu erreichen?

css google-chrome google-chrome-devtools web-inspector Bo.
quelle
2
Ist das nicht ein Duplikat davon? stackoverflow.com/questions/4515124/…
Mixologic
Beantwortet das deine Frage? Siehe:
Schwebezustand

Antworten:

156

Jetzt können Sie beide Regeln des Pseudoklassenstils anzeigen und sie den Elementen aufzwingen.

Um die Regeln wie :hoverim Bereich "Stile" anzuzeigen, klicken Sie oben rechts auf die Schaltfläche mit dem kleinen gepunkteten Feld.

Um ein Element in den :hoverStatus zu zwingen , klicken Sie mit der rechten Maustaste darauf.

Alternativ können Sie den Seitenleistenbereich "Ereignis-Listener-Haltepunkte" im Bedienfeld "Skripte" verwenden und in den Mouseover-Handlern eine Pause einlegen.

Travis Northcutt
quelle
1
In Chrome 48 (und früher) wurde dieses gepunktete Feld durch ein Stecknadelsymbol ersetzt, das beim Bewegen des Mauszeigers den Elementstatus umschaltet anzeigt. Dann wählen Sie "Hover" aus der Dropdown-Liste.
Sameers
15

Alternativ können Sie den Seitenleistenbereich "Ereignis-Listener-Haltepunkte" im Bedienfeld "Skripte" verwenden und in den Mouseover-Handlern eine Pause einlegen.

Yury Semikhatsky
quelle
6

Es ist etwas ärgerlich, aber Sie müssen mit der rechten Maustaste auf das Element klicken und dann mit der Maus über den Link fahren, mit der Tastatur den Link "Element untersuchen" auswählen und die Eingabetaste drücken. Dies sollte Ihnen das CSS für die Hover-Pseudoklasse für das ausgewählte Element anzeigen.

Wir hoffen, dass sie dies in zukünftigen Builds etwas einfacher machen.

purpletonisch
quelle
Gut zu wissen, aber ja, es ist sehr frustrierend, dass die Maus über dem Link schweben muss ... auch wenn Sie nur mit der Tastatur im Inspect Element-Fenster herumstöbern. Was für ein Ärgernis!
Chad Schultz
Der eigentliche Vorgang, bei dem das Element zum :hoverStatus ( as in the accepted answer) gezwungen wird , wird auch durch Klicken mit der rechten Maustaste auf das Element> Überprüfen und Beibehalten des Zeigers dort erreicht. Verwenden Sie dann die Tastaturtasten, um den Pseudocode zu überprüfen. Vielen Dank für diese funktionierende Alternative .... also nicht eigentlich ein Ärgernis !
:)
5

In Chrome:

Sie können auch mit der Maus über ein Element fahren und dann klicken CTRL+SHIFT+C, um dieses Element zu überprüfen.

In Firefox:

Geben Sie hier die Bildbeschreibung ein

im Feuerkäfer:

Geben Sie hier die Bildbeschreibung ein

Quelle: https://stackoverflow.com/a/11272205/2165415

T.Todua
quelle
1

Ich bin mir nicht sicher, ob ich Ihre Frage richtig verstehe, aber wenn Sie den Ereignishandlercode anzeigen möchten, können Sie einfach das Element überprüfen und den Seitenleistenbereich der Ereignislistener des Elementbedienfelds anzeigen. Eine andere Möglichkeit besteht darin, einfach die Pause-Taste im Skriptfenster zu drücken und den Mauszeiger über das Element zu bewegen. Der Debugger stoppt bei der ersten Anweisung des ersten Ereignishandlers.

Loislo
quelle
Könnten Sie etwas genauer sagen, wie Sie dies tun? Ein typischer Fall wäre ein Knopf, den ich mag, und ich möchte sehen, wie der Schwebeeffekt auf die gleiche einfache Weise wie bei einer normalen Inspektion erzielt wird.
Bo.
0

Bitte schauen Sie auf den unten stehenden Link, um eine Antwort zu erhalten

Siehe: Schwebezustand in den Chrome Developer Tools

Santosh Khalse
quelle
Der Link läuft möglicherweise ab und macht Ihre Antwort unbrauchbar. Bitte geben Sie in Ihrer Antwort einige Informationen an, um dies zu verhindern.
Bojidar Stanchev