Bagaimana saya bisa memeriksa elemen html yang hilang dari DOM saat kehilangan fokus?

Saya mencoba memeriksa properti CSS dari input ke dalam sel tabel. Input muncul pada klik dan menghilang pada fokus yang hilang, seperti ketika saya mencoba memeriksanya. Bagaimana saya bisa melakukannya agar tidak kehilangan fokus saat saya pindah ke jendela lain (inspektur)?

Di browser Chrome, buka Alat Pengembang dan pilih tab Elemen , lalu buka menu kontekstual dari simpul induk dari elemen yang ingin Anda periksa, dalam klik menu kontekstual pada Break on > Subtree modifikasi .

Setelah itu Anda hanya perlu mengklik halaman dan Anda akan mendapatkan inspektur tanpa kehilangan fokus atau kehilangan elemen yang ingin Anda periksa.

Anda dapat menangkap elemen yang hilang jika Anda menghentikan eksekusi JavaScript dengan pintasan keyboard tanpa menggerakkan mouse. Begini cara Anda melakukan ini di Chrome:

1. Buka Alat Pengembang dan buka Sumber.

2. Perhatikan cara pintas untuk menjeda eksekusi skrip— F8.

   

3. Berinteraksi dengan UI untuk membuat elemen muncul.

4. Hit F8.
5. Bagaimana Anda bisa menggerakkan mouse Anda, memeriksa DOM, apa pun. Elemen akan tetap di sana.

Trik ini berfungsi di Firefox dan browser modern lainnya juga.

Jika semuanya gagal, ketikkan ini di Konsol:

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

Kemudian Anda punya 5 detik (atau ubah nilainya menjadi apa pun) untuk membuat apa pun yang ingin Anda debug muncul.

Tidak ada jawaban lain yang bekerja untuk saya - pohon DOM terus dimodifikasi (yaitu hal-hal yang saya pedulikan menghilang) tepat sebelum skrip dijeda.

Tidak yakin apakah ini berfungsi dalam situasi Anda tetapi biasanya (dan dalam setiap kasus layak disebutkan dalam hal ini karena merupakan alat yang hebat) di Alat Pengembang Chrome Anda dapat mensimulasikan keadaan elemen dan satu juga :focus.

Untuk melakukannya buka Elementstab di Alat Pengembang dan pastikan Anda berada di Stylesbagian di sebelah kanan (ini harus menjadi lokasi default ketika Anda memulai Alat Pengembang). Sekarang beneth Styles di sudut kanan atas Anda memiliki ikon Toggle Element State. Ketika Anda klik Anda dapat mensimulasikan :active, :hover, :focusdan :visiteduntuk elemen yang dipilih di sebelah kiri dalam tampilan kode Anda.

Di Chrome pada halaman alat pengembang untuk halaman yang diuji ... klik menu opsi dan buka pengaturan untuk preferensi ... di bawah DevTools memungkinkan 'Emulasikan halaman fokus'

Kemudian di halaman pengujian menyebabkan elemen muncul. Ini berfungsi agar hasil pencarian popup saya terfokus untuk tetap di layar sehingga saya bisa bekerja dengannya.

Bukan solusi nyata, tetapi biasanya berfungsi (:

1. Fokuskan elemen
2. Klik kanan untuk menu konteks
3. Turun ke alat pengembang

Saya memiliki situasi yang sangat sulit dan tidak ada jawaban yang bekerja dari sini (saya tidak memverifikasi jawaban yang mengubah wadah, yang merupakan tubuh bagi saya, atau acara asli, karena saya tidak tahu itu). Saya akhirnya menemukan solusi dengan menerobos Breakpoint Pendengar Event Control di Inspektur Chrome. Mungkin itu juga cara lintas browser untuk memecahkan situasi rumit di mana bahkan F8 atau mengklik kanan mouse menyembunyikan popup lagi:

Rekatkan Javascript berikut di konsol pengembang 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);

Saya memiliki perbaikan yang lebih cepat karena saya tidak pandai menggunakan alat, inilah yang saya lakukan.

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

Jika Anda membuka Chrome DevTools dan kemudian memicu inspektur elemen menggunakan pintasan keyboard, itu akan menyelesaikan masalah.

Mac: Cmd+Opt+J laluCmd+Opt+C

Windows: Ctrl+Shift+J laluCtrl+Shift+C

[