Bagaimana cara men-debug kode JavaScript saya? [Tutup]

113

Ketika saya menemukan bahwa saya memiliki cuplikan kode yang bermasalah, bagaimana cara saya melakukan debug?

Canavar
sumber

Jawaban:

78

Firebug adalah salah satu alat paling populer untuk tujuan ini.

Ryan Oberoi
sumber
8
Tautkan: getfirebug.com
Annika Backstrom
7
Saya suka firebug, tetapi saya tidak akan mengklaimnya sebagai kepala dan bahu di atas inspektur webkit.
Ryan Florence
2
Firebug berada di depan waktu ketika keluar, tapi menurut saya itu bukan alat terbaik, mengingat alat lain yang keluar baru-baru ini.
James
Saya menggunakan Firebug sejak saya menemukannya, dan itu sangat membantu saya! console.debug, profiler, inspektur ...
Julio Greff
@NinaScholz Sekarang semua browser dilengkapi jetpack secara default!
oneCoderToRuleThemAll
74

Semua browser modern hadir dengan beberapa bentuk aplikasi debugging JavaScript bawaan. Rincian ini akan dibahas di halaman web teknologi yang relevan. Preferensi pribadi saya untuk men-debug JavaScript adalah Firebug di Firefox. Saya tidak mengatakan Firebug lebih baik dari yang lain; itu tergantung pada preferensi pribadi Anda dan Anda mungkin harus menguji situs Anda di semua browser (pilihan pertama pribadi saya selalu Firebug).

Saya akan membahas beberapa solusi tingkat tinggi di bawah ini, menggunakan Firebug sebagai contoh :

Firefox

Firefox hadir dengan alat debugging JavaScript bawaannya sendiri, tetapi saya sarankan Anda menginstal add-on Firebug . Ini menyediakan beberapa fitur tambahan berdasarkan versi dasar yang berguna. Saya hanya akan berbicara tentang Firebug di sini.

Setelah Firebug diinstal, Anda dapat mengaksesnya seperti di bawah ini:

Pertama jika Anda mengklik kanan pada elemen apa pun, Anda dapat Memeriksa Elemen dengan Firebug :

Periksa Elemen di Firebug

Mengklik ini akan membuka panel Firebug di bagian bawah browser:

Panel firebug

Firebug menyediakan beberapa fitur tetapi yang kami minati adalah tab skrip. Mengklik tab script membuka jendela ini:

Tab skrip

Jelas, untuk men-debug Anda perlu mengklik muat ulang :

JavaScript di tab sctipt

Anda sekarang dapat menambahkan breakpoint dengan mengklik baris di sebelah kiri potongan kode JavaScript yang ingin Anda tambahkan breakpoint:

Menambahkan breakpoint

Saat breakpoint Anda tercapai, akan terlihat seperti di bawah ini:

Sebuah breakpoint dipukul

Anda juga dapat menambahkan variabel tontonan dan umumnya melakukan semua yang Anda harapkan dalam alat debugging modern.

Perhatikan variabel

Untuk informasi lebih lanjut tentang berbagai opsi yang ditawarkan di Firebug, lihat FAQ Firebug .

Chrome

Chrome juga memiliki opsi debugging JavaScript bawaan, yang bekerja dengan cara yang sangat mirip, klik kanan, periksa elemen, dll . Lihat Alat Pengembang Chrome . Saya biasanya menemukan jejak tumpukan di Chrome lebih baik daripada Firebug.

Internet Explorer

Jika Anda mengembangkan di .NET dan menggunakan Visual Studio menggunakan lingkungan pengembangan web, Anda dapat men-debug kode JavaScript secara langsung dengan menempatkan breakpoint, dll. Kode JavaScript Anda terlihat persis sama seperti jika Anda men-debug kode C # atau VB.NET .

