Bagaimana cara mengatur breakpoint JavaScript dari kode di Chrome?

686

Saya ingin memaksa debugger Chrome untuk memecahkan baris melalui kode , atau menggunakan semacam tag komentar seperti sesuatu seperti console.break().

— Paul
sumber

46

Sudahkah Anda mencoba debugger;atau hanya menggunakan breakpoint biasa di toolbar pengembang?

— diaho

maksud Anda mengatur breakpoint dari kode itu sendiri daripada mengaturnya menggunakan pengamat skrip di alat pengembang?

— Faris M

2

Atau mungkin lebih baik: Mengatur breakpoint di XHR di Chrome .

— Felix Kling

9

Bukan duplikat. "di Chrome" vs "dalam kode" adalah dua hal yang berbeda, dan pertanyaan ini berlaku untuk banyak skenario non-XHR. Ya 1 jawaban di pertanyaan lain menjawab pertanyaan ini, tetapi yang lain tidak berlaku. Saya benar-benar googled "set javascript breakpoint dari kode chrome" dan ini adalah hasil pertama, dan pertanyaan lainnya bahkan tidak ada di halaman pertama.

— AaronLS

Kemungkinan duplikat mengontrol breakpoint terprogram dalam Javascript?

— Gerardo Lima

1158

Anda dapat menggunakan debugger;dalam kode Anda. Jika konsol pengembang terbuka, eksekusi akan rusak. Ia bekerja di pembakar juga.

— xn.
sumber

8

Trik yang bagus adalah memicu debugger setelah beberapa detik:setTimeout(function(){debugger;}, 3000);

— Shahar

30

Apakah pengatur waktu itu merupakan praktik umum? Verifikasi / pembenaran?

— Justus Eapen

4

Ini sangat membantu. Catatan juga debugger;didukung di semua browser utama. Untuk informasi lebih lanjut: w3schools.com/jsref/jsref_debugger.asp

— ScottyG

16

@ScottyG MDN kurang mengkilap, lebih bermanfaat: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

— jpaugh

@JustusEapen Masalahnya adalah bahwa Javascript adalah single-threaded, sehingga tidak dapat mengganggu kode yang sedang berjalan.

— Vitruvius

27

Siapkan pendengar klik tombol dan panggil debugger;

Contoh

$("#myBtn").click(function() {
 debugger;   
});

Demo

http://jsfiddle.net/hBCH5/

Sumber daya tentang debugging dalam JavaScript

— martynas
sumber

1

Itu menetapkan breakpoint di penangan klik, mungkin bukan yang diinginkan OP

— ᆼ ᆺ ᆼ

@PeterV Saya akan merasa berguna jika saya hanya mencoba untuk membuka kode saya ke tempat yang dekat dengan blok kode yang saya debug ... tetapi tidak ingin men-debug sepanjang waktu ... tapi ya , jika hanya untuk membuka debugger ... maka ada penekanan tombol untuk itu.

— Armstrongest

27

Anda juga dapat menggunakan debug(function), untuk memutuskan kapan functiondipanggil.

Referensi API Baris Perintah: debug

— Pelindung satu
sumber

2

Sangat bagus - tampaknya hanya Chrome saat ini, tapi itulah platform utama saya. Sekarang saya hanya perlu ingat untuk berhenti memanggil bendera debugging global saya "debug" ...

— brichins

Referensi API Baris Perintah Debugger Chrome sebenarnya mengandung beberapa hal yang cukup membantu yang tidak saya sadari. Terima kasih!

— Peter T.

16

Seperti yang telah dikatakan orang lain, debugger;adalah jalan yang harus ditempuh. Saya menulis sebuah skrip kecil yang dapat Anda gunakan dari baris perintah di browser untuk mengatur dan menghapus breakpoint tepat sebelum pemanggilan fungsi: http://andrijac.github.io/blog/2014/01/31/javascript-breakpoint/

— Andrija
sumber

8

Pada tab "Skrip", buka di mana kode Anda. Di sebelah kiri nomor baris, klik. Ini akan menetapkan breakpoint.

Tangkapan layar:

tangkapan layar breakpoint di chrome

Anda kemudian dapat melacak breakpoint Anda di tab kanan (seperti yang ditunjukkan pada tangkapan layar).

— Florian Margaine
sumber

41

Ini tidak menjawab pertanyaan, dia ingin dapat melakukannya dalam kode

— robertc

39

