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.
debugger;window.setTimeout, umdebuggerin 5 Sekunden auszulösen , dann über das Element zu schweben und zu warten.Antworten:
Habe es geschafft. Hier war meine Prozedur:
SourcesRegisterkarte im Chrome InspectorElementsRegisterkarte im Inspektorquelle
fn!F8wird der Debugger tatsächlich angehalten (Skriptausführung). Undctrl + \funktioniert auch. (cmd + \unter MacOS).F8zweimal drückenGehen 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.
Elementsim Chrome Inspector auf die Registerkarte, und Sie können dort nach Ihrem Element suchen.Find ElementSymbol (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 ElementBeachten Sie, dass dieser Ansatz eine geringfügige Abweichung von dieser anderen großartigen Antwort auf dieser Seite darstellt.
quelle
❚❚, Adresse :javascript:debugger;.F8funktioniert, aber für diejenigen, die lieber die Maus verwenden, ist dies möglicherweise bequemer.UPDATE: Wie Brad Parks in seinem Kommentar schrieb, gibt es eine viel bessere und einfachere Lösung mit nur einer Zeile JS-Code:
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!
<body>Sie mit der rechten Maustaste und klicken Sie auf " Als HTML bearbeiten ".<body>und drücken Sie Strg + Eingabetaste:<div id="debugFreeze" data-rand="0"></div>setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);Natürlich können Sie das Javascript und das Timing ändern, wenn Sie auf die Idee kommen.
quelle
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.Step over the next function(F10)Schaltfläche neben obenResume(F8)in der Mitte des Chroms, bis Sie das gewünschte Popup einfrieren.quelle
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.
quelle
Fügen Sie dies in die Registerkarte Konsole ein:
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.
quelle
Mein einfacher Weg:
quelle
Ich habe die anderen Lösungen hier ausprobiert, sie funktionieren, aber ich bin faul, also ist dies meine Lösung
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
quelle