Bekukan layar di panel chrome debugger / DevTools untuk pemeriksaan popover?

394

Saya menggunakan inspektur chrome untuk mencoba dan menganalisis z-indexpopover bootstrap twitter, dan merasa sangat frustasi ...

Apakah ada cara untuk membekukan popover (saat ditampilkan) sehingga saya dapat menilai dan memodifikasi CSS yang terkait?

Menempatkan 'hover' yang diperbaiki pada tautan terkait tidak menyebabkan popover muncul.

css google-chrome google-chrome-devtools Abram
sumber
7
Coba atur breakpoint dalam JavaScript Anda segera setelah popup ditampilkan (debugger; )
Hope4You
5
Saya gunakan window.setTimeoutuntuk memicu debuggerdalam 5 detik, lalu mengarahkan elemen dan menunggu.
grimmdude
Halo, penulis teknis DevTools di sini. Bisakah Anda semua mengirim saya MVCE yang menunjukkan masalah? Pada 2019 kami memiliki beberapa alat yang harus melakukan trik ( breakpoint pendengar acara , matikan kelas semu ) tetapi saya tidak dapat memberikan jawaban terperinci sampai saya dapat mereproduksi situasi Anda.
Kayce Basques
Anda dapat menemukan solusi lain di sini untuk Chrome & Firefox
Muhammed AbdElFatah
@KayceBasques Inilah contohnya: telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist Klik pada daftar dropdown untuk membukanya, lalu coba periksa popover konten daftar pada tampilan Elemen.
RMorrisey

Jawaban:

704

Sudah bekerja. Inilah prosedur saya:

  1. Jelajahi halaman yang diinginkan
  2. Buka konsol dev - F12di Windows / Linux atau option+ ⌘+ Jdi macOS
  3. Pilih Sourcestab di inspektur krom
  4. Di jendela browser web, arahkan kursor ke elemen yang diinginkan untuk memulai popover
  5. Tekan F8pada Windows / Linux (atau fn+ F8pada macOS) saat popover ditampilkan.Jika Anda mengklik di mana saja pada halaman yang sebenarnya, F8 tidak akan melakukan apa-apa. Klik terakhir Anda harus berada di suatu tempat di inspektur, seperti tab sumber
  6. Pergi ke Elements tab di inspektur
  7. Temukan popover Anda (itu akan bersarang di HTML elemen pemicu)
  8. Bersenang-senang memodifikasi CSS
Abram
sumber
9
Alur kerja ini memberi saya pengantar singkat dan bermanfaat untuk breakpoint debugger dan membantu mengisolasi menu yang sulit untuk ditata, karena menghilang pada klik Konsol.
Trevor Pierce
22
Jika elemen DOM menggunakan acara fokus untuk menyembunyikan Anda tidak memiliki kesempatan untuk menekan F8!
Marcel
2
@Dean untuk memicu F8 yang perlu Anda gunakan fn!
mik01aj
10
Untuk info lebih lanjut, apa yang F8dilakukan pintasan sebenarnya menghentikan debugger (eksekusi skrip). Dan ctrl + \ juga berfungsi. ( cmd + \ dalam MacOS).
LeOn - Han Li
1
Atau Anda dapat menekan F8dua kali
samdd
274

Untuk dapat memeriksa elemen apa pun lakukan hal berikut. Ini akan berfungsi meskipun sulit untuk menduplikasi kondisi hover:

  • Jalankan javascript berikut di konsol. Ini akan masuk ke debugger dalam 5 detik.

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

  • Tunjukkan elemen Anda (dengan mengarahkan atau bagaimanapun) dan tunggu sampai Chrome masuk ke Debugger.

  • Sekarang klik pada Elementstab di Inspektur Chrome, dan Anda dapat mencari elemen Anda di sana.
  • Anda juga dapat mengeklik Find Elementikon (terlihat seperti kaca pembesar) dan Chrome akan membiarkan Anda pergi dan memeriksa dan menemukan elemen Anda pada halaman dengan mengklik kanan padanya, lalu memilihInspect Element

Perhatikan bahwa pendekatan ini sedikit variasi untuk jawaban hebat lainnya di halaman ini.

Taman Brad
sumber
7
Saya menghormati bahwa Anda memberikan penghormatan yang tepat untuk jawaban frzsombor. bagus.
Jeremy Moritz
4
Inilah yang saya butuhkan, karena fungsionalitasnya adalah karena elemen DOM ditambahkan pada js Focus, dan dihapus pada blur, yang selalu terjadi ketika Anda beralih ke alat dev.
trudesign
6
Solusi F8 Abram tidak bekerja untuk saya. Yang ini. Terima kasih!
Ralf
3
Terima kasih. Saya membuat bookmark dengan judul : ❚❚, alamat : javascript:debugger;. F8berfungsi, tetapi bagi mereka yang lebih suka menggunakan mouse ini mungkin lebih nyaman.
Tymek
1
Seperti orang lain berkomentar, jawaban F8 tidak bekerja untuk saya, dan membuat saya benar-benar gila! Ini bekerja seperti pesona. Terima kasih!
DoYouEvenCodeBro
70

