Come posso controllare l'elemento html che scompare dal DOM in caso di smarrimento?

Sto cercando di ispezionare le proprietà CSS da un input in una cella di tabella. L'input appare al clic e scompare quando si perde la messa a fuoco, come quando provo a controllarlo. Come posso farlo per non perdere la messa a fuoco mentre mi sposto in un'altra finestra (l'ispettore)?

Nel browser Chrome, apri gli Strumenti per gli sviluppatori e seleziona la scheda Elementi , quindi apri il menu contestuale del nodo padre dell'elemento che desideri controllare, nel menu contestuale fai clic su Interrompi > Modifiche sottostruttura .

Successivamente devi solo fare clic sulla pagina e otterrai l'ispettore senza perdere la concentrazione o perdere l'elemento che desideri ispezionare.

Puoi catturare l'elemento che scompare se metti in pausa l'esecuzione di JavaScript con una scorciatoia da tastiera senza muovere il mouse. Ecco come farlo in Chrome:

1. Apri Strumenti per gli sviluppatori e vai a Sorgenti.

2. Nota il collegamento per mettere in pausa l'esecuzione dello script— F8.

   

3. Interagisci con l'interfaccia utente per visualizzare l'elemento.

4. Hit F8.
5. Come muovere il mouse, ispezionare il DOM, qualunque cosa. L'elemento rimarrà lì.

Questo trucco funziona anche con Firefox e altri browser moderni.

Se tutto il resto fallisce, digita questo nella Console:

setTimeout(() => { debugger; }, 5000)

Quindi hai 5 secondi (o modifica il valore in qualsiasi altra cosa) per far apparire qualunque cosa tu voglia eseguire il debug.

Nessuna delle altre risposte ha funzionato per me - l'albero del DOM ha continuato a essere modificato (cioè le cose a cui tengo sono scomparse) proprio prima che lo script venisse sospeso.

Non sono sicuro che funzioni nella tua situazione, ma normalmente (e in ogni caso vale la pena menzionarlo in quanto è un ottimo strumento) in Chrome Developer Tools puoi simulare gli stati degli elementi e uno lo è anche :focus.

Per fare ciò, vai alla Elementsscheda in Strumenti per sviluppatori e assicurati di essere nella Stylessezione a destra (questa dovrebbe essere la posizione predefinita quando avvii gli Strumenti per sviluppatori). Ora solo gli stili nell'angolo in alto a destra hai un'icona Toggle Element State. Quando si fa clic è possibile simulare :active, :hover, :focuse :visitedper l'elemento selezionato a sinistra nella visualizzazione di codice.

In Chrome nella pagina degli strumenti di sviluppo per la pagina in prova ... fai clic sul menu delle opzioni e apri le impostazioni per le preferenze ... in DevTools abilita "Emula una pagina focalizzata"

Quindi nella pagina di test fanno apparire gli elementi. Questo ha funzionato per mantenere i miei risultati di ricerca popup focalizzati a rimanere sullo schermo in modo da poter lavorare con esso.

Non è una vera soluzione, ma di solito funziona (:

1. Metti a fuoco l'elemento
2. Fare clic con il tasto destro per il menu contestuale
3. Passa agli strumenti per sviluppatori

Ho avuto una situazione molto difficile e nessuna risposta funzionava da qui (non ho verificato le risposte cambiando il contenitore, che è il corpo per me o l'evento originale, perché non lo so). Alla fine ho trovato una soluzione alternativa interrompendo i punti di interruzione del listener di eventi di controllo in Chrome Inspector. Forse questo è anche un modo cross-browser di rompere per situazioni complicate in cui anche F8 o il tasto destro del mouse nascondono di nuovo il popup:

Incolla il seguente Javascript nella console di sviluppo del browser:

// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.

var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
 console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);

Ho una soluzione più rapida poiché non sono molto bravo a usare gli strumenti, ecco cosa faccio.

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();

Se apri Chrome DevTools e quindi attivi la finestra di ispezione degli elementi utilizzando le scorciatoie da tastiera, dovrebbe risolvere il problema.

Mac: Cmd+Opt+J e poiCmd+Opt+C

Windows: Ctrl+Shift+J e poiCtrl+Shift+C

[