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 die anderen Lösungen hier ausprobiert, sie funktionieren, aber ich bin faul, deshalb ist dies meine Lösung

1. Über das Element fahren, um den erweiterten Zustand auszulösen
2. Strg+Umschalt+c
3. Noch einmal über das Element fahren
4. Rechtsklick
5. Zum Debugger navigieren

Wenn Sie mit der rechten Maustaste darauf klicken, wird das Mausereignis nicht mehr erfasst, da ein Kontextmenü angezeigt wird. Sie können die Maus also sicher entfernen

Answer 2

Ich bin kürzlich auf dieses Problem gestoßen und die Lösung durch Drücken von F8 hat bei mir nicht funktioniert. Hier ist, wie ich das Hover-Element eingefroren habe.

1. Klicken Sie mit der rechten Maustaste auf das Tag mit dem Hover in Chrome und wählen Sie es im Elemente Tab aus.
2. Auf der rechten Seite wählen Sie Ereignislistener
3. Erweitern Sie das mouseout Ereignis
4. klicken Sie auf die entfernen Schaltfläche, die dort angezeigt wird.
5. Jetzt, wenn Sie über Ihr Element schweben, wird das mouseover Ereignis ausgelöst, kann aber das mouseout Ereignis nicht auslösen, wenn der Cursor das Element verlässt, da wir das gelöscht haben.

Hoffentlich hilft das.

Answer 3

Keine der Lösungen hat für mich funktioniert, nur die, wie sie hier beschrieben ist: https://developer.chrome.com/docs/devtools/javascript/disable/

für Linux (für Mac verwenden Sie statt "comtrol" den Befehl):

• Öffnen Sie die Entwicklertools (Strg + Umschalt + I)
• Starten Sie das Befehlsfenster (Strg + Umschalt + P)
• Tippen Sie "javascript" und wählen Sie "javascript deaktivieren"

Anleitungsscreenshot:

Answer 4

Sie können Bookmarklets verwenden, um ein Skript auszuführen und den Debugging-Modus zu aktivieren (und somit den Viewport einschließlich aller aktiven Zustände einzufrieren. Es ist die einfachste Methode, um Elemente zu inspizieren, die hinter einem Zustand verborgen sind, wenn Sie mich fragen.

1. Fügen Sie Ihrem Browser ein Lesezeichen hinzu.
2. Nennen Sie es zum Beispiel Freeze
3. Geben Sie im URL-Feld javascript: setTimeout(()=>{debugger}, 2000) ein
4. Öffnen Sie die Entwicklertools ( + Shift + C ist meine bevorzugte Methode oder F12)
5. Klicken Sie auf das Lesezeichen Freeze
6. Aktivieren Sie den Hover-/Aktivzustand im Viewport, wie Sie es normalerweise tun würden, bevor 2 Sekunden vergehen
7. Ihr Viewport ist jetzt im aktuellen Zustand eingefroren und Sie können Ihre zuvor versteckten Elemente inspizieren

Natürlich können Sie das Intervall ändern, bis der Debugger aktiviert wird. Hoffentlich hilft Ihnen das!

Answer 5

Zuvor funktionierte meine Chrome Freeze-Funktion nicht, wenn ich die Taste F8 drückte. Ich habe diesen Workaround verwendet und bin zum Quellcode-Tab gegangen und habe einfach auf die Pause/Wiedergabe-Schaltfläche für die Skriptausführung im rechten Bereich der Chrome Dev-Tools im Quellcode-Tab geklickt. Seitdem funktioniert mein Shortcut-Key wieder und funktioniert seitdem. Wirklich dankbar, mein Problem behoben zu haben.