Periksa elemen hovered di Chrome?

106

Saya mencoba untuk melihat, melalui alat pengembang Chrome, bagaimana tooltips disusun di situs. Namun, meskipun saya mengarahkan kursor ke item, ketika saya "memeriksa elemen", tidak ada yang ditampilkan untuk tooltip di html. Saya tahu saya bisa menyetel Style ke :hover, tapi saya masih tidak bisa melihat html atau css tooltip.

Ada ide?

html css hover google-chrome-devtools Skitterm
sumber
Anda dapat menemukan solusi lain di sini untuk Chrome & Firefox
Muhammed Abdelfattah

Jawaban:

80

Saya benar-benar menemukan trik untuk melakukannya dengan tooltips Twitter Bootstrap. Jika Anda membuka alat pengembang (F12) di monitor lain, lalu arahkan kursor ke elemen untuk membuka keterangan alat, klik kanan seolah-olah Anda akan memilih 'Elemen Inspeksi'. Membiarkan menu konteks terbuka, pindahkan fokus ke alat pengembang. Html untuk tooltip akan muncul di sebelah elemen yang merupakan tooltip untuk HTML. Kemudian Anda dapat melihatnya seolah-olah itu adalah elemen lain. Jika Anda kembali ke Chrome, HTML menghilang jadi hanya sesuatu yang harus diperhatikan.

Agak cara yang aneh tetapi berhasil untuk saya jadi saya pikir saya akan membagikannya.

Justin Chmura
sumber
12
Ya, tapi tidak di Mac.
actimel
2
- Langkah 1: Periksa elemen yang menghasilkan tooltip untuk menampilkan alat Chrome Dev. - Langkah 2: saat mengarahkan kursor ke elemen, tooltip Anda akan muncul. Tanpa meninggalkan elemen, buka jendela baru (Command-N di Mac, Ctrl-N di tempat lain) - Langkah 3: Seret jendela baru di bawah jendela lama, sehingga Anda masih dapat melihat tooltip, lalu pindahkan kursor ke elemen inspektur . - Langkah 4: Gulir ke bawah, di mana tooltip Anda ditambahkan ke DOM. Klik elemen untuk melihat gayanya.
pgblu
2
PS ini tidak berfungsi untuk tooltips yang dihasilkan melalui Javascript dari atribut judul elemen itu sendiri, seperti yang terjadi pada SO. Tooltip tersebut menggunakan gaya default.
pgblu
Ini membantu saya untuk tooltips di Kendo
k29
1
Caranya: Pertama masuk ke tab source. Kemudian Anda dapat menjeda Javascript dengan tombol F8. Tombol jeda ada di sana dengan pintasan F8 / Ctrl + \ (Jawaban dari @Rajan di halaman ini)
rostamiani
85

Solusi ini berfungsi tanpa kode tambahan.

Tekan command-option-juntuk membuka konsol. Klik tombol jendela di pojok kanan atas konsol untuk membuka konsol di jendela lain.

