it-swarm.com.de

Wie debuggen Sie CSS-/Javascript-Hover-Probleme?

Oft möchte ich CSS-Layoutprobleme debuggen, bei denen DOM-Änderungen durch Javascript als Reaktion auf ein Hover-Ereignis oder andere CSS-Regeln aufgrund des: hover-Selektors auftreten.

Normalerweise würde ich Firebug verwenden, um das Element zu überprüfen, das mir Probleme bereitet, und zu sehen, welche CSS-Eigenschaften es waren und woher diese Eigenschaften kommen. Wenn jedoch Schwebeflug involviert ist, wird dies unmöglich, denn sobald Sie die Maus in das Firebug-Bedienfeld bewegen, werden die Elemente, an denen Sie interessiert sind, nicht mehr angezeigt. Die anzuwendenden CSS-Regeln sind jedoch anders und (im Fall) von JS schwebt) das DOM wird geändert.

Gibt es eine Möglichkeit, den Status des DOMs "einzufrieren" und die Anwendung von: hover, um das DOM zu überprüfen, wie es war während ein Hover-Ereignis?

Alle anderen Ideen zum Debuggen dieser Art von Problem sind natürlich willkommen.

70
Jason Creighton

Fügen Sie dem Element, das den :hover verwendet, einen onmouseover-Funktionshandler hinzu. Rufen Sie in dieser Funktion console.info(element) für das Element auf, über das Sie etwas wissen möchten.

myHoverElement.onmouseover = function() {
    console.info(document.getElementById("someotherelementofinterest"));
};

Wenn Sie dies mit aktivem Firebug ausführen, kann das Element in der Firebug-Konsole überprüft werden.

22
Matt Bridges

Sie können dies in Firebug tun, aber es ist ein bisschen "Buggy". Wenn Sie das Element untersuchen und dann aus der Registerkarte "HTML" heraus auf die Registerkarte "DOM" klicken, wird beim Klicken auf die Registerkarte "HTML" auf der Registerkarte "Stil" auf der rechten Seite eine Auswahlliste mit einem Pfeil angezeigt, in der Sie das Element auswählen können : Der Hover-Status dieses Elements muss aktiv sein. Es ist scheiße, Tabs wechseln zu müssen, damit es angezeigt wird, aber es funktioniert für mich.

44
Neum

Bei der Überprüfung von Links zeigt Firebug den Standard-CSS-Status an, d. H. Stile, die auf einen Link: angewendet werden. Standardmäßig werden die aktiven Stile: hover und: nicht angezeigt. Glücklicherweise können Sie den Status der Verknüpfung ändern, indem Sie auf Stil klicken und die entsprechende Option auswählen:

enter image description here

31
Subodh Ghulaxe

Suchen Sie in Firebug in der HTML-Ansicht in den rechten Bereich und suchen Sie nach der Registerkarte "Styles". Klicken Sie auf den Abwärtspfeil und wählen Sie :hover.

19
kelly johnson

In Firefox (v33.1.1):

  • Element prüfen (Q)
  • Klicken Sie in der DOM-Ansicht mit der rechten Maustaste auf das Element
  • wählen Sie: hover,: active oder: focus unten im Kontextmenü
5

In Chrome (Version 35):

  • Element prüfen
  • Klicken Sie im Element-Viewer mit der rechten Maustaste auf das Element.
  • Wählen Sie "Elementzustand erzwingen" ->: aktiv,: hover,: focus,: besucht
3
xonya

Einige JavaScript-Toolkits, wie z. B. Dojo, verwenden CSS-Klassen wie dijitButtonHover anstelle von: hover.

Die Registerkarte Stil: Hover-Trick funktioniert also nicht.

Stattdessen können Sie auf der Registerkarte "HTML" mit der rechten Maustaste auf den Knoten (dessen CSS-Klassen ändern) und "Bei Attributänderung aufheben" klicken.

3
Arlo

Sie können dieses Element auch überprüfen. Auf der Registerkarte "Stil" sollte ein kleiner Pfeil nach unten angezeigt werden. Es wird so etwas wie "Show User Agent", "Expandhandle Properties" enthalten, dann sollten sich 2 weitere darunter befinden (Ich vermute, dass Sie etwas untersuchen, das einen Hover-Status hat) :active und :hover und :hover sei golden.

