Bagaimana cara menghentikan eksekusi skrip ketika debugging di Google Chrome?

210

Saat melangkah melalui kode JavaScript di debugger Google Chrome, bagaimana cara saya menghentikan eksekusi skrip jika saya tidak ingin melanjutkan? Satu-satunya cara saya temukan adalah menutup jendela browser.

Menekan "Reload this page" menjalankan sisa kode dan bahkan mengirimkan formulir seolah-olah menekan F8 "Lanjutkan".

PEMBARUAN :

Saat menekan F5 (Refresh) saat skrip dijeda:

  • Google Chrome (v22) menjalankan skrip. Jika skrip mengirimkan permintaan HTTP, respons HTTP untuk permintaan itu ditampilkan. Halaman asli tidak di-refresh.
  • IE 9 membeku. Namun IE memiliki opsi "Stop Debugging" yang, ketika ditekan (asalkan Anda tidak menekan F5 sebelumnya), terus menjalankan skrip di luar debugger.
  • Firebug berperilaku identik dengan Chrome.

Menutup dan kemudian membuka kembali jendela browser tidak selalu merupakan cara termudah berikutnya karena akan mematikan status sesi browser dan itu mungkin penting. Semua breakpoints Anda juga hilang.

PEMBARUAN (Jan 2014) :

Refresh saat debugging:

  • Chrome v31: memungkinkan skrip untuk berjalan dan berhenti pada breakpoints lebih lanjut (tetapi tidak mengirimkan permintaan ajax), lalu menyegarkan.
  • IE 11: refresh tidak melakukan apa-apa, tetapi Anda dapat menekan F5 untuk melanjutkan.
  • Firefox v26: memungkinkan skrip untuk berjalan tetapi tidak berhenti pada breakpoints lebih lanjut, mengirimkan permintaan ajax, lalu menyegarkan.

Semacam kemajuan!

Menavigasi ke halaman yang sama saat melakukan debug:

  • Chrome v31: sama dengan Refresh.
  • IE 11: skrip dihentikan, sesi browser baru dimulai (sama seperti menutup dan membuka lagi).
  • Firefox v26: tidak ada yang terjadi.

Juga juacala menyarankan solusi yang efektif. Misalnya, jika Anda menggunakan jQuery, menjalankan delete $ dari konsol akan menghentikan eksekusi setelah metode jQuery ditemukan. Saya telah mengujinya di semua browser di atas dan dapat memastikan itu berfungsi.

PEMBARUAN (Mar 2015) :

Akhirnya, setelah lebih dari 2 tahun dan hampir 10 ribu tampilan, jawaban yang tepat diberikan oleh Alexander K. Google Chrome memiliki Task Manager sendiri yang dapat mematikan proses tab tanpa menutup tab itu sendiri, menjaga semua breakpoints dan hal-hal lain tetap utuh.

Saya bahkan pergi sejauh BrowserStack.com untuk mengujinya di Chrome v22 dan menemukan bahwa ini bekerja dengan cara ini bahkan pada waktu itu.

Solusi Juacala masih berguna saat melakukan debugging di IE atau Firefox.

PEMBARUAN (Jan 2019) :

Alat Dev Chrome akhirnya menambahkan cara yang tepat untuk menghentikan eksekusi skrip yang bagus (meskipun agak tersembunyi). Lihat jawaban James Gentes untuk detailnya.

srgstm
sumber
12
ketik debugger;ke konsol alat dev dan itu akan segera memasukkan sesuatu ke debugger dan menghentikan skrip.
Jake
3
Jawaban James Gentes tampaknya menjadi solusi yang lebih baik pada 2019
Spikolynn
1
Mengapa semua orang berbicara tentang menghentikan skrip? Ini adalah tentang menghentikan / menghancurkan semua kode "mengikuti / menjadwalkan" yang akan datang.
Andre Elrico

Jawaban:

188

Di Chrome, ada "Pengelola Tugas", dapat diakses melalui Shift+ ESCatau melalui

Menu → Alat Lainnya → Pengelola Tugas

Anda dapat memilih tugas halaman dan mengakhirinya dengan menekan tombol "Akhiri Proses".

