Bildschirm im Chrome-Debugger / DevTools-Panel für Popover-Inspektion einfrieren?

394

Ich verwende den Chrome-Inspektor, um zu versuchen, das z-indexeines Twitter-Bootstrap-Popovers zu analysieren , und finde es äußerst 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 einen festen 'Hover' auf dem zugehörigen Link platzieren, wird das Popover nicht angezeigt.

css  google-chrome  google-chrome-devtools 
— Abram
quelle
7
Versuchen Sie, einen Haltepunkt in Ihrem JavaScript unmittelbar nach dem debugger;
— Anzeigen des Popups festzulegen
5
Ich benutze window.setTimeout, um debuggerin 5 Sekunden auszulösen , dann über das Element zu schweben und zu warten.
— Grimmdude
Hallo, technischer Redakteur von DevTools hier. Können Sie mir alle MVCEs schicken, die das Problem demonstrieren? Ab 2019 haben wir einige Tools, die den Trick machen sollten ( Ereignis-Listener-Haltepunkte , Umschalten zwischen Pseudoklassen ), aber ich kann keine detaillierte Antwort geben, bis ich Ihre Situation reproduzieren kann.
— Kayce Basques
Sie können andere Lösung hier für Chrome & Firefox
— Muhammed AbdElFatah
@KayceBasques Hier ein Beispiel: telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist Klicken Sie auf die Dropdown-Liste, um sie zu öffnen, und überprüfen Sie dann das Listeninhalts-Popover in der Elementansicht.
— RMorrisey

Antworten:

704

Habe es geschafft. Hier war meine Prozedur:

  1. Navigieren Sie zur gewünschten Seite
  2. Öffnen Sie die Entwicklungskonsole - F12unter Windows / Linux oder option+ ⌘+ Junter macOS
  3. Wählen Sie die SourcesRegisterkarte im Chrome Inspector
  4. Bewegen Sie den Mauszeiger im Webbrowser-Fenster über das gewünschte Element, um das Popover zu starten
  5. Drücken Sie F8unter Windows / Linux (oder fn+ F8unter macOS), während das Popover angezeigt wird. Wenn Sie irgendwo auf der aktuellen Seite geklickt haben, wird F8 nichts tun. Ihr letzter Klick muss sich irgendwo im Inspektor befinden, z. B. auf der Registerkarte Quellen
  6. Gehen Sie zur ElementsRegisterkarte im Inspektor
  7. Suchen Sie Ihr Popover (es wird im HTML-Code des Triggerelements verschachtelt)
  8. Viel Spaß beim Ändern des CSS
— Abram
quelle
9
Dieser Workflow gab mir eine kurze, nützliche Einführung in den Breakpoint-Debugger und half dabei, ein Menü zu isolieren, das schwer zu formatieren war, da es beim Klicken auf die Konsole verschwand.
— Trevor Pierce
22
Wenn das DOM-Element das Focusout- Ereignis zum Ausblenden verwendet , haben Sie keine Chance, F8 zu drücken !
— Marcel
2
@ Dean, um F8 auszulösen, müssen Sie verwenden fn!
— Mik01aj
10
Für weitere Informationen F8wird der Debugger tatsächlich angehalten (Skriptausführung). Und ctrl + \ funktioniert auch. ( cmd + \ unter MacOS).
— LeOn - Han Li
1
Oder Sie können F8zweimal drücken
— samdd
274

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 jedoch) und warten Sie, bis Chrome in den Debugger einbricht.

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

Beachten Sie, dass dieser Ansatz eine geringfügige Abweichung von dieser anderen großartigen Antwort auf dieser Seite darstellt.

— Brad Parks
quelle
7
Ich respektiere, dass Sie die Antwort von frzsombor angemessen respektiert haben. nett.
— Jeremy Moritz
4
Dies war das, was ich brauchte, da die Funktionalität darauf zurückzuführen war, dass ein DOM-Element in js Focus hinzugefügt und bei Unschärfe entfernt wurde, was immer passiert, wenn Sie zu den Entwicklungswerkzeugen wechseln.
— Trudesign
6
Abrams F8-Lösung hat bei mir nicht funktioniert. Dieser tat es. Vielen Dank!
— Ralf
3
Danke. Ich habe ein Lesezeichen mit dem Titel : ❚❚, Adresse : javascript:debugger;. F8funktioniert, aber für diejenigen, die lieber die Maus verwenden, ist dies möglicherweise bequemer.
— Tymek
1
Wie andere kommentiert haben, hat die F8-Antwort bei mir nicht funktioniert und mich total verrückt gemacht! Das funktioniert wie ein Zauber. Vielen Dank!
— DoYouEvenCodeBro
70

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 aus setTimeout(function(){debugger;},5000);, zeigen Sie dann Ihr Element und warten Sie, bis es in den Debugger einbricht

