it-swarm.com.de

Bildschirm in chrome debugger / DevTools panel für Popover Inspektion einfrieren?

Ich verwende den chrome inspector, um den z-index Eines Twitter bootstrap popover zu analysieren und finde ihn extrem frustrierend ...

Gibt es eine Möglichkeit, das Popover einzufrieren (während es angezeigt wird), damit ich das zugehörige CSS bewerten und ändern kann?

Wenn Sie dem verknüpften Link einen festen Schwebeflug hinzufügen, wird das Popover nicht angezeigt.

314
Abram

Habe es funktioniert. Hier war meine Prozedur:

  1. Navigieren Sie zur gewünschten Seite
  2. Öffne die Entwicklerkonsole - F12 unter Windows/Linux oder option +  + J unter OSX
  3. Wählen Sie die Registerkarte Sources im chrome inspector
  4. Bewegen Sie den Mauszeiger im Webbrowser über das gewünschte Element, um das Popover zu starten
  5. Schlagen F8 unter Windows/Linux (oder fn + F8 unter OSX), während das Popover angezeigt wird. Wenn Sie irgendwo auf die aktuelle Seite geklickt haben, wird F8 nichts tun. Ihr letzter Klick muss sich irgendwo im Inspektor befinden, wie auf der Registerkarte "Quellen" .
  6. Wechseln Sie im Inspektor zur Registerkarte Elements
  7. Finden Sie Ihr Popover (es wird im HTML des Trigger-Elements verschachtelt)
  8. Viel Spaß beim Modifizieren des CSS
612
Abram

Gehen Sie wie folgt vor, um ein Element überprüfen zu können. Dies sollte auch dann funktionieren, wenn es schwierig ist, den Schwebezustand zu duplizieren:

  • Führen Sie das folgende Javascript in der Konsole aus. Dies wird in 5 Sekunden in den Debugger einbrechen.

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

  • Zeigen Sie Ihr Element (durch Schweben oder wie auch immer) und warten Sie, bis Chrome im Debugger eingebrochen ist.

  • Klicken Sie nun im Chrome Inspector) auf die Registerkarte Elements, und Sie können dort nach Ihrem Element suchen.
  • Möglicherweise können Sie auch auf das Symbol Find Element Klicken (sieht aus wie eine Lupe) und mit Chrome) können Sie Ihr Element überprüfen und auf der Seite finden, indem Sie mit der rechten Maustaste klicken darauf, dann wählen Sie Inspect Element

Beachten Sie, dass dieser Ansatz eine geringfügige Abweichung von diesem anderen ist tolle Antwort auf dieser Seite.

221
Brad Parks

PDATE: Wie Brad Parks in seinem Kommentar schrieb, gibt es eine viel bessere und einfachere Lösung mit nur einer Zeile JS-Code:

führen Sie setTimeout(function(){debugger;},5000); aus, zeigen Sie dann Ihr Element und warten Sie, bis es in den Debugger eingebrochen ist


Ursprüngliche Antwort:

Ich hatte nur das gleiche Problem und ich denke, ich habe eine "universelle" Lösung gefunden. (vorausgesetzt, die Site verwendet jQuery)
Hoffe es hilft jemandem!

  1. Wechseln Sie im Inspektor zur Registerkarte "Elemente"
  2. Rechtsklicke auf <body> Und klicke auf " Als HTML bearbeiten"
  3. Fügen Sie nach <body> Das folgende Element ein und drücken Sie dann Strg + Eingabetaste:
    <div id="debugFreeze" data-Rand="0"></div>
  4. Klicken Sie mit der rechten Maustaste auf dieses neue Element und wählen Sie "Pause ein ..." -> "Attributänderungen"
  5. Gehen Sie nun zu Console view und führen Sie den folgenden Befehl aus:
    setTimeout(function(){$("#debugFreeze").attr("data-Rand",Math.random())},5000);
  6. Gehen Sie nun zurück zum Browserfenster und Sie haben 5 Sekunden Zeit, um Ihr Element zu finden und klicken Sie auf/hover/focus/etc, bevor der Haltepunkt erreicht wird und der Browser "einfriert".
  7. Jetzt können Sie Ihr angeklicktes/schwebendes/fokussiertes/etc-Element in Ruhe untersuchen.

Natürlich können Sie das Javascript und das Timing ändern, wenn Sie auf die Idee kommen.

51
frzsombor
  1. Klicken Sie mit der rechten Maustaste irgendwo in die Registerkarte "Elemente"
  2. Wählen Breakon... >subtree modifications
  3. Triggern Sie das Popup, das Sie sehen möchten, und es friert ein, wenn es Änderungen im DOM sieht
  4. Wenn Sie das Popup immer noch nicht sehen, klicken Sie auf die Schaltfläche Step over the next function(F10) neben Resume(F8) in der oberen oberen Mitte von chrome), bis Sie das Popup einfrieren will sehen.
30
Adrian Enriquez

Ich fand, dass dies in Chrome wirklich gut funktioniert.

Klicken Sie mit der rechten Maustaste auf das Element, das Sie untersuchen möchten, und klicken Sie dann auf Elementstatus erzwingen> Hover. Screenshot beigefügt.

Force element state

12
Leah Huyghe

Mein einfacher Weg:

setTimeout(function(){ debugger; }, 3000);
1
Nadav B