Bagaimana saya bisa memeriksa elemen yang hilang di browser?

153

Bagaimana saya bisa memeriksa elemen yang hilang ketika mouse saya bergerak? Contoh dropdown yang hilang

Saya tidak tahu itu ID, kelas, atau apa pun selain ingin memeriksanya.

Solusi yang saya coba:

Jalankan pemilih jQuery di dalam konsol $('*:contains("some text")')tetapi tidak berhasil karena elemennya tidak disembunyikan tetapi mungkin dihapus dari pohon DOM.

Memeriksa pohon DOM secara manual untuk perubahan tidak memberi saya apa-apa karena tampaknya terlalu cepat untuk memperhatikan apa yang telah berubah.

KEBERHASILAN:

Saya telah berhasil dengan breakpoints acara. Khususnya - mousedown dalam kasus saya. Cukup buka Sources-> Event Listener Breakpoints-> Mouse-> mousedowndi Chrome. Setelah itu saya mengklik elemen yang ingin saya periksa dan di dalamnya Scope Variablessaya melihat beberapa petunjuk yang bermanfaat.

javascript google-chrome firefox firebug opera-dragonfly lukas.pukenis
sumber
2
Pertanyaan Anda membantu walaupun saya tidak mendapatkan breakpoint menggunakan sumber, saya mengeksekusi skrip berikut di konsol: document.body.addEventListener('mouseup',function(){ debugger; })Itu membuat saya istirahat dan saya bisa memeriksa elemen yang dibuat.
HMR
Kamu keren. Punya masalah ini dengan kontrol React-Select, di mana saya tidak dapat melihat HTML dari daftar item karena subtree akan menghapus setiap kali saya mengklik. Diperlukan ID item untuk mengotomatiskan klik menggunakan Selenium. Terima kasih!
araisbec

Jawaban:

177

(Jawaban ini hanya berlaku untuk Alat Pengembang Chrome. Lihat pembaruan di bawah ini.)

Temukan elemen yang mengandung elemen yang menghilang. Klik kanan pada elemen dan terapkan "Break on ...> Subtree Modifications." Ini akan membuat jeda debugger sebelum elemen menghilang, yang akan memungkinkan Anda untuk berinteraksi dengan elemen dalam keadaan dijeda.

masukkan deskripsi gambar di sini

Pembaruan 22 Okt 2019: dengan rilis v. 70, sepertinya FireFox akhirnya mendukung jenis debugging 2 3 ini :

masukkan deskripsi gambar di sini

arxpoetica
sumber
1
Untuk menghindari kemungkinan kebingungan - debugger akan berhenti saat Anda memicu acara, alias mengetikkan nama tempat. Ketika layar jeda cukup tekan tombol play pada DOM itu sendiri dan Anda akan dapat memicu acara tersebut.
Dylan Pierce
Ini tidak berfungsi jika halaman telah menangkap klik kanan dan melakukan sendiri pada klik kanan.
Michael
Ini tidak berfungsi untuk yang pertama dari dua dialog dalam wadah yang sama
Still_learning
@Still_learning Bisakah Anda menjelaskan apa yang Anda maksud dengan "dua dialog di wadah yang sama."
arxpoetica
<v-container><v-dialog></v-dialog><v-dialog></v-dialog></v-container>- dalam kasus saya dialog pertama hanya menampilkan sampai data datang dari db, kira-kira 1 detik
Still_learning
92

Metode alternatif di Chrome:

  • Buka devTools (F12).
  • Pilih tab "Sumber".
  • Sementara elemen yang Anda inginkan ditampilkan, tekan F8 (atau Ctrl + /). Ini akan merusak eksekusi skrip dan "membekukan" DOM ​​persis seperti yang ditampilkan.
  • Dari titik ini, gunakan Ctrl + Shift + C untuk memilih elemen.
Joseph Tinoco
sumber
3
Sempurna!! Ini tepat seperti yang saya inginkan
Daniel Loiterton
2
Saya perhatikan ini hanya berfungsi ketika Anda memiliki alat pengembang sudah dibuka di tab 'Sumber'.
hbulens
3
itu membekukan kode dari eksekusi tetapi elemen masih menghilang (saya menggunakan Bereaksi).
Lorem Ipsum Dolor
Chrome saya mengatakan F8 atau Crtl + \ (bukan Crtl + /). Juga, Crtl + \ tidak berfungsi dalam kasus saya ...
Roger Veciana
Ini tidak berfungsi pada pop-up kontrol video Google ... kontrol tampaknya memudar dari pandangan segera setelah Anda menekan tombol, dan telah sepenuhnya memudar sebelum pembekuan terjadi.
Michael
18
  1. Buka konsol
  2. Ketikkan setTimeout(()=>{debugger;},5000);
  3. tekan enter

Sekarang Anda memiliki 5 detik untuk membuat elemen Anda muncul. Setelah itu muncul, tunggu sampai debugger hits. Selama Anda tidak melanjutkan, Anda bisa bermain dengan elemen Anda dan itu tidak akan hilang.

Tip yang berguna untuk menghindari mengulangi langkah-langkah di atas setiap kali:

tambahkan ini sebagai bookmarklet:

  1. Tandai halaman mana saja
  2. Edit bookmark baru ini
  3. Ganti URL / lokasi dengan: javascript:(function(){setTimeout(()=>{debugger;},5000);})();