Jika Anda tidak memiliki ini, Internet Explorer juga menyediakan semua alat yang ditunjukkan di atas. Anehnya, alih-alih memiliki fitur klik kanan memeriksa elemen Chrome atau Firefox, Anda mengakses alat pengembang dengan menekan F12 . Pertanyaan ini mencakup sebagian besar poin.

Liam
sumber
... Anda pasti sudah memilikinya di buffer salin-tempel yang siap digunakan, bukan? :)
Christian Ternus
3
Maaf, saya sangat merindukan bahwa itu diminta dan dijawab oleh orang yang sama! Saya pikir Anda memiliki semacam Javascript Debug Copypasta yang Anda masukkan setiap kali seseorang menanyakan pertanyaan ini.
Christian Ternus
54
  • Internet Explorer 8 (Alat Pengembang - F12). Ada lagi yang kelas dua di tanah Internet Explorer
  • Firefox dan Firebug . Tekan F12untuk menampilkan.
  • Safari (Tampilkan Bilah Menu, Preferensi -> Lanjutan -> Tampilkan bilah menu Kembangkan )
  • Konsol JavaScript Google Chrome ( F12atau ( Ctrl+ Shift+ J)). Sebagian besar browser yang sama dengan Safari, tetapi Safari lebih baik IMHO.
  • Opera ( Alat -> Lanjutan -> Alat Pengembang )
Chris Brandsma
sumber
+1 debugger opera js memberikan pesan kesalahan yang lebih baik daripada yang lainnya
Gabriel Solomon
3
Meskipun pada tahun 2009 Safari mungkin telah menyingkirkan alat pengembang Chromes pada tahun 2014, saya akan melakukan debugging di Chrome melalui Safari setiap hari dalam seminggu. Alat Pengembang Chrome dan Firebug Firefox adalah yang terbaik ... dan meskipun canggung untuk menggunakan alat pengembang IE11 yang masih mungkin berada di posisi ke-3 ( IMHO )
scunliffe
29

Ada kata kunci debugger dalam JavaScript untuk men-debug kode JavaScript. Letakkan debugger; potongan kode JavaScript Anda. Ini secara otomatis akan mulai men-debug kode JavaScript pada saat itu.

Sebagai contoh:

Misalkan ini adalah file test.js Anda

function func(){
    //Some stuff
    debugger;  //Debugging is automatically started from here
    //Some stuff
}
func();
  • Ketika browser menjalankan halaman web dalam opsi pengembang dengan debugger yang diaktifkan, maka secara otomatis mulai debugging dari debugger; titik.
  • Di sana harus dibuka jendela pengembang browser.
Suresh Mahawar
sumber
Di Safari terkadang berfungsi dan terkadang tidak. Saya yakin itu sesuatu di pihak saya. FWIW Saya telah mengaktifkan Tampilkan Inspektur Web Secara Otomatis untuk JSContexts.
1,21 gigawatt
21

Saya menggunakan printfpendekatan lama yang baik (teknik kuno yang akan bekerja dengan baik kapan saja).

Lihatlah keajaiban %o:

console.log("this is %o, event is %o, host is %s", this, e, location.host);

%omembuang konten objek JS yang dapat diklik dan dapat dijelajahi dalam serta dicetak dengan cantik . %sditampilkan hanya sebagai catatan.

Dan ini:

console.log("%s", new Error().stack);

memberi Anda pelacakan tumpukan seperti Java ke titik new Error()pemanggilan (termasuk jalur ke file dan nomor baris !!).

Keduanya %odan new Error().stacktersedia di Chrome dan Firefox.

Dengan alat canggih seperti itu, Anda membuat asumsi apa yang salah di JS Anda, meletakkan keluaran debug (jangan lupa bungkus dalam ifpernyataan untuk mengurangi jumlah data) dan verifikasi asumsi Anda. Perbaiki masalah atau buat asumsi baru atau taruh lebih banyak output debug ke masalah bit.

Juga untuk penggunaan pelacakan tumpukan:

