Manchmal muss ich Elemente untersuchen, die nur auf einer Seite angezeigt werden, wenn Sie mit der Maus über einen Bereich fahren. Das Problem ist, dass, wenn Sie die Maus in Richtung Firebug-Konsole bewegen, um die Änderungen zu sehen, das Mouse-Out-Ereignis ausgelöst wird und alle Änderungen, die ich überprüfen möchte, verschwinden. Wie gehe ich mit solchen Fällen um?
Grundsätzlich suche ich etwas, das entweder:
- Wechseln Sie zur Firebug-Konsole, ohne eine Maus zu bewegen (möglicherweise mithilfe von Tastaturkürzeln? Aber ich kann nicht herausfinden, wie Firebug nur mit Tastatur verwendet wird).
- Sie können die Seite "einfrieren", damit Ihre Mausbewegungen keine Ereignisse mehr auslösen.
Vielen Dank.
HTML Tooltip (Firebug)
Wählen Sie das Element mit dem Inspektor oder im DOM aus. Gehen Sie in Firebug zur Registerkarte "Stile", klicken Sie auf den kleinen Pfeil auf der Registerkarte und wählen Sie ": hover" (auch verfügbar ": active"). Der Status bleibt auf "Hover" und Sie können andere Elemente auswählen, um sie zum Hover zu bringen.
HTML-Tooltip (Firefox-Entwicklertools)
Klicken Sie auf die Schaltfläche, um drei Kontrollkästchen anzuzeigen, mit denen Sie die Pseudoklassen: hover ,: active und: focus für das ausgewählte Element festlegen können
Auf diese Funktion kann auch über das Popup-Menü in der HTML-Ansicht zugegriffen werden.
Wenn Sie eine dieser Pseudoklassen für einen Knoten festlegen, wird in der Markup-Ansicht neben allen Knoten, auf die die Pseudoklasse angewendet wurde, ein orangefarbener Punkt angezeigt:
JQuery Tooltip
Öffnen Sie die Konsole und treten Sie ein
jQuery('.css-class').trigger('mouseover')
Regelmäßiger Javascript-Tooltip
Öffnen Sie die Konsole und treten Sie ein
document.getElementById('yourId').dispatchEvent(new Event('mouseover'));
quelle
:hover
Firebug-CSS-Status löst kein Javascript-Hover-Ereignis aus. Einfach benutzenjQuery('.css-class').trigger('mouseover')
und nichts hacken müssen.Das Style-Panel in Firebug verfügt über ein Dropdown-Menü, in dem Sie den Status
:active
oder auswählen können:hover
.quelle
Für den Tooltip der Jquery-Benutzeroberfläche habe ich endlich eine lange Verzögerung für das Ausblenden des Elements festgelegt, damit ich Zeit habe, es zu überprüfen, bevor es gelöscht wird. Ich habe dies beispielsweise verwendet, um den Tooltip zu überprüfen:
anstatt:
quelle
Sie können den Debugger auch über einen Timer starten. Geben Sie diesen Befehl in die Konsole ein:
Auf diese Weise haben Sie 10 Sekunden Zeit, um die Maus zu verwenden und die Seite so aussehen zu lassen, wie Sie es möchten, um sie zu überprüfen. Wenn der Debugger gestartet wird, friert die Seite ein und Sie können die Elemente auf der Registerkarte des Entwicklertools untersuchen, ohne dass das DOM zusätzliche Mausereignisse ändert oder darauf reagiert.
quelle
Sie können zu Beginn des Mouseout-Ereignishandlers einen Haltepunkt einfügen. Der Code wird erst ausgeführt, wenn Sie zulassen, dass er fortgesetzt wird, und Sie können den DOM-Inspektor usw. verwenden, während die Ausführung gestoppt ist.
quelle
Der Hotkey von Firebug zum Überprüfen von Elementen lautet Ctrl+ Shift+ C(Windows / Linux).
Hier finden Sie eine Liste aller Firebug-Tastaturkürzel .
quelle
Für den Bootstrap-Tooltip:
quelle
Während die Auswahl
:hover
im CSS-Menü hilfreich sein kann, wenn Sie nur einen Teil des CSS-Codes überprüfen möchten, funktioniert dies nicht, wenn das, was Sie überprüfen möchten, mit JavaScript geändert wird.In diesem Fall besteht ein einfacher Hack darin, Firebug in einem anderen Fenster (obere rechte Ecke der Firebug-Leiste) zu öffnen, als die Maus an die gewünschte Stelle zu bewegen und etwas von dort aus dem Browserfenster zu ziehen und dort abzulegen. Jetzt können Sie alles im Firebug-Fenster überprüfen. Bewegen Sie Ihre Maus einfach nicht zurück in das Browserfenster.
quelle
Für Javascript- Ereignisse wie Mouse over .
quelle
Ich habe festgestellt, dass Chrome etwas anders funktioniert als Firefox . Insbesondere Menüs, die geschlossen werden, wenn Sie mit der Maus außerhalb des Menüs klicken, bleiben geöffnet, wenn Sie sie in Chrome überprüfen (und schließen, wenn Sie sie mit Firebug überprüfen ). Es wird daher empfohlen, ein anderes Entwicklungstool in einem anderen Browser zu verwenden, um festzustellen, ob dies einen Unterschied macht.
quelle
Konsole öffnen:
Wenn Sie über einen auf Javascript basierenden Tooltip verfügen, suchen Sie die entsprechenden Elemente in der Konsole mit der entsprechenden Auswahl. wie unten und bestätigen Sie, dass Sie in der Lage sind, ein geeignetes Element mit Selektoren zu finden.
Schreiben Sie über Javascript und drücken Sie die Eingabetaste. Sie haben eine Liste von Elementen.
Geben Sie nun zB das folgende Skript ein, wenn die Bibliothek im Mouseenter ein Ereignis hinzugefügt hat :
Drücken Sie Enter.
Auf diese Weise können Sie Mausbewegungsereignisse ohne tatsächliche Maus simulieren. und kann den tatsächlichen Mauszeiger verwenden, um die Sache im Debugger-Tool zu untersuchen.
quelle
Dies ist mittlerweile eine extrem alte Frage, aber ich habe eine Antwort gefunden, die den Teil der Frage "Browser einfrieren" direkt beantwortet.
Strg + Alt + B. Dies ist "Pause bei Mutation". Wenn Sie mit der Maus über ein Element fahren, bei dem der Firebug aktiviert ist (Strg + Umschalt + C), treffen die HTML-Attribute stattdessen einen Haltepunkt, sodass Sie leicht navigieren können, um nach Pfaden usw. zu suchen.
quelle