Pintasan keyboard Chrome untuk menjeda eksekusi skrip

48

Apakah ada pintasan keyboard di Google Chrome yang akan memecah eksekusi skrip? (Setara dengan menekan tombol ||"Jeda eksekusi skrip" pada panel Skrip Alat Pengembang.)

Saya ingin menggunakan Alat Dev untuk memeriksa elemen dalam keadaan mouseover-nya; yang mouseleavekode jelas akan berjalan jika saya mencoba untuk benar-benar klik tombol pause!

google-chrome  keyboard-shortcuts  web-development 
— josh3736
sumber

Jawaban:

56

Meskipun saya belum menemukan solusi yang tepat untuk masalah ini, saya memang membuat satu-liner yang dapat dimasukkan ke dalam halaman (atau ditempelkan di konsol Javascript) untuk mencapai tujuan saya:

jQuery(window).keydown(function(e) { if (e.keyCode == 123) debugger; });

Ini akan menyebabkan eksekusi dijeda ketika Anda menekan F12.

( debuggeradalah pernyataan JavaScript yang memaksa breakpoint.)

Pembaruan: Dev Tools memiliki banyak pintasan bawaan (tekan F1untuk daftar), tetapi Anda harus fokus pada jendela Dev Tools agar bisa berfungsi. Menjeda eksekusi skrip adalah F8(saat melihat tab Sumber, pada Chrome 45) atau Ctrl+ /.

Lapisan satu di atas mungkin masih berguna jika Anda harus tetap fokus pada halaman sebelum berhenti.

— josh3736
sumber
6
F8 hanya berfungsi saat Anda berada di halaman "Sumber" di DevTools (Chrome 40)
— netvope
1
Apakah CTRL + / berfungsi di Linux atau sesuatu? Karena CTRL + \ tampaknya berfungsi di bawah Windows, dan menurut yang lain itu akan menjadi CMD + \ untuk MAC.
— djabraham
1
Efek yang sama tetapi tanpa memerlukan jQuery:window.addEventListener('keydown', e => { if (e.keyCode === 123) debugger })
— pau.moreno
kadang-kadang acara hotkey menutup elemen yang ingin Anda periksa, setTimeout(function() { debugger; }, 1000)membantu di sini
— cyptus
14

Daftar Referensi Pintasan Keyboard Google untuk "Jeda / lanjutkan eksekusi skrip":

  • F8atau Ctrl+ \(Windows)
  • F8atau Cmd+ \(Mac)

Ada cara yang lebih mudah untuk memeriksa hal-hal dalam keadaan aneh seperti melayang-layang atau aktif. Pertama, temukan simpul DOM di panel Elemen Alat Chrome Dev. Sekarang Anda dapat mengklik kanan node dan melihat "Force Element State" di menu konteks, atau pilih node dan lihat di tab Styles dan temukan ikon dash-box-with-mouse-pointer di kanan atas. (di sebelah ikon + / plus yang memungkinkan Anda menambahkan aturan CSS baru element.style, elemen yang Anda pilih).

Saat Anda mengaktifkan salah satu status ini, margin kiri panel elemen mendapat lingkaran kecil untuk menunjukkan bahwa Anda telah menimpa keadaan alami elemen pada garis itu.

— alxndr
sumber
3
F8 tidak berfungsi di jendela browser utama, hanya di jendela Dev Tools. Menggunakan Force Element State tidak membantu ketika skrip mendengarkan acara (bukan hanya CSS) yang melakukan hal-hal.
— josh3736
3
F8 memang berfungsi di jendela browser utama tetapi Anda harus memiliki jendela Dev Tools terbuka ke tab Source di latar belakang.
— reor
8

Saya menulis sedikit Ekstensi Chrome cepat yang memungkinkan Anda untuk menekan tombol Jeda pada keyboard Anda untuk menjeda eksekusi javascript

Bagaimana cara mendapatkannya:

Pemakaian:

  1. Biarkan alat pengembang chrome tetap terbuka
  2. Tekan pause/breakpada keyboard Anda
— SpareBytes
sumber
1
@ Flu, saya menambahkannya ke Toko Web Chrome. Nikmati
— SpareBytes
Ini bekerja sangat baik - saya bisa berhenti sehingga saya bisa memeriksa HTML secara dinamis menyuntikkan ke halaman. Menggunakan Alat Pengembang tidak berfungsi karena HTML sedang dihapus oleh kode ketika kehilangan fokus.
— Kenny Evitt
Keyboard saya tidak memiliki tombol "Pause / break", jadi saya harus memetakannya ke tombol yang berbeda. Apa yang tidak segera jelas bagi saya adalah bahwa Anda perlu menahan kombinasi tombol baru SAAT Anda mengklik tombol "Simpan Combo".
— Jasper Citi
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.