Alexander K
sumber
4
chrome 48ini hanya akan TUTUP alat Dev, dan tidak menghentikannya, membukanya kembali, Anda dapat melihat program masih berjalan ( tried setInterval())
Abdelouahab
11
Saya tidak melihat "Task Manager" di bawah "More Tools" dan shift + esc tidak melakukan apa-apa ... (Chrome 50, OSX) Shift + ESC bekerja di bawah Chrome / Windows ...
Michael
2
Wow — saya sudah lama menginginkan ini, dan sudah ada selama bertahun-tahun! Ini adalah jawaban StackOverflow yang paling membantu yang pernah saya lihat sepanjang tahun!
Michael Scheper
4
Pada Macintosh (Chrome v.63) opsi ini ditampilkan di bawah menu "Window", di grup ketiga. Tidak ada pintasan keyboard yang jelas.
Apollo
2
Ini akan mematikan tab
htafoya
105

Mulai April 2018, Anda dapat menghentikan loop tak terbatas di Chrome :

  1. Buka panel Sumber di Alat Pengembang ( Ctrl+ Shift+ I**).
  2. Klik tautan Jeda tombol untuk Jeda eksekusi script .

Perhatikan juga tombol pintas: F8dan Ctrl+\

masukkan deskripsi gambar di sini

James Gentes
sumber
Permata tersembunyi di UI itu.
norbert
Penjawab memiliki kunci rahasia Alam Semesta.
Sam
Pintasan ini sangat berguna ketika Anda memiliki skrip yang berjalan tanpa henti yang ingin Anda hentikan untuk memeriksa konsol. Terima kasih.
Alexei
@DanDascalescu Saya punya Chrome 80.0.3987.149 dan kelihatannya sama
James Gentes
Mungkin kita sedang melihat tombol di berbagai kondisi eksekusi? Milik saya adalah bahwa saya memilih bodyelemen di sini pada SO, mengatur "istirahat pada -> modifikasi subtree", lalu mengklik di mana saja. Tombolnya terlihat seperti pada screenshot yang saya posting.
Dan Dascalescu
37

Salah satu cara Anda dapat melakukannya adalah menjeda skrip, lihat kode apa yang mengikuti di mana Anda saat ini dihentikan, misalnya:

var something = somethingElse.blah;

Di konsol, lakukan hal berikut:

delete somethingElse;

Kemudian mainkan skrip: itu akan menyebabkan kesalahan fatal ketika mencoba mengakses somethingElse , dan skrip akan mati. Voila, kamu sudah menghentikan skripnya.

EDIT: Awalnya, saya menghapus sebuah variabel. Itu tidak cukup baik. Anda harus menghapus fungsi atau objek yang JavaScript coba akses ke properti.

juacala
sumber
3
you have to delete a function or an objecthack jahat seperti itu! (di UI itu akan cocok dengan baik sebagai tombol bunuh semua )
Mars Robertson
Ini sangat jahat, tetapi saya tidak bisa memikirkan cara lain.
juacala
Setahun kemudian saya kembali ke pertanyaan yang sama ... Dan saya tidak bisa mengetahuinya! Apakah ada cara untuk membuatnya lebih umum?
Mars Robertson
Anda tidak tahu bagaimana cara menghentikan eksekusi skrip? Saya selalu bisa melakukan ini. Apakah Anda memiliki contoh yang tidak memungkinkan Anda membunuh skrip dengan cara ini?
juacala
1
@ Hashim, Anda harus dapat menempatkan titik istirahat di dalam fungsi. Jadi pastikan bahwa bagian dalam fungsi berada pada baris yang terpisah dari definisi fungsi. Dalam kasus Anda, Anda harus masuk ke konsol, setelah ditunda, ketik "document.getElementById ('see_older'). ParentNode.removeChild (document.getElementById ('see_older'));". Ini karena Anda tidak memiliki apa pun dalam javascript untuk dipecahkan. Sayangnya, ini juga mengubah HTML. Jika Anda dapat mengubah kode menjadi "var el = document.getElementById ('see_older'); \ n el.getEl ..." maka Anda dapat melakukan "delete el;" dan itu akan menghentikannya.
juacala
12

