Congela lo schermo nel pannello di debugger / DevTools di Chrome per l'ispezione di popover?

394

Sto usando l'ispettore Chrome per provare ad analizzare il z-indexpopover bootstrap di Twitter e trovarlo estremamente frustrante ...

C'è un modo per bloccare il popover (mentre mostrato) in modo da poter valutare e modificare il CSS associato?

Posizionare un 'hover' fisso sul link associato non fa apparire il popover.

css google-chrome google-chrome-devtools

— Abram
fonte

7

Prova a impostare un punto di interruzione nel tuo JavaScript immediatamente dopo la visualizzazione del popup ( debugger;)

— Hope4You

5

Uso window.setTimeoutper fare il trigger debuggerin 5 secondi, quindi ho il mouse sopra l'elemento e aspetto.

— Grimmdude,

Ciao, scrittore tecnico DevTools qui. Potete mandarmi tutti MVCE per dimostrare il problema? A partire dal 2019 abbiamo alcuni strumenti che dovrebbero fare il trucco ( punti di interruzione dell'ascoltatore di eventi , interruzioni di pseudo-classe ) ma non posso fornire una risposta dettagliata finché non riesco a riprodurre la tua situazione.

— Kayce Basques,

Puoi trovare un'altra soluzione qui per Chrome e Firefox

— Muhammed AbdElFatah,

@KayceBasques Ecco un esempio: telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist Fai clic sull'elenco a discesa per aprirlo, quindi prova a ispezionare il popover del contenuto dell'elenco nella vista Elementi.

— RMorrisey,

704

Ha funzionato. Ecco la mia procedura:

Passare alla pagina desiderata
Apri la console di sviluppo - F12su Windows / Linux o option+ ⌘+ Jsu macOS
Seleziona la Sourcesscheda in Chrome Inspector
Nella finestra del browser Web, passa con il mouse sopra l'elemento desiderato per avviare il popover
Premi F8su Windows / Linux (o fn+ F8su macOS) mentre viene visualizzato il popover. Se hai fatto clic in qualsiasi punto della pagina effettiva, F8 non farà nulla. L'ultimo clic deve trovarsi da qualche parte nella finestra di ispezione, come la scheda Sorgenti
Vai alla Elementsscheda in Impostazioni
Trova il tuo popover (sarà nidificato nell'HTML dell'elemento trigger)
Divertiti a modificare il CSS

— Abram
fonte

9

Questo flusso di lavoro mi ha fornito una breve e utile introduzione al debugger breakpoint e mi ha aiutato a isolare un menu che era difficile da modellare, poiché è scomparso con il clic della console.

— Trevor Pierce,

22

Se l'elemento DOM utilizza l' evento focusout per nascondersi, non hai alcuna possibilità di colpire F8!

— Marcel,

2

@Dean per attivare F8 devi usare fn!

— mik01aj,

10

Per ulteriori informazioni, ciò che F8fa il collegamento è in realtà mettere in pausa il debugger (esecuzione dello script). E ctrl + \ funziona anche. ( cmd + \ in MacOS).

— LeOn - Han Li,

1

Oppure puoi premere F8due volte

— samdd

275

Per poter ispezionare qualsiasi elemento, procedi come segue. Questo dovrebbe funzionare anche se è difficile duplicare lo stato al passaggio del mouse:

Esegui il seguente javascript nella console. Questo si interromperà nel debugger in 5 secondi.

setTimeout(function(){debugger;}, 5000)
Vai a mostrare il tuo elemento (passando con il mouse o comunque) e attendi che Chrome si interrompa nel debugger.
Ora fai clic sulla Elementsscheda in Chrome Inspector e puoi cercare il tuo elemento lì.
Potresti anche essere in grado di fare clic Find Elementsull'icona (sembra una lente d'ingrandimento) e Chrome ti lascerà andare e ispezionare e trovare il tuo elemento sulla pagina facendo clic destro su di esso, quindi scegliendoInspect Element

Nota che questo approccio è una leggera variazione rispetto a questa altra grande risposta in questa pagina.

— Brad Parks
fonte

7

Rispetto che hai pagato il dovuto rispetto per la risposta di Frzsombor. simpatico.

— Jeremy Moritz,

4

Questo è ciò di cui avevo bisogno, poiché la funzionalità era dovuta a un elemento DOM che veniva aggiunto su js Focus e rimosso su sfocatura, cosa che accade sempre quando si passa agli strumenti di sviluppo.

— trudesign,

6

La soluzione F8 di Abram non ha funzionato per me. Questo ha fatto. Grazie!

