Periksa elemen yang hanya muncul ketika elemen lain diarahkan / dimasuki mouse

119

Seringkali saya ingin memeriksa elemen (misalnya tooltip) yang hanya muncul ketika elemen lain di-over / masuk mouse. Elemen yang muncul, dibuat terlihat melalui acara mouseenter jQuery.

Saya tidak dapat memeriksa tooltip, karena tooltip menghilang saat mouse saya meninggalkan elemen penampungnya.

Adakah cara untuk menjeda acara JS agar saya dapat mengarahkan kursor ke elemen, lalu menjeda JS browser, dan berhasil memeriksanya?

Sebagai contoh, coba periksa tooltips bootstrap Twitter: http://getbootstrap.com/javascript/#tooltips .

javascript google-chrome-devtools Don P
sumber
9
Perlu diketahui, jika elemen muncul karena CSS, bukan JS, Anda dapat memaksanya :hoverdengan mengklik kanan elemen tersebut dalam tampilan Elemen (DOM) di Alat Dev, memilih "Status Elemen Paksa", lalu ": hover".
MMM

Jawaban:

226

Ini cukup mudah di Chrome 38.0.2094.0.

Akan terlihat seperti ini:

Selangkah demi selangkah:

  1. Buka DevTools di panel Sources
  2. Buat tooltip muncul dengan mengarahkan kursor ke atas tombol
  3. Tekan F8 untuk membekukan halaman
  4. Beralih ke panel Elemen dan gunakan ikon kaca pembesar di kiri atas untuk memilih tooltip

Jika tooltip muncul karena CSS, inilah yang dapat Anda lakukan dalam kasus tersebut:

Selangkah demi selangkah:

  1. Buka DevTools
  2. Pilih elemen pemicu di alat dev (tautan)
  3. Klik kanan, dan pilih "force element state", dan pilih ": hover"
  4. Periksa tooltip CSS
Beberapa pria
sumber
1
@YuriyGalanter Tersedia melalui ikon spyglass di kiri atas. Cukup klik ikonnya, lalu klik tooltip :)
Sime Vidas
3
Ya, saya menambahkan GIF agar lebih mudah melihat apa yang saya lakukan.
Some Guy
2
@DonnyP saya gunakan byzanz-record. Ini adalah paket yang bisa Anda dapatkan sudo apt-get install byzanz.
Some Guy
5
Ada juga LICEcap , ini merekam sebagian layar secara langsung dalam GIF yang sangat dioptimalkan. Windows, OS X dan Linux.
fregante
2
@ bfred.it LICEcap tidak tersedia untuk Linux. Lihat masalah Github ini tentang topik tersebut. Tampaknya orang-orang berhasil menjalankannya dengan WINE .
Isaac Gregson
15

Kedua Safari dan Web Inspektur penawaran centang Chrome di mana Anda dapat beralih :active, :focus, :hoverdan :visitedkeadaan unsur. Menggunakannya mungkin lebih mudah.

Safari:

Kotak centang di Safari

Chrome:

Kotak centang di Chrome

zıəs uɐɟəʇs
sumber
5
Keterangan alat tidak dipicu oleh :hovergaya.
Šime Vidas
2
Firebug di Firefox memiliki hal yang sama (minus :visited, yang dibatasi untuk mencegah pengintaian) - di tab HTML, ada di tarik-turun "Gaya" di sebelah kanan
Izkata
1
@Izkata Untuk alat pengembang asli Firefox, klik kanan elemen di runut tautan, atau pohon HTML / DOM, dan pilih dari :hover, :activeatau :focus.
Kiran Harga
4

Ada juga cara rumit lain untuk melakukannya:

  1. Pergi ke elemen yang membuat tooltip Anda muncul.
  2. Klik kanan untuk membuka menu kontekstual.
  3. Gerakkan mouse Anda ke jendela alat pengembang dan klik kiri di mana saja di panel alat pengembang.

Tooltip Anda akan tetap terlihat, Anda kemudian dapat memeriksanya di tab Elemen.

Diuji di Chrome. Sepertinya tidak berfungsi di Firefox.

Nicolas Forney
sumber
1
Beginilah cara saya melakukannya di masa lalu, tetapi jawaban @ SomeGuy adalah cara terbaik dan termudah.
John Washam
@JohnDubya Tidak, sebenarnya tidak. Ini mungkin cara resmi, tetapi tentu tidak lebih mudah. Terlalu banyak langkah yang terlibat.
MiniRagnarok
Ini yang biasanya saya lakukan, tetapi tidak selalu berhasil.
Synetech
3

Meskipun jawaban @ SomeGuy sangat bagus (t-up untuk gif animasi), sebagai alternatif, Anda selalu dapat melakukannya secara terprogram. Cukup buka konsol dan ketik nama acara

document.getElementById('id').dispatchEvent(new Event('event-type'));

(dengan sintaks spesifik javascript murni dapat berbeda menurut browser)

Lebih mudah dengan jQuery:

$('#id').trigger('event-type');

Dalam contoh Anda ( http://getbootstrap.com/javascript/#tooltips ), buka konsol dan ketik, misalnya:

$("button:contains('Tooltip on right')").mouseenter();

Dan tooltip muncul di DOM dan dapat diperiksa / dimodifikasi secara manual:

<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>

Seperti di komentar, jika Anda menggerakkan penunjuk mouse ke atas bingkai halaman, Anda dapat memicu peristiwa lain seperti mouseout. Untuk mencegah hal ini, Anda dapat menekan F8(seperti dalam acc. Answer) atau type debugger;(yang setara skripnya)

blgt
sumber
1
Saat memeriksa elemen, Anda masih dapat memicu peristiwa lain (seperti mouseout), sehingga tidak menyelesaikan masalah sejak awal. Anda harus sangat berhati-hati saat memilihnya. Tetapi ini adalah pendekatan alternatif.
MMM