Pembaruan 2020 April

Pada Chrome 80, tidak ada jawaban saat ini yang berfungsi. Tidak ada tombol "Jeda" yang terlihat - Anda perlu mengklik lama tombol "Mainkan" untuk mengakses ikon Stop:

Hentikan eksekusi skrip di Chrome DevTools

Dan Dascalescu
sumber
2
Terima kasih Tuhan! Jawaban nyata untuk pertanyaan OP.
user1023110
1
@ user1023110: Saya tidak tahu tentang Tuhan tetapi Anda dipersilakan :)
Dan Dascalescu
5

Jika Anda mengalami ini saat menggunakan debuggerpernyataan,

debugger;

... maka saya pikir halaman akan terus berjalan selamanya sampai runtime js menghasilkan, atau istirahat berikutnya. Dengan asumsi Anda berada dalam mode break-on-error (tombol pause-icon), Anda dapat memastikan istirahat terjadi dengan melakukan sesuatu seperti:

debugger;throw 1;

atau mungkin memanggil fungsi yang tidak ada:

debugger;z();

(Tentu saja ini tidak membantu jika Anda mencoba untuk menjalankan fungsi, meskipun mungkin Anda dapat menambahkan throw 1atau secara dinamisz() atau semacamnya di panel Sumber, ctrl-S untuk menyimpan, dan kemudian ctrl-R untuk menyegarkan ... ini Namun dapat melewati satu breakpoint, tetapi dapat bekerja jika Anda berada dalam satu lingkaran.)

Jika Anda melakukan loop dan berharap untuk memicu debuggerpernyataan lagi, Anda bisa mengetik throw 1saja.

throw 1;

Kemudian ketika Anda menekan ctrl-R, lemparan berikutnya akan mengenai, dan halaman akan menyegarkan.

(diuji dengan Chrome v38, sekitar Apr 2017)

ninjagecko
sumber
3

Pertanyaan bagus di sini. Saya pikir Anda tidak dapat menghentikan eksekusi skrip. Meskipun saya belum pernah mencarinya, saya telah menggunakan debugger krom untuk waktu yang cukup lama di tempat kerja. Saya biasanya mengatur breakpoints dalam kode javascript saya dan kemudian saya men-debug bagian dari kode yang saya minati. Ketika saya selesai men-debug kode itu, saya biasanya hanya menjalankan sisa program atau menyegarkan browser.

Jika Anda ingin mencegah agar skrip tidak dieksekusi (mis. Karena panggilan AJAX yang akan dilakukan) satu-satunya hal yang dapat Anda lakukan adalah menghapus kode itu di konsol on-the-fly, sehingga mencegah panggilan tersebut dari dieksekusi , maka Anda dapat mengeksekusi kode yang tersisa tanpa masalah.

Saya harap ini membantu!

PS: Saya mencoba mencari opsi untuk menghentikan eksekusi di beberapa tutorial / panduan seperti yang berikut ini, tetapi tidak bisa menemukannya. Seperti yang saya katakan sebelumnya, mungkin tidak ada opsi seperti itu.

http://www.codeproject.com/Articles/273129/Beginner-Guide-to-Page-and-Script-Debugging-with-C

http://www.nsbasic.com/app/tutorials/TT10.htm