2
ramoneguru

für CSS-Probleme finde ich das Webentwickler-Plugin von unschätzbarem Wert:

http://chrispederick.com/work/web-developer/

laden Sie es, dann stehen Ihnen 2 mögliche Werkzeuge zur Verfügung.

  1. css von Dateien auf einem beliebigen Mauselement geerbt, verwenden Sie shift-ctrl-y

  2. computed css (einschließlich eines beliebigen Inline-Stils = angewendet, der nicht in einer .css-Datei enthalten ist - oder über eine .css-Methode aus Jquery usw.) - drücken Sie shift-ctrl-f

letzteres würde auch alle auf das Element angewendeten Klassen zurückgeben.

natürlich gibt es auch andere nützliche Anwendungen, z. B. das hervorragende Debugging von Formularen, einschließlich der Bearbeitung von ausgeblendeten Feldern und Cookies (die für Penetrationstests verwendet werden können).

2

Ich hatte das gleiche Problem und stellte fest, dass Safari-Webinspektor zwar den aktuellen Status einfrieren und Inspektionen zulassen konnte, obwohl ich mit Firebug keine Hover-Objekte in Firefox untersuchen konnte. Um den Webinspektor von Safari zu aktivieren, geben Sie einfach die folgende Zeile in das Terminal ein und starten Sie Safari erneut:

defaults write com.Apple.Safari WebKitDeveloperExtras -bool true

Aktivieren Sie das Hover-Element im Browser, klicken Sie mit der rechten Maustaste und wählen Sie 'Inspect Element'. Die Seite wird in ihrem aktuellen Zustand eingefroren, sodass Sie die flüchtigen Objekte nach Herzenslust prüfen können. 

1
Michael Sibley

Es gibt keine perfekte Lösung (Mouseover/Hover-Simulationseffekt) in Firebug.

Es gibt jedoch einige Möglichkeiten, den Hover-Status in Firebug zu bearbeiten:

  1. Fügen Sie einen :active-Status zusammen mit Ihrem :hover hinzu.

    a:hover, a:active { ... }

    Wenn Sie Ihr Element mit der Maus nach unten ziehen, ziehen Sie es los und lassen Sie es wieder los. Es bleibt aktiv.

  2. Verwandeln Sie den :hover-Status in eine .hover-Klasse

    Sie können die CSS-Regel bearbeiten, indem Sie auf die Quelldatei klicken (auf der Registerkarte Stil von Firebug).

    Dann würden Sie natürlich die .hover-Klasse zu Ihrem Element hinzufügen (und entfernen).

1
Spencer

Ich weiß, dass dieser Beitrag ein bisschen alt ist, aber für diejenigen, die dies bei Google finden, habe ich ein Cross-Browser-Tool entwickelt, mit dem Sie Ihr HTML/CSS-Layout durch einfaches Bewegen der Maus visualisieren können. Sie können Elemente einfach in ihrem Hover-Status anzeigen.

HTML Box Visualizer - GitHub

0
Gabriel McAdams

In neueren Firefox-Versionen (mindestens v57 und höher) unterscheidet sich die Benutzeroberfläche des Inspektors geringfügig von der der anderen Antworten. Um den Status :active/:hover/:focus eines Elements zu aktivieren und einzufrieren, überprüfen Sie es (rechte Maustaste -> Element inspizieren) und klicken Sie im Inspektor auf

 enter image description here

Ergebnis:

 enter image description here

Quelle (Bilder sind unter CC-BY-SA v2.5, The Mozilla Contributors lizenziert)

0
balu

Ich mache oft etwas anderes CSS oder Javascript, um mein schwebendes Ereignis "einzufrieren"; Optimiere es mit Firebug zur Perfektion und setze meinen Schwebeflug wieder an seinen Platz.

0
Ecropolis

Ja, Sie können beim Auslösen des Hover-Zustands mit der rechten Maustaste auf "Element prüfen" klicken. Dies funktionierte für mich in Firebug und WebKit.

0
user1703862