Wie CSS / Javascript Hover-Probleme debuggen

Question

Ich finde mich oft zu debuggen CSS-Layout-Probleme zu wollen, die DOM beinhalten Änderungen von Javascript in Reaktion verursacht zu einem Hover-Ereignis oder verschiedene CSS-Regeln durch die Anwendung sich auf die. Hover-Selektor

Normalerweise würde ich Firebug das Element zu kontrollieren, die mir Mühe ist zu geben und sehen, was seine CSS-Eigenschaften waren, und wo diese Eigenschaften kommen. Wenn jedoch schwebt beteiligt ist, wird es unmöglich, denn sobald Sie mit der Maus nach unten auf das Firebug-Panel verschieben, werden die Elemente, die Sie daran interessiert sind, nicht mehr schwebte sind, Regeln die CSS, die gelten andere, und (im Fall von JS das DOM schwebt) geändert wird.

Gibt es eine Möglichkeit kann ich „Einfrieren“ der Zustand des DOM und Anwendung: schweben, um das DOM zu untersuchen, wie es war bei ein Hover-Ereignis

Jede andere Ideen, wie diese Art von Problem zu debuggen, sind natürlich willkommen.

Answer 1

eine onmouseover Funktion Handler auf das Element hinzufügen, das die :hover nimmt. Innerhalb dieser Funktion ruft console.info(element) auf welche auch immer Element Sie mögen darüber wissen.

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

Wenn Sie dies mit Firebug laufen aktiv ist, wird das Element zur Verfügung steht in der Firebug-Konsole zu überprüfen.

Answer 2

Sie können dies in Firebug tun, aber seine ein wenig „Buggy“. Wenn Sie das Element zu untersuchen und dann die auf die Registerkarte HTML klicken aus, auf das DOM Registerkarte zum Beispiel, wenn Sie auf die Registerkarte HTML gehen die „Stil“ CSS Tab auf der rechten Seite einen Pfeil im Dropdown-Selektor, in dem Sie die auswählen können : Hover-Zustand dieses Element aktiv zu sein. Sucks zu haben Tabs zu wechseln, um es zu zeigen, aber es funktioniert für mich.

Answer 3

Wenn Links Inspektion zeigt Firebug die Standard-CSS-Zustand, das heißt Arten auf eine: Link. Standardmäßig ist die: hover und: active Stile werden nicht gezeigt. Glücklicherweise können Sie den Zustand der Verbindung ändern, indem Stil klicken und die entsprechende Option wählen:

Answer 4

In Firebug, während in der HTML-Ansicht, Blick auf die rechte Seitenwand und finden Sie die „Styles“ aus. Klicken Sie auf den Pfeil nach unten und wählen Sie :hover.

Answer 5

In Firefox (v33.1.1):

• Überprüfen Sie Element (Q)
• In der DOM-Ansicht der rechten Maustaste das Element
• wählen: schweben: aktiv oder: Fokus auf der Unterseite des Kontextmenüs

Answer 6

Einige JavaScript-Toolkits, wie Dojo Verwendung CSS-Klassen wie dijitButtonHover um Stil statt. Hover

So ist der Registerkarte Stil. Hover-Trick funktioniert nicht

Stattdessen können Sie mit der rechten Maustaste auf den Knoten (die CSS-Klassen ist aus) in der Registerkarte HTML, und "Break on Attribut ändern"

Answer 7

In Chrome (Version 35):

• Überprüfen Sie Element
• Innerhalb der Elemente klicken Betrachter direkt auf das Element.
• Wählen Sie "Force-Elementzustand" ->: aktiv,: hover,: focus,: visited

Answer 8

für CSS Fragen, finde ich Web-Entwickler-Plugin von unschätzbarem Wert:

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

laden Sie es, dann haben Sie zwei mögliche Instrumente zur Verfügung.

1. geerbt CSS von Dateien auf jedem moused-over-Elemente verwenden Shift-Strg-y

2. berechnet CSS (incuding jeden inline style = aufgebracht, daß nicht in einer CSS-Datei - oder durch eine Methode aus Css jquery etc) - Presse shift-ctrl-f

würde dieser auch alle Klassen an das Element angelegt zurück.

es natürlich andere große Anwendungen hat, wie hervorragende Debuggen von Formen, einschließlich der Bearbeitung von versteckten Feldern und Cookies (die für Penetrationstests verwendet werden können)

Answer 9

können Sie kontrollieren auch das Element, dann auf dem Stil dort die Lasche ein wenig Dropdown-Pfeil sein soll. Es wird so etwas wie „Show User Agent“ hat, „erweitert Stenografie Eigenschaften“, dann sollte es 2 weitere unter, dass sein (ich nehme an, dass Sie etwas Inspektion, die einen Hover-Zustand hat) :active und :hover die :hover wählen und Sie sollen sein golden.

Answer 10

Ich hatte das gleiche Problem und fand, dass, während ich nicht schweben Objekte in Firefox mit Firebug, Safari Web Inspector den aktuellen Zustand würde einfrieren und Abnahme- inspizieren konnten. Safari Web-Inspektor geben Sie einfach die folgende Zeile in das Terminal zu aktivieren, und starten Sie Safari:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Aktivieren Sie das Hover-Element im Browser, dann mit der rechten Maustaste und wählen 'Inspect Element'. Die Seite wird in seinem aktuellen Zustand einfrieren so dass Sie die flüchtigen Objekte zu Inhalt Ihres Herzens zu untersuchen.

Answer 11

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

Allerdings gibt es ein paar Möglichkeiten, um Ihren Hover-Zustand in Firebug zu bearbeiten:

1. Fügen Sie einen :active Zustand, zusammen mit Ihrem :hover

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

   Wenn Sie die Maus nach unten auf Ihrem Element, ziehen Sie aus und lassen, bleibt es aktiv ist.

2. Drehen Sie den :hover Zustand in eine .hover Klasse

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

   Dann natürlich Sie würde hinzufügen (und entfernen) die .hover Klasse von Ihrem Element.

Answer 12

Ich mache oft eine alternative CSS oder Javascript zu meinem hovered Ereignisse „einzufrieren“; zwicken sie bis zur Perfektion mit Firebug und legte meine schweben wieder an.

Answer 13

Ja, können Sie mit der rechten Maustaste auf „Inspect Element“, wenn Sie den Hover-Zustand auslöst. Dieser arbeitete für mich in Firebug und WebKit.

Answer 14

Ich weiß, dass dieser Beitrag ist ein bisschen alt, aber für diejenigen, die diese auf Google zu finden, habe ich eine Cross-Browser-Tool, das Sie Ihre HTML / CSS-Layout einfach visualisieren können durch Bewegen der Maus. Sie können ganz einfach Elemente in ihrem Hover Zustand anzuzeigen.

HTML Box Visualizer - GitHub

Answer 15

In neueren Firefox-Versionen (mindestens v57 und höher), die Benutzeroberfläche des Inspektors ist etwas anders, als wenn die anderen Antworten gepostet wurden. So aktiviert und den :active / :hover / :focus Zustand eines Element einfrieren, kontrollieren Sie es (Rechtsklick -> Inspect Element) und im Inspektoren klicken Sie auf:

Ergebnis:

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