Kemudian, di jendela Chrome, arahkan kursor ke elemen yang memicu popover, tekan command-`berapa kali Anda perlu fokus pada konsol, lalu ketik debugger. Itu akan membekukan halaman, lalu Anda dapat memeriksa elemen di tab Elemen.

joeyyang
sumber
6
Jawaban ini sangat bagus. Kode minimal, tidak ada jQuery atau pengaturan monitor ganda.
uKolka
1
Berhasil! Awalnya karena beberapa kesalahan konfigurasi, saya melihat tooltips HTML default dan bukan tooltips Bootstrap. Setelah memperbaiki masalah itu, solusi Anda berhasil. Terima kasih.
DFB
2
Selain itu, jika Anda kehilangan fokus saat menulis debuggerke konsol, Anda dapat menekan alt+tabsambil mengarahkan kursor ke elemen. Ini berfungsi untuk aplikasi Chromium di Windows.
Orcun
1
Ini jawaban yang bagus!
Nobita
Halaman Pintasan Keyboard Chrome DevTools mengatakan itu adalah kontrol + `bukan perintah +` untuk fokus kembali ke konsol. Mungkin itu berubah.
rinat.io
85

F8 akan menjeda proses debug.

Arahkan mouse ke atas tooltip, dan tekan F8saat itu ditampilkan.

Anda sekarang dapat menggunakan inspektur untuk melihat CSS.

dwjohnston.dll
sumber
4
Saya suka bagaimana di Stackoverflow, selama Anda terus menggulir ke bawah, Anda akan menemukan jawaban yang sangat bagus yang jauh lebih baik daripada yang lain. Ini sederhana dan mudah tanpa skrip tambahan.
Alexander Dixon
2
F8 tidak berfungsi untuk saya karena suatu alasan, tetapi jeda juga terikat pada ctrl- \
Bryan Larsen
Solusi terbaik di sini
NiallMitch14
Baik <kbd> F8 </kbd> maupun <kbd> AltGr </kbd> - <kbd> RCtrl </kbd> - <kbd> ß </kbd> pada tata letak keyboard Jerman saya tidak menjeda debugger.
menguji
63

Anda hanya perlu memaksa tooltip untuk tampil seperti itu

$('.myelement').tooltip('open');

Sekarang tooltip akan tampil terlepas dari status hovering.

Gulir ke bawah di dekat bagian bawah DOM tempat Anda akan melihat markup.

Pembaruan lihat komentar cneuro untuk Bootstrap 3.

$('.myelement').tooltip('show');

Pembaruan lihat jawaban Marko Grešak untuk Chrome dan tampaknya Safari juga, $0dapat digunakan sebagai pintasan untuk elemen yang saat ini dipilih. Tampaknya ini juga berfungsi di Safari.

$($0).tooltip('show')
Adam Grant
sumber
1
$ ('. myelement'). tooltip ('open') adalah yang berhasil untuk saya.
tekumara
6
Pada Bootstrap 3, ini sekarang .tooltip('show') getbootstrap.com/javascript/#tooltips-methods
cneuro
2
Di Chrome, elemen yang dipilih saat ini dapat diakses seperti $0di konsol. Oleh karena itu, Anda dapat memilih elemen yang memicu tooltip dan menjalankannya $($0).tooltip('show').
Marko Grešak
31

Klik f12pergi ke tab konsol dan tambahkan yang berikut ini:

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

Ini akan memberi Anda 5 detik untuk melakukan apa pun yang Anda inginkan dan itu akan gagal 5 seconds. Kemudian Anda dapat memeriksa elemen target

(mis. arahkan kursor ke elemen dan tunggu 5 detik lalu periksa ..)

Ali Kleit
sumber
Bekerja di Electron juga.
xmedeko
24

Bagi saya, jawaban yang diterima tidak berhasil: mengklik di DevTools segera menutup ToolTip.

Namun, saya menemukan /superuser/249050/chrome-keyboard-shortcut-to-pause-script-execution yang membantu saya:

  1. Di konsol :, Jalankan:
    const F12 = 123
    window.addEventListener('keydown', function(event) { 
      if (event.keyCode === F12 ) {
        debugger; 
      }
    });

  1. Sorot elemen dengan inspektur

  2. Tekan F12

Anda sekarang dapat memeriksa elemen tersebut, dengan JavaScript dijeda sehingga DOM tidak akan berubah.

mikemaccana
sumber
1
Pintar! Persis apa yang saya cari. Terima kasih :) Meskipun tidak bekerja dengan F12 dengan pengaturan saya karena beberapa alasan, jadi saya menggunakan keyCode == 13 dan menekan ENTER.
Jeremy F.
2
solusi yang bagus! saya akan menyarankan untuk menyimpan cuplikan berguna ini di SOURCE -> SNIPPETS area chrome sehingga Anda dapat menjalankannya hanya dengan dua klik;)
Magico
1
Solusi ini jauh lebih unggul daripada yang diterima. Aku akan membuatnya menjadi bookmarklet!
Lulu
1
Solusi bagus. Sangat pintar.
Charlie Dalsass
1
Sempurna. Seharusnya jawaban yang benar / diterima!
Brosig
10

Jawaban satu jendela, tanpa coding

Tidak ada jawaban lain yang benar, atau memiliki cukup detail, jadi inilah upaya saya.

  • Buka DevTools Chrome menggunakan F12 / Ctrl + Shift + I (Windows / Linux) atau Command + Option + I (Mac).
  • Pilih tab Sources di jendela DevTools.
  • Dengan menggunakan mouse, arahkan kursor ke elemen yang ingin Anda periksa, untuk membuat tooltip terlihat.
  • Tekan F8 (Windows / Linux / Mac) untuk menjeda eksekusi skrip. Jendela utama akan berwarna abu-abu, dan popup "Paused in debugger" akan muncul.
  • Di jendela DevTools, pilih tab Elemen
  • Untuk tooltips Bootstrap, tooltip akan muncul sebagai yang terakhir <div>di file<body>
TobyLL
sumber
5

Tidak ada solusi kode untuk tooltips yang diaktifkan JS:

Dengan alat pengembang Chrome, periksa elemen penampung / induk dari tooltip. Di tab "elemen", klik kanan pada elemen DOM penampung tersebut, lalu pilih "hentikan"> "modifikasi subpohon". Saat berikutnya Anda mengarahkan kursor ke bagian DOM tempat tooltip berada, kode JS akan dijeda sehingga Anda dapat memeriksa konten tooltip.

clhenrick
sumber
4

Ikuti langkah ini

  1. Buka Inspectjendela di chrome.

  2. Tempatkan mouse di atas tooltip.

  3. tekan F8

    Eksekusi JS akan dihentikan sementara dan kemudian Anda dapat memeriksa tooltip.

  4. Tekan F8lagi untuk memulai eksekusi dan F10untuk debug.

Parvez Ahmed
sumber
2

Berikut solusi sederhana: Jika Anda memiliki keterangan alat dinamis, Anda dapat membuatnya "tetap" dengan (sementara) mengubah peristiwa pemicu menjadi click. Ini akan berdampak bahwa keterangan alat hanya menghilang saat diklik:

$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

Dengan cara ini, dapat dengan mudah diperiksa dengan alat debugging FF atau Chrome.

lxg
sumber
2

1) Buka jendela Inspect dengan mengklik F12

2) Buka tab sumber (di sebelah konsol)

3) Sekarang arahkan kursor ke elemen yang akan diperiksa dan arahkan mouse Anda ke sana.

4) Menggunakan keyboard (Tab atau shift + tab) untuk menggerakkan kontrol ke tombol jeda atau F8 Lihat gambar

5) Saat fokus keyboard ada pada tombol Putar. Tekan enter. Elemen hover Anda akan dibekukan, Anda dapat melakukan apa saja sekarang

Rajan
sumber
1

mengedit tooltips ini sangat mudah.

Langkah 1 : Periksa elemen yang memiliki tooltip. Pastikan itu disorot dengan warna biru di devtools.

Langkah 2 : klik kanan pada elemen (di bagian devtools) dan pilih: modifikasi atribut, di bawah Break on masukkan deskripsi gambar di sini

Langkah 3 : Arahkan kursor ke elemen yang diperiksa dan hamparan abu-abu akan muncul di atas situs dengan teks kecil: Dijeda di debugger

masukkan deskripsi gambar di sini

di bagian atas layar Anda

Langkah 4 : Klik pada panah biru hingga status hover dipilih.

Langkah 5 : Periksa dan edit keterangan alat

Catalin
sumber
0

Saya mengalami masalah dengan ini jadi saya pergi ke dokumentasi dan memeriksa tooltip yang sudah diberikan pada halaman. Itu membantu saya melihat struktur dom dari tooltip dan mengeditnya sesuai.

philip
sumber
0

Di Chome di Linux, hal ini dapat dilakukan untuk tooltips yang dihasilkan JS seperti yang untuk referensi di WikiPedia dengan melakukan hal berikut:

Seperti yang dinyatakan di atas, buka alat dev menggunakan F12. Buka di jendela lain. Sorot tooltip dan klik Ctrl-Shift-C (The HTML Inspector). Saat Anda memindahkan tip, jendela dev akan menampilkan bagian yang sesuai.

Jika Anda perlu membiarkan ujung tetap terbuka saat Anda mematikannya, untuk dapat memeriksanya di jendela lain dengan lebih teliti, lalu klik kanan pada tooltip dan biarkan menu konteks di atas, dan klik pada jendela alat pengembang. Dalam skenario ini, ujungnya berada di jendela wikipedia.

Pada tingkat tertentu, ini juga bekerja dengan tip bootstrap.

pengguna1806949
sumber
0

Untuk beberapa alasan jawaban yang diberikan di sini tidak berfungsi untuk saya di Windows. Saya dapat memeriksa tooltip dengan membuka dev tools, lalu mengarahkan kursor ke elemen yang menampilkan tooltip, lalu mengklik kanan elemen itu (bukan tooltip). Kemudian, gerakkan kursor ke panel inspektur dan gulir ke bawah ke bawah. Elemen tooltip harus tetap ada.

Nolan Lindeke
sumber
0

Alat dev menyediakan cara untuk memeriksa elemen yang di-hover seperti tooltip.

1 - Buka alat dev menggunakan F12.

2 - Pilih tab "Elemen".

3 - Pilih elemen induk yang berisi tooltip.

4 - Klik "..." (pada baris elemen induk) dan setelah pilih "Hentikan" / "modifikasi subpohon" (lihat gambar di bawah)

Setel Break pada elemen induk

5 - Terakhir, kembali ke aplikasi dan buat Tooltip muncul. Ini harus memblokir eksekusi setelah Tooltip terlihat

Semoga dapat bermanfaat bagi seseorang!

Ricardo Magalhães
sumber
0

Solusi lain yang saya temukan untuk masalah ini. Melalui tampilan Seluler atau Tablet di Chrome, tekan Crt + Shift + M di alat Chrome Dev untuk tampilan Seluler di Chrome. Klik (Tap) pada div ToolTip dan Anda dapat memeriksanya dengan Klik Kanan pada tooltip

HERAwais
sumber
0

Tekan command-option-juntuk membuka konsol. Klik tombol jendela di pojok kanan atas konsol untuk membuka konsol di jendela lain.

Kemudian, di jendela Chrome, arahkan kursor ke elemen yang memicu popover, tekan command-berapa kali Anda perlu fokus pada konsol, lalu ketik debugger. Itu akan membekukan halaman; lalu Anda dapat memeriksa elemen di tab Elemen.

Okau123
sumber
-1

Perlu dicatat bahwa mengubah status: hover dari dalam alat dev hanya berdampak jika teks petunjuk diaktifkan melalui CSS: aturan hover di tempat pertama. Tombol beralih hanya menerapkan status hover ke elemen untuk tujuan rendering, tetapi tidak memicu peristiwa gerakan mouse JavaScript yang sesuai.

Banyak kerangka kerja seperti AngularJS secara dinamis melampirkan HTML tooltip ke bagian bawah badan dokumen melalui JavaScript saat elemen target di-hover, jadi berapa pun jumlah hovering dan pemeriksaan elemen target tidak akan membantu.

Jawaban @ joeyyang bekerja sangat baik untuk saya dalam skenario ini.

John Rix
sumber
-2

Salah satu cara termudah yang saya temukan adalah:

  1. Buka alat pengembang Chrome di samping

  2. Arahkan kursor ke elemen

  3. Klik kanan

  4. Klik pada alat pengembang

  5. Sekarang Anda dapat memeriksa dan mengubah gaya

Kaspars Siricenko
sumber
Ini tidak membantu @Kaspars
Es Noguera
@EsNoguera bisa lebih spesifik mengapa. Inilah cara kerjanya bagi saya. Karena saya menemukan metode yang berhasil mengapa tidak disarankan?
Kaspars Siricenko