UPDATE: Seperti yang ditulis Brad Parks dalam komentarnya, ada solusi yang jauh lebih baik dan lebih mudah dengan hanya satu baris kode JS:

jalankan setTimeout(function(){debugger;},5000);, lalu tunjukkan elemen Anda dan tunggu sampai menerobos ke dalam Debugger

Jawaban asli:

Saya hanya memiliki masalah yang sama, dan saya pikir saya menemukan solusi "universal". (dengan asumsi situs menggunakan jQuery)
Semoga ini bisa membantu seseorang!

  1. Buka tab elemen di inspektur
  2. Klik kanan <body>dan klik " Edit sebagai HTML "
  3. Tambahkan elemen berikut setelah <body>kemudian tekan Ctrl + Enter:
    <div id="debugFreeze" data-rand="0"></div>
  4. Klik kanan elemen baru ini, dan pilih "Hentikan ..." -> "Atribut modifikasi"
  5. Sekarang pergi ke tampilan Konsol dan jalankan perintah berikut:
    setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
  6. Sekarang kembali ke jendela browser dan Anda memiliki 5 detik untuk menemukan elemen Anda dan klik / arahkan / fokus / dll itu, sebelum breakpoint akan dipukul dan browser akan "membeku".
  7. Sekarang Anda dapat memeriksa elemen Anda yang diklik / mengambang / terfokus / etc dengan tenang.

Tentu saja Anda dapat memodifikasi javascript dan waktunya, jika Anda mendapatkan ide.

frzsombor
sumber
11
Hei! Ide bagus ... Anda bahkan tidak perlu menambahkan div tambahan ... Jalankan saja javascript ini setTimeout(function(){debugger;}, 5000);, lalu tunjukkan elemen Anda dan tunggu sampai masuk ke dalam Debugger. Kemudian klik tab "Elemen" di Inspektur Chrome, dan Anda dapat mencari elemen Anda di sana. Anda juga dapat mengeklik ikon "Temukan Elemen" (terlihat seperti kaca pembesar) dan Chrome akan membiarkan Anda pergi dan memeriksa dan menemukan elemen Anda pada halaman dengan mengklik kanan padanya, lalu memilih "Periksa Elemen".
Brad Parks
5
Saya pikir Anda harus menambahkan ini sebagai jawaban, karena solusi ini bukan hanya lebih baik daripada milik saya, tetapi lebih baik daripada semua yang lain di sini. Benar-benar bagus!
frzsombor
38
  1. Klik kanan di mana saja di dalam Elemen Tab
  2. Memilih Breakon... > subtree modifications
  3. Memicu munculan yang ingin Anda lihat dan itu akan membeku jika melihat perubahan di DOM
  4. Jika Anda masih tidak melihat popup, klik Step over the next function(F10)tombol Resume(F8)di sebelah di bagian tengah atas krom sampai Anda membekukan popup yang ingin Anda lihat.
Adrian Enriquez
sumber
3
TERIMA KASIH! Saya tidak tahu yang ini dan itu menyelamatkan saya
R Claven
14

Saya menemukan bahwa ini bekerja dengan sangat baik di Chrome.

Klik kanan pada elemen yang ingin Anda periksa, lalu klik Force Element State> Hover. Tangkapan layar terlampir.

Status elemen kekuatan

Leah Huyghe
sumber
5
Ini hanya akan berfungsi jika popover dipicu oleh css.
mik01aj
6

Masukkan ini di tab konsol:

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

Kemudian klik tempat untuk menampilkan sembulan, 5s nanti - layar akan beku dan bersenang-senang menyesuaikan CSS.

Parker Lucenzo
sumber
0

Cara sederhana saya:

setTimeout(function(){ debugger; }, 3000);
Nadav B
sumber
7
Ini persis sama dengan solusi Brad Parks yang diposting 3 tahun lalu
frzsombor
-2

Saya mencoba solusi lain di sini, mereka bekerja tetapi saya malas jadi ini solusi saya

  1. arahkan elemen untuk memicu status diperluas
  2. ctrl+ shift+c
  3. arahkan elemen lagi
  4. klik kanan
  5. arahkan ke debugger

dengan mengklik kanan itu tidak lagi mendaftarkan acara mouse sejak menu konteks muncul, sehingga Anda dapat memindahkan mouse dengan aman

Vincent Tang
sumber