Firebug: Wie kann man Elemente untersuchen, die sich mit Mausbewegungen ändern?

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.

Ich denke, Sie können dies auch tun:

• Wählen Sie den Firebugs Inspect-Modus

• Bewegen Sie den Mauszeiger über das Element, das das Element öffnet, das Sie untersuchen möchten, und verwenden Sie den TabSchlüssel dann mehrmals, um Firebug zu aktivieren (ich fand es schwierig zu erkennen, wann Firebug die aktive Komponente war, aber nichts wie Versuch und Irrtum - als ich sah, dass Firefoxes Find Die Symbolleiste war aktiv. Ich würde dann zweimal Shift+ Tabrückwärts gehen, um in Firebug zu gelangen.

• Dann würde ich die L / R-Pfeiltasten verwenden, um Elemente zusammenzuziehen / zu erweitern, und die U / D-Pfeiltasten, um durch die Firebugs-Konsole zu navigieren

Hat trotzdem für mich gearbeitet!

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'));

Das Style-Panel in Firebug verfügt über ein Dropdown-Menü, in dem Sie den Status :activeoder auswählen können :hover.

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:

    $( document ).tooltip({ hide: {duration: 100000 } });

anstatt:

    $( document ).tooltip();

Sie können den Debugger auch über einen Timer starten. Geben Sie diesen Befehl in die Konsole ein:

setTimeout(function(){ debugger; }, 10000);

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.

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.

Der Hotkey von Firebug zum Überprüfen von Elementen lautet Ctrl+ Shift+ C(Windows / Linux).

Hier finden Sie eine Liste aller Firebug-Tastaturkürzel .

Für den Bootstrap-Tooltip:

$(document ).tooltip({delay: { show: 0, hide: 100000 }});

Während die Auswahl :hoverim 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.

Für Javascript- Ereignisse wie Mouse over .

1. Öffnen Sie Firebug / Inspizieren Sie ein Element.
2. Klicken Sie vor dem Mouseover-Ereignis auf das Element , z. B. auf ein Div. Es wird blau, um anzuzeigen, dass es ausgewählt ist.
3. Bewegen Sie die Maus über das Element und bewegen Sie es nicht von diesem Punkt nach vorne.
4. Verwenden Sie Ihre ↑/ ↓Pfeiltasten, um in Firebug zu manövrieren.
5. Verwenden Sie Ihre ←/ →Pfeiltasten, um den Code mit + oder - zu erweitern / zu verkleinern.
6. Tippen Sie zweimal Tab auf, um zum CSS-Bereich zu gelangen.
7. Verwenden Sie die Pfeiltasten, um zu navigieren. Verwenden Sie die shiftPfeiltasten und, um Text auszuwählen. Ctrl& Czu kopieren.
8. Halten Sie die Taste gedrückt Shiftund tippen Sie zweimal darauf Tab , um zum HTML-Bereich zurückzukehren.

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.

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.

$('your selector') 

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 :

$('your selector').mouseenter() 

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.

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.