JavaScript: Cara menyetel Titik Henti Bersyarat di alat debugger Chrome

100

Saya memiliki file js sederhana ini, yang mencetak tanggal terus menerus.

Saya menggunakan alat Debugger Google Chrome (F12)

Pertanyaan saya adalah, Apakah mungkin menetapkan break point bersyarat di Google Chrome ??

Dalam kode saya, saya ingin menetapkan titik istirahat jika nilai detik sama dengan 50 ??

s = date.getSeconds();

Ini adalah jsfiddle dimana sumber saya

(Tidak yakin mengapa ini tidak berfungsi di jsfiddle)

Pokoknya pertanyaan saya adalah, Apakah mungkin untuk Menetapkan Titik Henti Konditinal di alat Chrome Debugger ??

Pawan
sumber
1
+1 karena saya tidak tahu itu mungkin sampai pergi untuk memeriksa dokumentasi untuk menjawab pertanyaan ini. Terima kasih!
Theraot

Jawaban:

141

Ya, itu mungkin.

Klik kanan penanda breakpoint dan pilih "Edit breakpoint ..." di sana Anda dapat mengatur kondisi.

Dari Alat Pengembang Chrome di Breakpoints di developers.google.com (Emphasis mine):

Catatan: Semua breakpoint yang telah Anda atur muncul di bawah Breakpoints di sidebar kanan. Mengklik entri akan melompat ke baris yang disorot di file sumber. Setelah Anda memiliki satu set breakpoint, klik kanan pada indikator breakpoint tag biru untuk menyetel pernyataan bersyarat untuk breakpoint itu . Ketik ekspresi dan breakpoint hanya akan berhenti jika kondisinya benar.

Theraot
sumber
Terima kasih, saya melakukan seperti yang Anda sebutkan, mengedit break point dan menetapkan if (s == 50) tetapi mengapa tidak berhenti pada kondisi itu ??
Pawan
2
@PreethiJain tulis hanya dengan kondisi "s == 50" (tanpa tanda kutip). By the way, saya berhasil membuat pekerjaan jsfiddle di: jsfiddle.net/nVpXN/6
Theraot
6
Anda bahkan tidak perlu menambahkan breakpoint untuk memulai. Cukup klik kanan pada baris dan klik "Tambahkan titik putus bersyarat ..." .
Martin Ender
2
Sobat, ini tahun 2017, dan saya mempelajari hal-hal dasar baru tentang Chrome. #Awesomeness
The Qodesmith
1
Ini hanya akan memeriksa pernyataan pada titik ini dalam eksekusi kode dan kemudian memutuskan jika demikian, sama seperti breakpoint dalam pernyataan if. Saya pikir OP ingin tahu apakah debugger memeriksa setiap eksekusi pernyataan apakah kondisinya terpenuhi dan apakah debugger rusak pada baris ini. Perilaku ini jauh lebih berguna karena Anda tidak perlu bermain detektif untuk mengetahui kapan variabel melakukan sesuatu yang tidak terduga.
ejectamenta
27

Lihatlah debuggerpernyataannya. Pada dasarnya ini memanggil alat debugger apa pun yang tersedia, dan di Chrome bertindak seolah-olah juru bahasa bertemu dengan titik putus.

Kode Anda adalah:

s = date.getSeconds();
if (s == 50) {
   debugger;
}

Dari referensi :

[debugger] Memanggil fungsionalitas debug yang tersedia. Jika tidak ada fungsionalitas debugging yang tersedia, pernyataan ini tidak berpengaruh.

teman gila
sumber
Meskipun ini sebenarnya lebih sesuai dengan semangat aslinya, pertanyaan asli diajukan, dan ini adalah informasi yang bagus; Saya pikir pertanyaan sebenarnya adalah tentang Alat Chrome, bukan ECMAscript. Yang telah dibilang; ada peringatan yang harus ditambahkan: hapus semua debuggerpanggilan dalam kode produksi. (Saya cukup yakin linting akan menimbulkan kesalahan jika debugger ada, tetapi perlu dipanggil setiap kali topik dimunculkan).
Crispen Smith
1
Anda tidak memerlukan pernyataan debugger, Anda juga bisa memiliki pernyataan kosong di dalam if dan tambahkan saja breakpoint di sana.
ejectamenta
8

Anda dapat menyetel break point bersyarat di Google Chrome, dengan mengikuti langkah-langkah berikut:

1. klik kanan breakpoint di mana Anda ingin berhenti, silakan lanjutkan masukkan deskripsi gambar di sini

2. klik "Add conditional breakpoint", akan muncul satu text, disana kamu bisa menambahkan condition (hasilnya akan 'true' jika kondisinya terpenuhi, selain 'false'), warna breakpoint akan menjadi orange setelah kondisi ditambahkan, chk on masukkan deskripsi gambar di sini

3. reload halaman yang sama kamu bisa melihat breakpoint akan bekerja jika kondisinya terpenuhi seperti masukkan deskripsi gambar di sini

Deepan Raj
sumber