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 !
— :)
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.
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.