Bildschirm im Chrome-Debugger / DevTools-Panel einfrieren für die Überprüfung von Pop-ups?

Question

Ich benutze den Chrome-Inspektor, um zu versuchen, die z-index eines Twitter-Bootstrap-Popovers zu analysieren, und finde es extrem frustrierend...

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

Das Platzieren eines festen 'hover'-Effekts auf dem zugehörigen Link lässt das Popover nicht erscheinen.

Answer 1

Ich habe es zum Laufen gebracht. Hier war mein Verfahren:

1. Zur gewünschten Seite navigieren
2. Öffnen Sie die Entwicklerkonsole - F12 unter Windows/Linux oder option + + J unter macOS
3. Wählen Sie den QuellenTab im Chrome-Inspektor
4. Im Webbrowserfenster über das gewünschte Element schweben, um das Popover zu initiieren
5. Drücken Sie F8 unter Windows/Linux (oder fn + F8 unter macOS), während das Popover angezeigt wird. Wenn Sie irgendwo auf der tatsächlichen Seite geklickt haben, wird F8 nichts bewirken. Ihr letzter Klick muss irgendwo im Inspektor, wie dem Quellen-Tab, erfolgt sein
6. Gehen Sie zum ElementeTab im Inspektor
7. Finden Sie Ihr Popover (es wird in dem HTML des Auslöselements verschachtelt sein)
8. Viel Spaß beim Modifizieren des CSS

Answer 2

Um ein beliebiges Element inspizieren zu können, musst du folgendes tun. Dies sollte auch funktionieren, wenn es schwer ist, den Hover-Zustand zu replizieren:

• Führe den folgenden JavaScript-Code in der Konsole aus. Dies wird innerhalb von 5 Sekunden einen Debugger öffnen.

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

• Zeige das Element an (indem du darüber schwebst oder auf andere Weise) und warte, bis Chrome den Debugger öffnet.

• Klicke jetzt auf den Elements Tab im Chrome Inspector und du kannst dort nach deinem Element suchen.

• Du kannst auch auf das Element finden Symbol klicken (sieht aus wie eine Lupe) und Chrome wird es dir ermöglichen, das Element auf der Seite zu inspizieren und zu finden, indem du mit der rechten Maustaste darauf klickst und dann Element inspizieren wählst.

Beachte, dass dieser Ansatz eine leichte Abweichung von einer anderen großartigen Antwort auf dieser Seite darstellt.

Answer 3

UPDATE: 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 im Debugger unterbrochen wird

---

Ursprüngliche Antwort:

Ich hatte gerade das gleiche Problem und denke, dass ich eine "universelle" Lösung gefunden habe. (vorausgesetzt, die Seite verwendet jQuery)

1. Gehen Sie zum Elemente-Tab im Inspektor

2. Klicken Sie mit der rechten Maustaste auf und klicken Sie auf "Als HTML bearbeiten"

3. Fügen Sie das folgende Element nach hinzu und drücken Sie dann Strg+Enter:

4. Klicken Sie mit der rechten Maustaste auf dieses neue Element und wählen Sie "Unterbrechen bei..." -> "Attributänderungen"

5. Gehen Sie jetzt zur Ansicht Konsole 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 haben 5 Sekunden Zeit, um Ihr Element zu finden und darauf zu klicken/hovern/focusieren usw., bevor der Haltepunkt erreicht wird und der Browser "einfriert".

7. Jetzt können Sie Ihr angeklicktes/hovertes/fokussiertes/usw. Element in Ruhe inspizieren.

Natürlich können Sie das JavaScript und die Zeitsteuerung anpassen, wenn Sie die Idee verstanden haben.

Answer 4

1. Klicken Sie mit der rechten Maustaste irgendwo im Bereich "Elemente"
2. Wählen Sie Unterbrechen bei... > Änderungen im Teilbaum
3. Öffnen Sie das Popup, das Sie sehen möchten, und es friert ein, wenn es Änderungen im DOM feststellt
4. Wenn Sie das Popup immer noch nicht sehen, klicken Sie auf die Schaltfläche Schritt über die nächste Funktion (F10) neben Fortsetzen (F8) oben in der Mitte des Chrome, bis Sie das gewünschte Popup eingefroren haben.

Answer 5

Ich habe festgestellt, dass dies in Chrome wirklich gut funktioniert.

Klicken Sie mit der rechten Maustaste auf das Element, das Sie inspizieren möchten, und klicken Sie dann auf Force Element State > Hover. Screenshot angehängt.