it-swarm.com.de

Firebug: Wie prüfe ich Elemente, die sich mit der Maus bewegen?

Manchmal muss ich Elemente überprüfen, die nur auf einer Seite angezeigt werden, wenn Sie mit der Maus über einen Bereich fahren. Das Problem ist, dass, wenn Sie die Maus zur Firebug-Konsole bewegen, um die Änderungen zu sehen, ein Mouse-Out-Ereignis ausgelöst wird und alle Änderungen, die ich zu prüfen versuche, verschwinden. Wie gehe ich mit solchen Fällen um?

Grundsätzlich suche ich nach etwas, das entweder:

  • Wechseln Sie zur Firebug-Konsole, ohne eine Maus zu bewegen (möglicherweise über Tastenkombinationen? Aber ich kann nicht herausfinden, wie Firebug nur mit der Tastatur verwendet wird.)
  • Sie können die Seite "einfrieren", damit Ihre Mausbewegungen keine Ereignisse mehr auslösen.

Vielen Dank.

68
serg

Ich denke, Sie können dies auch tun:

  • Wählen Sie den Firebugs Inspect-Modus

  • Bewegen Sie den Mauszeiger über das Element, in dem sich das zu untersuchende Element befindet, und verwenden Sie dann das Symbol Tab mehrmals drücken, um Firebug zu aktivieren (ich fand es schwierig, zu sehen, wann Firebug die aktive Komponente war, aber nichts anderes als Versuch und Irrtum - als ich sah, dass die Firefox-Suchsymbolleiste aktiv war, hatte ich das damals Shift + Tab zweimal rückwärts, um in Firebug zu gelangen.

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

Arbeitete für mich trotzdem!

13
Meerkatlookout

HTML-Tooltip (Firebug)

Wählen Sie das Element mit dem Inspektor oder im DOM aus. Gehen Sie in Firebug auf die Registerkarte "Styles", klicken Sie auf den kleinen Pfeil auf der Registerkarte und wählen Sie ": hover" (auch verfügbar: "aktiv"). Der Status bleibt auf "Schwebeflug" und Sie können andere Elemente auswählen, um sie zum Schweben zu bringen.

HTML-Tooltip (Firefox-Entwicklerwerkzeuge)

 enter image description here

Klicken Sie auf die Schaltfläche, um drei Kontrollkästchen anzuzeigen, mit denen Sie die folgenden Optionen festlegen können: hover,: active und: focus Pseudoklassen für das ausgewählte Element

Diese Funktion kann auch über das Popup-Menü in der HTML-Ansicht aufgerufen 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 oranger Punkt angezeigt:

 enter image description here

JQuery Tooltip

Öffnen Sie die Konsole und geben Sie jQuery('.css-class').trigger('mouseover') ein.

Regulärer Javascript-Tooltip

Öffnen Sie die Konsole und geben Sie document.getElementById('yourId').dispatchEvent(new Event('mouseover')); ein.

94
Stefan

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

enter image description here

33
david.s

Für den Tooltip der Jquery-UI habe ich schließlich eine lange Verzögerung für das Ausblenden des Elements eingerichtet. Ich habe also Zeit, es zu überprüfen, bevor es gelöscht wird. Zum Beispiel habe ich den Tooltip so geprüft:

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

anstatt:

    $( document ).tooltip();
13
Ronen Festinger

Sie könnten einen Haltepunkt am Anfang des Mouseout-Ereignishandlers einfügen. Der Code wird erst ausgeführt, wenn Sie fortfahren, und Sie können den DOM-Inspektor usw. verwenden, während die Ausführung angehalten ist.

6
NickFitz

Sie können den Debugger auch mit einem Timer starten. Geben Sie diesen Befehl in die Konsole ein:

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

So haben Sie 10 Sekunden Zeit, um die Maus zu benutzen und die Seite so aussehen zu lassen, wie Sie möchten, um sie zu untersuchen. Wenn der Debugger gestartet wird, wird die Seite eingefroren, und Sie können die Elemente auf der Registerkarte des Entwicklerwerkzeugs durchsuchen, ohne dass das DOM zusätzliche Mausereignisse ändert oder darauf reagiert.

4
Casey

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

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

3
Dave M-engineer

Für den Bootstrap-Tooltip:

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

Wenn Sie :hover im CSS-Menü auswählen, ist es zwar Nizza, wenn Sie nur CSS-Code untersuchen möchten. Es funktioniert jedoch nicht, wenn das, was Sie untersuchen möchten, mit JavaScript geändert wird.

Ein einfacher Hack in diesem Fall ist, 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 aus dem Browserfenster zu ziehen. Jetzt können Sie alles im Firebug-Fenster überprüfen. Bewegen Sie die Maus einfach nicht zurück in das Browserfenster.

1
jpath

Für Javascript Ereignisse wie Mouse Over.

  1. Open Firebug/Untersuche ein Element.
  2. Klicken Sie auf das Element vor dem Mouseover-Ereignis, z. Klicken Sie auf eine Div. Es wird blau, um anzuzeigen, dass es ausgewählt ist.
  3. Setzen Sie Ihr bewegen Sie die Maus über das Element und bewegen Sie sich nicht von diesem Punkt an.
  4. Benutze Dein / Pfeiltasten zum Manövrieren in Firebug.
  5. Benutze Dein / Pfeiltasten zum Erweitern/Verkleinern des Codes mit + oder -.
  6. Doppeltippen Tab um zum CSS-Bereich zu gelangen.
  7. Verwenden Sie die Pfeiltasten, um zu navigieren. Benutzen shift und Pfeiltasten, um Text auszuwählen. Ctrl & C Kopieren.
  8. Halten Shift und zweimal tippen Tab um zum HTML-Bereich zurückzukehren.
1
Eoin

Dies ist mittlerweile eine sehr alte Frage, aber ich habe eine Antwort gefunden, die den "Einfrieren des Browsers" der Frage direkt beantwortet. 

Strg + Alt + B. Dies ist "break on mutate". Wenn Sie also mit aktivem Feuerbug über einem Element fahren (Strg + Umschalttaste + C), erreichen Sie, wenn sich die HTML-Attribute ändern würden, stattdessen einen Haltepunkt. So können Sie problemlos nach Pfaden suchen usw. 

0
David Gaskins

Ich habe festgestellt, dass Chrome etwas anders arbeitet als Firefox . Insbesondere bleiben Menüs, die geschlossen werden, wenn die Maus außerhalb des Menüs angeklickt wird, offen, wenn Sie sie in Chrome überprüfen (und sie schließen, wenn Sie sie mit Firebug überprüfen). Es empfiehlt sich daher, ein anderes Entwicklungstool in einem anderen Browser zu verwenden, um zu sehen, ob es einen Unterschied macht.

0
Amiramix

Konsole öffnen:

Wenn Sie einen auf Javascript basierenden Tooltip haben, finden Sie die entsprechenden Elemente in der Konsole mit der entsprechenden Auswahl. wie unten und bestätigen Sie, dass Sie mit den Selektoren das entsprechende Element finden können.

$('your selector') 

Schreiben Sie über Javascript und drücken Sie die Eingabetaste. Sie werden eine Liste von Elementen haben.

Jetzt z. Wenn die Bibliothek Ereignis auf mouseenter hinzugefügt hat, geben Sie folgendes Skript ein:

$('your selector').mouseenter() 

Drücken Sie Enter. 

Auf diese Weise können Sie Mausbewegungsereignisse ohne tatsächliche Maus simulieren. und kann einen tatsächlichen Mauszeiger verwenden, um das Debugger-Tool zu untersuchen.

0
yogs