wake-up-neo.net

So verwenden Sie den Chrome Web Inspector zum Anzeigen von Hover-Code

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 den Mauszeiger über die Schaltfläche bewegen und können ihn daher nicht im Inspektor verwenden. Gibt es Verknüpfungen oder andere Möglichkeiten, um dies im Inspektor zu erreichen?

96
Bo.

Jetzt können Sie beide Regeln für den Pseudoklassenstil sehen und sie für Elemente erzwingen. 

Um die Regeln wie :hover im Bereich "Stile" anzuzeigen, klicken Sie auf die kleine Schaltfläche mit dem gepunkteten Kästchen oben rechts.

Um ein Element in den :hover-Zustand zu bringen, klicken Sie mit der rechten Maustaste darauf.

Alternativ können Sie den Seitenlistenbereich der Ereignislistener-Haltepunkte im Bedienfeld „Skripts“ verwenden und auswählen, um in Mouseover-Handlern anzuhalten.

152

Alternativ können Sie den Seitenlistenbereich der Ereignislistener-Haltepunkte im Bedienfeld „Skripts“ verwenden und auswählen, um in Mouseover-Handlern anzuhalten.

14

Das ist etwas nervig, aber Sie müssen mit der rechten Maustaste auf das Element klicken. Wählen Sie dann den Mauszeiger über dem Link und verwenden Sie die Tastatur. Dies sollte Ihnen die CSS für die Schwebepseudoklasse für das ausgewählte Element anzeigen.

Ich hoffe, sie machen das in zukünftigen Builds etwas einfacher. 

4
purpletonic

In Chrome:

Sie können auch mit der Maus auf ein Element fahren und dann auf CTRL+SHIFT+C klicken, um das Element zu untersuchen.

In Firefox:

 enter image description here

in firebug:

enter image description here

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

4
T.Todua

Ich bin nicht sicher, ob ich Ihre Frage richtig verstehe, aber wenn Sie den Code für den Ereignishandler sehen möchten, können Sie einfach das Element überprüfen und im Seitenbereich der Elementlisten von Event Listeners nachsehen. Eine andere Möglichkeit besteht darin, die Schaltfläche Pause in Scripts zu drücken Zeigen Sie das Element an und schweben Sie einfach das Element . Der Debugger wird bei der ersten Anweisung des ersten Ereignishandlers angehalten.

1
loislo

Bitte schauen Sie unten auf den Link, um zu antworten

Siehe: Hover-Status in den Chrome Developer Tools

0
Santosh Khalse