console.trace();

seperti yang dikatakan Konsol

Selamat meretas!

gavenkoa.dll
sumber
2
1 untuk console.trace (); Jawaban berbeda dari yang lain.
Saurabh Patil
12

Mulailah dengan Firebug dan IE Debugger.

Berhati-hatilah dengan debugger di JavaScript. Sesekali mereka akan mempengaruhi lingkungan cukup untuk menyebabkan beberapa kesalahan yang Anda coba debug.

Contoh:

Untuk Internet Explorer, ini umumnya merupakan pelambatan bertahap dan merupakan semacam kesepakatan jenis kebocoran memori. Setelah sekitar setengah jam saya perlu memulai ulang. Tampaknya cukup biasa.

Untuk Firebug, mungkin sudah lebih dari setahun jadi ini mungkin versi yang lebih lama. Akibatnya, saya tidak ingat secara spesifik, tetapi pada dasarnya kode tidak berjalan dengan benar dan setelah mencoba men-debugnya untuk beberapa saat saya menonaktifkan Firebug dan kodenya berfungsi dengan baik.

Tom Hubbard
sumber
9

Meskipun alert(msg);bekerja dalam skenario "Saya hanya ingin mencari tahu apa yang terjadi" ... setiap pengembang telah menghadapi kasus di mana Anda berakhir dalam lingkaran (sangat besar atau tak berujung) yang tidak dapat Anda lepaskan.

Saya akan merekomendasikan bahwa selama pengembangan jika Anda menginginkan opsi debug yang sangat di-wajah Anda, gunakan opsi debug yang memungkinkan Anda keluar. (PS Opera, Safari? Dan Chrome? Semuanya memiliki ini tersedia di dialog aslinya)

//global flag
_debug = true;
function debug(msg){
  if(_debug){
    if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
      _debug = false;
    }
  }
}

Dengan cara di atas, Anda bisa mendapatkan diri Anda dalam lingkaran besar debugging popup, di mana menekan Enter/ Okmemungkinkan Anda melompat melalui setiap pesan, tetapi menekan Escape/ Cancelmemungkinkan Anda keluar dengan baik.

scunliffe.dll
sumber
6

Saya menggunakan menu / konsol pengembang WebKit (Safari 4). Ini hampir identik dengan Firebug.

console.log()adalah hitam baru - jauh lebih baik daripada alert().

Ryan Florence
sumber
2
Jika Anda meletakkan console.log di seluruh kode Anda, ingatlah untuk menghapusnya karena akan merusak IE.
Liam
5

Langkah pertama saya adalah selalu memvalidasi HTML dan memeriksa sintaks dengan JSLint . Jika Anda memiliki markup bersih dan kode JavaScript yang valid maka sekarang waktunya untuk Firebug atau debugger lain.