— Ralf,

3

Grazie. Ho fatto un segnalibro con titolo : ❚❚, Indirizzo : javascript:debugger;. F8funziona, ma per coloro che preferiscono usare il mouse questo potrebbe essere più conveniente.

— Tymek,

1

Come altri hanno commentato, la risposta F8 non funzionava per me e mi stava facendo impazzire completamente! Funziona come un fascino. Grazie!

— DoYouEvenCodeBro

70

AGGIORNAMENTO: Come ha scritto Brad Parks nel suo commento, esiste una soluzione molto migliore e più semplice con una sola riga di codice JS:

esegui setTimeout(function(){debugger;},5000);, quindi vai a mostrare il tuo elemento e attendi fino a quando non si rompe nel debugger

Risposta originale:

Ho appena avuto lo stesso problema e penso di aver trovato una soluzione "universale". (supponendo che il sito usi jQuery)
Spero che aiuti qualcuno!

Vai alla scheda degli elementi in Impostazioni
Fare clic destro <body>e fare clic su " Modifica come HTML "
Aggiungi il seguente elemento, <body>quindi premi Ctrl + Invio:
<div id="debugFreeze" data-rand="0"></div>
Fai clic con il pulsante destro del mouse su questo nuovo elemento e seleziona "Interrompi su ..." -> "Modifiche agli attributi"
Ora vai alla vista Console ed esegui il seguente comando:
setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
Ora torna alla finestra del browser e hai 5 secondi per trovare il tuo elemento e fare clic su / hover / focus / ecc., Prima che il breakpoint venga colpito e il browser si "congeli".
Ora puoi controllare in pace il tuo elemento cliccato / hovered / focalizzato / etc.

Naturalmente puoi modificare javascript e i tempi, se hai l'idea.

— frzsombor
fonte

11

Hey! Ottima idea ... non hai nemmeno bisogno di aggiungere il div extra però ... Esegui invece questo javascript setTimeout(function(){debugger;}, 5000);, quindi vai a mostrare il tuo elemento e attendi fino a quando non si rompe nel Debugger. Quindi fai clic sulla scheda "Elementi" in Impostazioni Chrome e puoi cercare il tuo elemento lì. Puoi anche fare clic sull'icona "Trova elemento" (sembra una lente d'ingrandimento) e Chrome ti lascerà andare a ispezionare e trovare l'elemento sulla pagina facendo clic destro su di esso, quindi scegliendo "Ispeziona elemento".

— Brad Parks,

5

Penso che dovresti aggiungere questo come una risposta, perché questa soluzione non è solo migliore della mia, ma migliore di tutte le altre qui. Veramente bello!

— frzsombor,

38

Fare clic con il tasto destro in qualsiasi punto all'interno della scheda Elementi
Scegliere Breakon... > subtree modifications
Attiva il popup che vuoi vedere e si bloccherà se vedrà cambiamenti nel DOM
Se il popup non viene ancora visualizzato, fai clic sul Step over the next function(F10)pulsante Resume(F8)in alto al centro in alto di Chrome fino a quando non blocchi il popup che desideri vedere.

— Adrian Enriquez
fonte

3

GRAZIE! Non conoscevo questo e mi sta salvando

— R Claven,

14

Ho scoperto che funziona davvero bene in Chrome.

Fai clic con il pulsante destro del mouse sull'elemento che desideri ispezionare, quindi fai clic su Forza stato elemento> Passa il mouse. Schermata allegata.

Forza lo stato dell'elemento

— Leah Huyghe
fonte

5

Funzionerà solo se il popover è attivato da CSS.

— mik01aj,

6

Metti questo nella scheda console:

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

Quindi fai clic su dove mostrare il popup, 5 secondi dopo: lo schermo verrà congelato e divertiti a personalizzare i CSS.

— Parker Lucenzo
fonte

0

Il mio modo semplice:

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

— Nadav B
fonte

7

Questo è esattamente lo stesso della soluzione di Brad Parks pubblicata 3 anni fa

— frzsombor il

-2

Ho provato le altre soluzioni qui, funzionano ma sono pigro, quindi questa è la mia soluzione

passa il mouse sopra l'elemento per attivare lo stato espanso
ctrl+ shift+c
passa di nuovo sopra l'elemento
tasto destro
passare al debugger

facendo clic con il pulsante destro del mouse non viene più registrato l'evento del mouse poiché viene visualizzato un menu di scelta rapida, in modo da poter spostare il mouse in modo sicuro

— Vincent Tang
fonte