Come posso ispezionare l'elemento che scompare in un browser?

Come posso ispezionare un elemento che scompare quando il mouse si allontana?

Non so sia ID, classe o altro, ma voglio controllarlo.

Soluzioni che ho provato:

Esegui il selettore jQuery all'interno della console $('*:contains("some text")')ma non ha avuto fortuna principalmente perché l'elemento non è nascosto ma probabilmente rimosso dall'albero DOM.

L'ispezione manuale dell'albero DOM per le modifiche non mi dà nulla in quanto sembra essere troppo veloce per notare cosa sono cambiati.

SUCCESSO:

Ho avuto successo con i breakpoint dell'evento. In particolare, il mousedown nel mio caso. Vai a Sources-> Event Listener Breakpoints-> Mouse-> mousedownin Chrome. Dopo di che ho cliccato sull'elemento che volevo ispezionare e all'interno Scope Variablesho visto alcune indicazioni utili.

(Questa risposta si applica solo agli Strumenti per sviluppatori di Chrome. Vedi l'aggiornamento di seguito.)

Trova un elemento che contiene l'elemento che scompare. Fai clic destro sull'elemento e applica "Interrompi su ...> Modifiche sottostruttura". Ciò genererà una pausa del debugger prima che scompaia l'elemento, che ti consentirà di interagire con l'elemento in uno stato di pausa.

Aggiornamento 22 ottobre 2019: con il rilascio di v. 70, sembra che FireFox alla fine supporti questo tipo di debug 2 3 :

Un metodo alternativo in Chrome:

• Apri devTools (F12).
• Seleziona la scheda "Fonti".
• Mentre viene visualizzato l'elemento desiderato, premere F8 (o Ctrl + /). Ciò interromperà l'esecuzione dello script e "congelerà" il DOM esattamente come viene visualizzato.
• Da questo punto, usa Ctrl + Maiusc + C per selezionare l'elemento.

1. Apri la console
2. Digitare setTimeout(()=>{debugger;},5000);
3. premere Invio

Ora hai 5 secondi per far apparire il tuo elemento. Una volta apparso, attendi che il debugger colpisca. Finché non riprendi, puoi giocare con il tuo elemento e non scomparirà.

Suggerimento utile per evitare di ripetere questi passaggi sopra ogni volta:

aggiungi questo come bookmarklet:

1. Aggiungi qualsiasi pagina ai segnalibri
2. Modifica questo nuovo segnalibro
3. Sostituisci l'URL / posizione con: javascript:(function(){setTimeout(()=>{debugger;},5000);})();

La prossima volta che desideri utilizzarlo, fai clic / tocca questo segnalibro.

Sto usando Chrome su Mac lì ho seguito i passaggi sopra ma cercherò di spiegare un po 'di più:

1. Fare clic con il tasto destro e andare a ispezionare l'elemento.
2. Vai alla scheda fonti.
3. Quindi passa con il mouse sull'elemento.
4. Quindi utilizzando la tastiera F8 o Command(Window) \ . Metterà in pausa lo schermo in uno stato statico e l'elemento non scomparirà al passaggio del mouse.

In Firebug ci sono diverse soluzioni per questo:

1. Puoi usare Break On Mutate nel pannello HTML. (con questo sarai anche in grado di scoprire quale elemento è)
2. Puoi fare clic con il pulsante destro del mouse sull'elemento e scegliere Ispeziona elemento con Firebug

Inoltre, potresti voler seguire il numero 551 , che chiede un modo per bloccare temporaneamente eventi specifici.

Modificare:

Per scoprire quale elemento è, puoi anche abilitare le opzioni del pannello HTML Evidenzia modifiche , Espandi modifiche e Scorri modifiche nella vista per rendere visibile l'elemento all'interno del pannello HTML.

Sebastian

Nel mio caso, ho usato l' opzione Espandi ricorsivamente su Google Chrome:

I passaggi sono:

1. Ispeziona il campo a discesa
2. Trova il DOM dinamico (l'evidenziazione viola)
3. Fare clic con il tasto destro del mouse su quel DOM dinamico
4. Scegli Espandi in modo ricorsivo :
5. Possiamo vedere che ci sono tutti gli elementi

Ecco una demo:

Passa il mouse sopra l'elemento con il mouse e premi F8 (questo in Chrome) per mettere in pausa l'esecuzione dello script. Lo stato al passaggio del mouse rimarrà visibile per te.

Ti porta alla scheda fonti. Torna alla scheda Elementi. Questo codice temporale non scomparirà.

puoi visualizzare gli elementi che appaiono e scompaiono nella finestra di ispezione sotto gli elementi. Se navighi verso l'elemento quando è visibile, dovresti essere in grado di vederlo scomparire o vedere il suo CSS cambiare quando cambia stato.

Ciò è possibile con firebug in Firefox o l'ispettore incorporato in Chrome.

ho avuto lo stesso problema ma utilizzo Firefox scompare non appena apro inspect element trova una soluzione: apri i 4 trattini (impostazioni) vai su web developer> Debugger e premi immediatamente F8 che è la scorciatoia per la pausa che interrompe lo script prima di dare il via e rilevare che hai aperto gli strumenti per gli sviluppatori