xn .: "Ini gambar jawaban saya, dulu ketika masih bayi kecil dengan 0 suara. Semuanya sudah dewasa sekarang."

— AaronLS

3

Jika Anda memuat skrip JS dengan panggilan Ajax, itu tidak akan ditampilkan di sini, maka perlu breakpoint dalam kode.

— Petruza

@FlorianMargaine, Tidak ada tab Skrip lagi. Harap perbarui gambar.

— Pacerier

Dalam beberapa kerangka kerja, seperti Drupal, JS mendapatkan sufiks string penghilang cache yang ditambahkan. Jika Anda membersihkan cache, sering kali sufiks ini diperbarui yang dapat menghapus setiap breakpoint yang telah Anda atur pada beban sebelumnya.

— Nick

7

debugger adalah kata kunci yang disediakan oleh EcmaScript dan diberikan semantik opsional sejak ES5

Sebagai hasilnya, ia dapat digunakan tidak hanya di Chrome, tetapi juga Firefox dan Node.js vianode debug myscript.js .

The standar mengatakan :

Sintaksis
DebuggerStatement :
    debugger ;
Semantik

Mengevaluasi produksi DebuggerStatement dapat memungkinkan implementasi menyebabkan breakpoint ketika dijalankan di bawah debugger. Jika debugger tidak ada atau aktif, pernyataan ini tidak memiliki efek yang dapat diamati.

DebuggerStatement produksi: debugger; dievaluasi sebagai berikut:

Jika fasilitas debugging yang ditentukan implementasi tersedia dan diaktifkan, maka

Lakukan tindakan debugging yang ditentukan implementasi.

Biarkan hasilnya menjadi nilai Penyelesaian yang ditetapkan implementasi.

Lain

Biarkan hasilnya menjadi (normal, kosong, kosong).

Hasil kembali.

Tidak ada perubahan dalam ES6.

— Ciro Santilli 郝海东冠状病六四事件法轮功
sumber

3

Itu mungkin dan ada banyak alasan Anda mungkin ingin melakukan ini. Misalnya debugging loop tak terbatas javascript dekat dengan awal pemuatan halaman, yang menghentikan toolset pengembang chrome (atau pembakar) dari memuat dengan benar.

Lihat bagian 2 dari

http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/

atau cukup tambahkan baris yang berisi kata debugger ke kode Anda pada titik uji yang diperlukan.

— pengguna2539341
sumber

3

Breakpoint: -

breakpoint akan berhenti dieksekusi, dan membiarkan Anda memeriksa nilai-nilai JavaScript.

Setelah memeriksa nilai, Anda dapat melanjutkan eksekusi kode (biasanya dengan tombol putar).

Debugger: -

Debugger; menghentikan eksekusi JavaScript, dan memanggil fungsi debugging.

Pernyataan debugger menunda eksekusi, tetapi tidak menutup file atau menghapus variabel apa pun.

Example:-
function checkBuggyStuff() {
  debugger; // do buggy stuff to examine.
};

— Parth Raval
sumber

3

Anda bisa mengatur debug(functionName) fungsi debug juga.

https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#function

— Lance Pollard
sumber

2

Ada banyak cara untuk men-debug kode JavaScript. Berikut dua pendekatan yang banyak digunakan untuk men-debug JavaScript melalui kode

Menggunakan console.log()untuk mencetak nilai-nilai di konsol browser. (Ini akan membantu Anda memahami nilai-nilai pada titik-titik tertentu dari kode Anda)
Kata kunci debugger. Tambahkan debugger;ke lokasi yang ingin Anda debug, dan buka konsol pengembang browser dan navigasikan ke tab sumber.

Untuk lebih banyak alat dan cara di mana Anda men-debug Kode JavaScript, diberikan dalam tautan ini oleh W3School .

— Keet Sugathadasa
sumber

1

+1 dan menggunakan console.log juga membantu menemukan kode Anda, karena biasanya file / baris # ditampilkan di sebelah pesan, dan Anda dapat mengekliknya untuk membuka kode Anda di debugger, mengatur breakpoint, dll.

— John Henckel

0

Saya tidak akan merekomendasikan debugger;jika Anda hanya ingin membunuh dan menghentikan kode javascript, karena debugger;hanya akan membekukan sementara kode javascript Anda dan tidak menghentikannya secara permanen.

Jika Anda ingin benar-benar membunuh dan menghentikan kode javascript atas perintah Anda gunakan yang berikut ini:

throw new Error("This error message appears because I placed it");

— S To
sumber