Cara menggunakan chrome web inspector untuk melihat kode hover

99

Sangat berguna menggunakan chrome web inspector untuk melihat kode. Tapi bagaimana Anda melihat misalnya kode hover untuk sebuah tombol? Anda harus mengarahkan mouse ke atas tombol dan karenanya tidak dapat menggunakannya (mouse) di inspektur. Apakah ada jalan pintas atau cara lain untuk melakukannya di inspektur?

css google-chrome google-chrome-devtools web-inspector Bo.
sumber
2
Bukankah ini duplikat dari ini? stackoverflow.com/questions/4515124/…
Mixologic
Apakah ini menjawab pertanyaan Anda? Lihat: status hover di Alat Pengembang Chrome
TylerH

Jawaban:

156

Sekarang Anda dapat melihat kedua aturan gaya kelas-semu dan memaksanya pada elemen.

Untuk melihat aturan seperti :hoverdi panel Styles klik tombol kotak bertitik kecil di kanan atas.

Untuk memaksa elemen menjadi :hoverstatus, klik kanan.

Alternatifnya, Anda dapat menggunakan panel sidebar Event Listener Breakpoints di panel Scripts dan memilih untuk menjeda di pengendali gerakan mouse.

Travis Northcutt
sumber
1
Di Chrome 48 (dan perh sebelumnya), kotak bertitik itu telah diganti dengan ikon pushpin yang bertuliskan Toggle Element State saat Anda mengarahkan kursor ke atasnya. Kemudian Anda memilih "hover" dari daftar drop-down.
sameers
15

Alternatifnya, Anda dapat menggunakan panel sidebar Event Listener Breakpoints di panel Scripts dan memilih untuk menjeda di pengendali gerakan mouse.

Yury Semikhatsky
sumber
6

Ini sedikit mengganggu, tetapi Anda perlu mengklik kanan pada elemen tersebut, dan kemudian, arahkan mouse Anda ke atas tautan, gunakan keyboard Anda pilih tautan 'Inspect Element' dan tekan enter. Ini akan menunjukkan kepada Anda css untuk kelas semu hover untuk elemen yang dipilih.

Kami berharap mereka membuat ini sedikit lebih mudah di masa mendatang.

purpletonik
sumber
Sebaiknya Anda tahu, tapi ya, ini sangat membuat frustrasi karena mouse harus tetap melayang di atas tautan ... bahkan saat Anda melihat-lihat di jendela Elemen Inspeksi hanya dengan menggunakan keyboard. Gangguan apa!
Chad Schultz
The aktual Seluruh proses memaksa elemen untuk :hovernegara, ( as in the accepted answer), juga dicapai Via mengklik kanan atas elemen,> Inspect, dan menjaga pointer di sana, dan kemudian menggunakan tombol keyboard untuk memeriksa kode semu .. Terima kasih untuk ini bekerja alternatif .... Jadi sebenarnya bukan gangguan !
:)
5

Di Chrome:

Anda juga dapat mengarahkan mouse ke sebuah elemen, lalu klik CTRL+SHIFT+Cuntuk memeriksa elemen itu.

Di Firefox:

masukkan deskripsi gambar di sini

di firebug:

masukkan deskripsi gambar di sini

sumber: https://stackoverflow.com/a/11272205/2165415

T.Todua
sumber
1

Saya tidak yakin bahwa saya benar memahami pertanyaan Anda, tetapi jika Anda ingin melihat kode event handler, Anda cukup memeriksa elemen dan melihat panel sidebar Event Listeners dari Panel Elemen. Cara lain adalah dengan menekan tombol pause di Scripts Panel dan mengarahkan kursor ke elemen tersebut. Debugger akan berhenti pada instruksi pertama pengendali kejadian pertama.

loislo
sumber
Bisakah Anda sedikit lebih spesifik tentang bagaimana Anda melakukan ini ?. Kasus tipikal adalah tombol yang saya suka, dan ingin melihat bagaimana efek melayang dicapai dengan cara yang sama mudahnya seperti inspeksi biasa.
Bo.
0

Silakan lihat tautan di bawah ini untuk mendapatkan jawabannya

Lihat: status hover di Alat Pengembang Chrome

Santosh Khalse
sumber
Tautan mungkin kedaluwarsa dan membuat jawaban Anda tidak berguna. Harap berikan beberapa informasi dalam jawaban Anda untuk mencegahnya.
Bojidar Stanchev