Lain kali Anda ingin menggunakan ini, cukup klik / ketuk bookmark ini.

Mojtaba
sumber
1
Ini adalah cara tercepat dan paling stabil untuk men-debug elemen yang hilang ^
warmwhisky
8

Saya menggunakan chrome di Mac di sana saya telah mengikuti langkah-langkah di atas, tetapi saya akan mencoba menjelaskan lebih banyak:

  1. Klik kanan dan pergi untuk memeriksa elemen.
  2. Buka tab sumber.
  3. Lalu arahkan pada elemen.
  4. Kemudian gunakan keyboard F8 atau Command(Window) \ . Ini akan menjeda layar dalam keadaan statis dan elemen tidak akan hilang saat dibawa keluar.
Mamba hitam
sumber
1
Terima kasih, terima kasih, untuk instruksi terperinci! Setelah menunjukkan ketangkasan ekstrim - mengklik tombol, menekan Ctr + Shift + C, menggerakkan mouse untuk melayang di atas elemen, dan menekan F8dalam waktu satu setengah detik - Saya akhirnya mendapatkan elemen saya dalam mode yang dapat
diperiksa
2

Di Firebug ada beberapa solusi untuk ini:

  1. Anda dapat menggunakan Break On Mutate di dalam panel HTML. (dengan ini Anda juga akan dapat mengetahui elemen mana itu)
  2. Anda dapat mengklik kanan elemen tersebut dan memilih Inspect Element with Firebug

Anda juga mungkin ingin mengikuti edisi 551 , yang meminta cara untuk sementara waktu memblokir acara tertentu.

Edit:

Untuk mengetahui elemen mana itu, Anda juga dapat mengaktifkan opsi panel HTML Sorot Perubahan , Perluas Perubahan dan Gulir Perubahan Ke Tampilan untuk membuat elemen terlihat di dalam panel HTML.

Sebastian

Sebastian Zartner
sumber
Chrome juga memiliki inspektur yang baik. Masalahnya adalah - klik kanan pada elemen membuatnya menghilang dalam kasus saya. Chrome juga memiliki Break on DOM bermutasi. Masalah dengan ini - saya tidak tahu elemen itu seperti apa yang dihasilkan secara dinamis
lukas.pukenis
1
Saya baru saja mengedit jawaban saya untuk memberi petunjuk bagaimana mengenal elemen mana itu.
Sebastian Zartner
2

Dalam kasus saya, saya menggunakan Expand secara rekursif opsi di google chrome:

Langkah-langkahnya adalah:

  1. Periksa bidang dropdown
  2. Temukan DOM dinamis (highlight ungu)
  3. Klik kanan mouse pada DOM dinamis itu
  4. Pilih Perluas secara rekursif : masukkan deskripsi gambar di sini
  5. Kita bisa melihat semua elemen yang ada

Ini demo:

masukkan deskripsi gambar di sini

Raja David
sumber
2

Arahkan kursor ke elemen dengan mouse Anda dan tekan F8 (ini di Chrome) untuk menjeda eksekusi skrip. Status hover akan tetap terlihat oleh Anda.

Ini membawa Anda ke tab sumber. Kembali ke tab Elemen. Kode waktu ini tidak akan lenyap.

Vivekanand Panda
sumber
0

Anda dapat melihat elemen muncul dan menghilang di inspektur di bawah elemen. Jika Anda menavigasi ke elemen ketika itu terlihat Anda harus dapat melihatnya menghilang atau melihat perubahan css ketika statusnya berubah.

Ini dimungkinkan dengan pembakar di firefox atau inspektur yang dibangun di chrome.

matpol
sumber
1
Iya. Saya telah menyatakan bahwa perubahan terjadi terlalu cepat di DOM dan halaman memodifikasi DOM dengan berat sehingga ini benar-benar bukan solusi karena saya tidak dapat membedakan elemen yang saya butuhkan dari banyak modifikasi di mana-mana :)
lukas.pukenis
Anda bisa mencoba melacak apa yang sedang terjadi menggunakan console.log misalnya di awal fungsi yang Anda coba periksa Anda dapat melihat objek css dll. Atau memperlambat perubahan sampai Anda tahu mereka bekerja dengan baik dan kemudian mengubah kecepatan ke apa yang Anda ingin itu misalnya sembunyikan ('lambat') di jquery
matpol
Masalahnya - itu bukan basis kode saya sendiri, ini adalah warisan, besar, lama, basis kode di mana pencarian sederhana melalui file tidak memberi saya apa-apa .. :)
lukas.pukenis
Anda dapat melihat file apa yang sedang digunakan oleh halaman di inspektur juga. Saya akan melalui menghapus mereka sampai rusak kemudian mencari di file yang memecahkannya dan pergi dari sana. Anda selalu dapat mencari file yang sebenarnya juga.
matpol
2
bagaimana dengan ini: stackoverflow.com/questions/10213703/…
matpol
0

saya punya masalah yang sama tetapi saya menggunakan Firefox itu menghilang segera setelah saya buka memeriksa elemen menemukan solusi: buka 4 tanda hubung (pengaturan) pergi ke pengembang web> Debugger dan segera tekan F8 yang merupakan jalan pintas untuk jeda yang menghentikan skrip sebelum menendang dan mendeteksi bahwa Anda membuka alat pengembang

Hani Yassine
sumber