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

73

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.

serg
quelle

Antworten:

15

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!

Erdmännchenausblick
quelle
Danke für den TAB-Tipp, das habe ich gesucht. Nur ist es immer noch nicht perfekt, ich kann nicht über die Tastatur zwischen Firebug-Registerkarten wechseln und keine CSS-Attribute und ähnliches bearbeiten. Ich denke, Firebug hat einfach keine gute Navigation nur über die Tastatur.
Serg
1
Wenn sich auf der Seite Formulare befinden, funktioniert dies nicht, da sich die Bildlaufposition ändert.
Keyo
96

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)

Geben Sie hier die Bildbeschreibung ein

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:

Geben Sie hier die Bildbeschreibung ein

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

Stefan
quelle
11
Der :hoverFirebug-CSS-Status löst kein Javascript-Hover-Ereignis aus. Einfach benutzen jQuery('.css-class').trigger('mouseover')und nichts hacken müssen.
Machineaddict
33

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

Geben Sie hier die Bildbeschreibung ein

david.s
quelle
13

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();
Ronen Festinger
quelle
12

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.

Casey Plummer
quelle
4 Jahre später und das manuelle Aufrufen des Debuggers über die Konsole scheint immer noch die einzige Möglichkeit zu sein, das DOM in Firefox einzufrieren, während Sie weiterhin Zugriff auf die Inspect-Element-Funktionalität erhalten.
waffl3head
6

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.

NickFitz
quelle
2
Was ist, wenn JS zu kompliziert ist, um herauszufinden, wo es ausgelöst wird?
Serg
2
Dann starten Sie den Firebug-Profiler, lösen den Mouseover aus, stoppen den Profiler und versuchen einzugrenzen, wo der Event-Handler ausgelöst wurde
mkoryak
Installieren Sie das FireQuery-Addon. Sie erhalten einen Handler mit HTML. Klicken Sie darauf, um die Funktion für ein Ereignis zu erhalten.
Brij
3

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

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

Dave M-Ingenieur
quelle
2

Für den Bootstrap-Tooltip:

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

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.

jpath
quelle
1

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.
Eoin
quelle
0

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.

Greg
quelle
Einverstanden. Chrome ist nützlicher als Firebug, wenn Sie ein Hover-Menü bearbeiten müssen.
DawnPaladin
0

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.

Yogs
quelle
0

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.

David Gaskins
quelle