Ken
sumber
@Ken link rusak :(
Thirisangu Ramanathan
@Thirisangu Terima kasih! Tautan diperbaiki
Ken
3

Visual Studio 2008 memiliki beberapa alat debugging JavaScript yang sangat bagus. Anda dapat melepaskan breakpoint di kode JavaScript sisi klien Anda dan melewatinya menggunakan alat yang sama persis seperti yang Anda lakukan pada kode sisi server. Tidak perlu melampirkan ke proses atau melakukan sesuatu yang rumit untuk mengaktifkannya.

JohnFx
sumber
3

Saya menggunakan beberapa alat: Fiddler , Firebug, dan Visual Studio. Saya dengar Internet Explorer 8 memiliki debugger bawaan yang bagus.

d34dIO
sumber
Yang Anda maksud dengan "Fiddler" adalah Fiddler Web Debugger?
Thomas L Holaday
3

Saya dulu menggunakan Firebug , sampai Internet Explorer 8 keluar. Saya bukan penggemar berat Internet Explorer, tetapi setelah menghabiskan beberapa waktu dengan alat pengembang bawaan, yang mencakup debugger yang sangat bagus, tampaknya tidak ada gunanya menggunakan yang lain. Saya harus memberi tip kepada Microsoft bahwa mereka melakukan pekerjaan yang luar biasa pada alat ini.

James
sumber
2
Untuk debugging dasar, debugger IE8 telah memenuhi sebagian besar kebutuhan saya. Namun, jika Anda melakukan pengujian kinerja apa pun, Anda akan segera menemukan kekurangan IE. Baru-baru ini saya memiliki proyek yang menggunakan beberapa javascript yang berat, dan kami benar-benar perlu memangkas semuanya untuk sistem yang lebih rendah, karena kami mengalami "kesalahan skrip tidak responsif" yang ditakuti. Firebug sangat berharga dalam hal ini, karena saya dapat menjalankan metode console.profile () untuk mencari tahu di mana semua waktu saya dihabiskan.
Gavin
1
Debugger IE8 juga memiliki fitur profil (meskipun tidak grafis seperti FireBug) yang menyediakan pohon panggilan, jumlah panggilan dan waktu yang dihabiskan untuk setiap metode. Saya telah menemukan ini cukup dalam mengisolasi kode JS mana yang memakan waktu terlalu lama.
James
3

Anda juga dapat memeriksa YUI Logger . Yang harus Anda lakukan untuk menggunakannya adalah menyertakan beberapa tag di HTML Anda. Ini adalah tambahan yang bermanfaat untuk Firebug, yang kurang lebih merupakan suatu keharusan.

Rob Lund
sumber
Bukankah jQuery memiliki fungsi serupa?
Shapr
2

Saya menemukan versi baru Internet Explorer 8 (tekan F12) sangat bagus untuk men-debug kode JavaScript.

Tentu saja, Firebug bagus jika Anda menggunakan Firefox.

JW
sumber
2

Selain menggunakan debugger JavaScript Visual Studio, saya menulis panel sederhana saya sendiri yang saya sertakan ke halaman. Ini seperti jendela Immediate dari Visual Studio. Saya dapat mengubah nilai variabel saya, memanggil fungsi saya, dan melihat nilai variabel. Ini hanya mengevaluasi kode yang tertulis di bidang teks.

Canavar
sumber
2

Saya menggunakan Venkman , debugger JavaScript untuk aplikasi XUL .

kuy
sumber
2

Jika Anda menggunakan Visual Studio , cukup letakkan di debugger;atas kode yang ingin Anda debug. Selama eksekusi, kontrol akan berhenti di tempat itu, dan Anda dapat men-debug langkah demi langkah dari sana.

Estefany Velez
sumber
1

Seperti kebanyakan jawaban, itu sangat tergantung: Apa yang ingin Anda capai dengan debugging? Pengembangan dasar, memperbaiki masalah kinerja? Untuk pengembangan dasar, semua jawaban sebelumnya lebih dari cukup.

Untuk pengujian kinerja secara khusus, saya merekomendasikan Firebug. Mampu membuat profil metode mana yang paling mahal dalam hal waktu sangat berharga untuk sejumlah proyek yang telah saya kerjakan. Karena pustaka sisi klien menjadi semakin kuat, dan lebih banyak tanggung jawab ditempatkan pada sisi klien secara umum, jenis debugging dan profiling ini hanya akan menjadi lebih berguna.

API Konsol Firebug: http://getfirebug.com/console.html

Gavin
sumber
0

Dengan menekanF12 pengembang web dapat dengan cepat men-debug kode JavaScript tanpa meninggalkan browser. Itu dibangun ke dalam setiap instalasi Windows.

Di Internet Explorer 11 , alat F12 menyediakan alat debugging seperti breakpoint, menonton dan melihat variabel lokal, dan konsol untuk pesan dan eksekusi kode langsung.

Reza
sumber
silakan lihat tautan ini: w3schools.com/js/js_debugging.asp juga
Reza