Romén Rodríguez-Gil
sumber
Apakah saya membantu? Tampaknya tidak ada opsi terminasi, tetapi untuk mencegah eksekusi kode berikut, Anda dapat berkomentar sebelumnya atau menghapus kode / panggilan "live" berikut dalam debugger Chrome (opsi terakhir ini akan membuat tombol lanjutkan berperilaku seperti pemutusan hubungan kerja). Saya tahu itu bukan solusi ideal, tetapi saya pikir itu adalah solusi yang paling dapat diterima. Ada komentar?
Romén Rodríguez-Gil
1
Dalam banyak kasus, kode yang perlu dicegah dari mengeksekusi adalah tumpukan panggilan (fungsi yang akan mendapatkan kontrol setelah fungsi saat ini kembali). Tentu, saya bisa pergi dan mengedit fungsi di tumpukan panggilan, dan kemudian menemukan dan mengedit semua fungsi yang mungkin disebut secara tidak sinkron. Saya yakin, itu pasti hal yang sepele bagi peramban untuk menyegarkan laman dengan skrip yang masih dalam keadaan dijeda JIKA itu dijeda pada saat tombol Refresh Halaman ditekan. Saya juga berpikir bahwa itu harus menjadi perilaku yang diharapkan untuk browser apa pun (sayangnya, tidak).
srgstm
2
Sebenarnya saya menemukan solusi untuk mencapai penghentian eksekusi skrip !: Di chrome, saya membuka debugger untuk men-debug salah satu aplikasi saya dan saya menetapkan breakpoint. Saya menjalankan halaman. Eksekusi berhenti di breakpoint. Lalu saya memeriksa masalahnya dan menyadari apa yang menyebabkan bug. Untuk mengakhiri eksekusi saya klik pada tombol X di sebelah URL (untuk menghentikan pemuatan halaman) dan kemudian, ketika melanjutkan skrip (F8) itu akan berakhir. Cara yang agak mudah untuk mencapainya, saya pikir. Apa yang Anda pikirkan tentang ini?
Romén Rodríguez-Gil
Tombol X di Chrome diganti dengan tombol Refresh setelah halaman dimuat sehingga tidak ada cara untuk menekan X sesudahnya (saya juga sudah mencobanya di IE yang memang memiliki X tersedia setiap saat, tetapi selalu membeku). Saya juga telah menguji saran Anda selama pemuatan halaman dan menemukan bahwa skrip tidak berhenti setelah menekan X dan kemudian F8. Kemungkinan skrip yang belum dimuat ke browser pada saat X ditekan tidak dimuat setelah itu tetapi itu harus jelas.
srgstm
Oh Anda benar, itu adalah tes cepat dan tidak representatif ... Maka tampaknya tidak ada solusi.
Romén Rodríguez-Gil
3

Mengacu pada jawaban yang diberikan oleh @scottndecker ke pertanyaan berikut , chrome sekarang menyediakan opsi 'nonaktifkan JavaScript' di bawah Alat Pengembang:

  • Vertikal ...di kanan atas
  • Pengaturan
  • Dan di bawah 'Preferensi' buka bagian 'Debugger' di bagian paling bawah dan pilih 'Nonaktifkan JavaScript'

Untung Anda bisa berhenti dan menjalankan kembali lagi hanya dengan mencentang / tidak mencentangnya.