Ursprüngliche Antwort:

Ich hatte gerade 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. Klicken <body>Sie mit der rechten Maustaste und klicken Sie auf " Als HTML bearbeiten ".
  3. Fügen Sie anschließend das folgende Element hinzu <body>und drücken Sie Strg + Eingabetaste:
    <div id="debugFreeze" data-rand="0"></div>
  4. Klicken Sie mit der rechten Maustaste auf dieses neue Element und wählen Sie "Unterbrechen ..." -> "Attributänderungen".
  5. Wechseln Sie nun zur Konsolenansicht 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 auf / hover / focus / etc zu klicken, bevor der Haltepunkt erreicht wird und der Browser "einfriert".
  7. Jetzt können Sie Ihr angeklicktes / schwebendes / fokussiertes / etc-Element in Ruhe überprüfen.

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

— frzsombor
quelle
11
Hallo! Tolle Idee ... Sie müssen jedoch nicht einmal das zusätzliche Div hinzufügen ... Führen Sie stattdessen einfach dieses Javascript aus setTimeout(function(){debugger;}, 5000);, zeigen Sie dann Ihr Element und warten Sie, bis es in den Debugger einbricht. Klicken Sie dann im Chrome Inspector auf die Registerkarte "Elemente", und Sie können dort nach Ihrem Element suchen. Möglicherweise können Sie auch auf das Symbol "Element suchen" klicken (sieht aus wie eine Lupe). Mit Chrome können Sie Ihr Element auf der Seite überprüfen und finden, indem Sie mit der rechten Maustaste darauf klicken und dann "Element überprüfen" auswählen.
— Brad Parks
5
Ich denke, Sie sollten dies als Antwort hinzufügen, da diese Lösung nicht nur besser als meine ist, sondern auch besser als alle anderen hier. Wirklich nett!
— Frzsombor
38
  1. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle in der Registerkarte "Elemente"
  2. Wählen Breakon... > subtree modifications
  3. Lösen Sie das Popup aus, das Sie sehen möchten, und es friert ein, wenn Änderungen im DOM angezeigt werden
  4. Wenn das Popup immer noch nicht angezeigt wird, klicken Sie auf die Step over the next function(F10)Schaltfläche neben oben Resume(F8)in der Mitte des Chroms, bis Sie das gewünschte Popup einfrieren.
— Adrian Enriquez
quelle
3
VIELEN DANK! Ich kannte dieses nicht und es rettet mich
— R Claven
14

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.

Elementzustand erzwingen

— Leah Huyghe
quelle
5
Es funktioniert nur, wenn das Popover durch CSS ausgelöst wird.
— Mik01aj
6

Fügen Sie dies in die Registerkarte Konsole ein:

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

Klicken Sie dann 5 Sekunden später auf die Stelle, an der das Popup angezeigt werden soll. Der Bildschirm wird eingefroren und es macht Spaß, CSS anzupassen.

— Parker Lucenzo
quelle
0

Mein einfacher Weg:

setTimeout(function(){ debugger; }, 3000);
— Nadav B.
quelle
7
Dies ist genau das gleiche wie die Lösung von Brad Parks, die vor 3 Jahren veröffentlicht wurde
— frzsombor
-2

Ich habe die anderen Lösungen hier ausprobiert, sie funktionieren, aber ich bin faul, also ist dies meine Lösung

  1. Bewegen Sie den Mauszeiger über das Element, um den erweiterten Status auszulösen
  2. ctrl+ shift+c
  3. Bewegen Sie den Mauszeiger erneut über das Element
  4. Rechtsklick
  5. Navigieren Sie zum Debugger

Wenn Sie mit der rechten Maustaste darauf klicken, wird das Mausereignis nicht mehr registriert, da ein Kontextmenü angezeigt wird, sodass Sie die Maus sicher wegbewegen können

— Vincent Tang
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.