theFreedomBanana
sumber
1
Jika Anda downvote karena Anda bingung antara menu Alat Pengembang dan menu Chrome itu sangat menyedihkan :(
theFreedomBanana
Tidak bekerja untuk saya. Saya mencentang kotak Nonaktifkan JavaScript, tetapi skrip terus berjalan.
Paul Gorbas
1

Anda dapat melakukannya, tetapi Anda harus menyiapkan kode Anda terlebih dahulu.

Petunjuk untuk menghentikan eksekusi skrip di Google Chrome Dev Tools:

(1) Siapkan kode Anda terlebih dahulu, dengan membuat variabel global :

var devquit=0;
$(document).ready({
    //the rest of your code

(2) Di mana pun Anda ingin berhenti, uji nilai variabel ini:

//Lotsa code
if (devquit > 0) return false;

(3) Jeda eksekusi skrip pada atau sebelum baris tes di atas

(4) Beralih ke konsol

(5) Jenis:

> devquit
0
> devquit=1   <=== only this line is necessary
> devquit
1

(6) Lanjutkan eksekusi skrip. Script akan return falseketika menjalankan tes dari langkah (2) di atas


Catatan:

(A) Trik ini berfungsi dengan variabel dan objek global, tetapi tidak akan berfungsi dengan variabel lokal. Perhatikan bahwa ini:
newVar = 'never used before';
membuat properti baru dari objek jendela (berfungsi dengan trik di atas), sementara ini:
var newVar = 'never used before';
membuat variabel lokal (TIDAK bekerja dengan trik di atas!)

(B) Jadi, Anda masih dapat menggunakan trik ini dengan kode yang sudah berjalan jika Anda memiliki variabel global atau objek yang akan mengembalikan false jika memiliki nilai yang diberikan.

(C) Dalam keadaan darurat, Anda dapat menggunakan trik juacala dan menghapus elemen dari DOM (pada tab elemen) yang akan menyebabkan kesalahan javascript. Sebagai contoh, misalkan Anda memiliki kode var cartype = $('#cartype').val();Jika Anda menghapus elemen dengan ID = cartypesebelum baris kode itu, maka js akan memecah pada baris itu. Namun, elemen masih akan hilang ketika Anda mencoba menjalankan kembali kode. Trik yang dijelaskan di atas memungkinkan Anda menjalankan dan menjalankan kembali kode iklan tak terhingga.


Lebih banyak catatan:

(a) Masukkan breakpoint ke dalam kode: ketik saja debugger; sebuah baris dengan sendirinya. Jika DevTools terbuka, skrip akan beralih ke debugger pada saat itu. Jika DevTools tidak terbuka, kode akan mengabaikan pernyataan.

(B) Ingin menghindari melompat ke perpustakaan jQuery saat kode debug? Kotak hitam itu. Lihat instruksi blackbox untuk Chrome - atau - untuk Firefox


Terima kasih (silakan kunjungi dan angkat suara):

Javascript Debugging baris demi baris menggunakan Google Chrome

Apakah mungkin untuk mengubah nilai variabel javascript saat debugging di Google Chrome?

cssyphus
sumber
2
Any place where you may wish to quit, test the value of this variableMengerikan! Saya ingin berhenti di mana pun saya melangkah saat ini, saya tidak tahu sebelumnya di mana itu mungkin!
Michael
Jika Anda bersedia melakukan pekerjaan di sisi kode, ini adalah yang paling ramah pengguna pada klien yang mencoba menghentikan eksekusi skrip.
Angsa
??? Anda tidak memerlukan variabel global apa pun. Cukup klik tombol ini .
Dan Dascalescu
0

Anda dapat menjeda pola XHR yang menurut saya sangat berguna selama men-debug skenario semacam ini.

Misalnya saya telah memberikan breakpoint pada pola URL yang mengandung "/"

masukkan deskripsi gambar di sini

Abhi
sumber
0

Jika Anda memiliki loop nakal, jeda kode di debugger Google Chrome (kecil "|| tombol " di tab Sumber).

Beralih kembali ke Chrome, buka "Task Manager" ( Shift+ ESC), pilih tab Anda, klik tombol "End Process".

Anda akan mendapatkan pesan Aww Snap dan kemudian Anda dapat memuat ulang ( F5).

Seperti yang telah dicatat oleh orang lain, memuat ulang halaman pada titik jeda sama dengan memulai ulang lingkaran jahat dan dapat menyebabkan penguncian yang tidak menyenangkan jika debugger juga kemudian mengunci (dalam beberapa kasus mengarah ke memulai ulang chrome atau bahkan PC). Debugger membutuhkan tombol "Stop". Nb: Jawaban yang diterima sudah ketinggalan zaman karena beberapa aspeknya sekarang kelihatannya salah. Jika Anda memilih saya, tolong jelaskan :) .

www-0av-Com
sumber
1
Ada cara yang lebih baik .
Dan Dascalescu
-1

Buka tab sumber di 'Alat Pengembang', klik nomor baris dalam skrip yang sedang berjalan, ini akan membuat breakpoint dan debugger akan putus di sana.

Todd
sumber
-1

Ada banyak solusi yang tepat untuk masalah ini seperti yang disebutkan di atas dalam posting ini, tetapi saya telah menemukan peretasan kecil yang dapat dimasukkan dalam skrip atau disisipkan di konsol Chromes (debugger) untuk mencapainya:

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

Ini akan menyebabkan eksekusi dijeda ketika Anda menekan F12.

Murtaza Hussain
sumber
Bagaimana jika Anda (semoga) tidak menggunakan jQuery?
Dan Dascalescu
kemudian gunakan Javascript murni, seperti document.addEveneListner .. untuk mendapatkan acara keydown ..
Murtaza Hussain