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

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

Firebug adalah salah satu alat paling populer untuk tujuan ini.

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 :

Mengklik ini akan membuka panel Firebug di bagian bawah browser:

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

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

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

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

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

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.

• 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 )

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.

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!

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.

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.

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

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

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.

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.

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

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.

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.

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

Tentu saja, Firebug bagus jika Anda menggunakan Firefox.

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.

Saya menggunakan Venkman , debugger JavaScript untuk aplikasi XUL .

Selain Firebug dan ekstensi pengembang asli peramban, JetBrains WebStorm IDE hadir dengan dukungan debug jarak jauh untuk Firefox dan Chrome ( Perlu ekstensi) bawaan .

Juga mendukung:

• coffescript: cara men-debug coffeescript di node.js dengan peta sumber webstorm 6
• node.js

Pilihan untuk menguji ini secara gratis adalah uji coba 30 atau menggunakan Versi Akses Awal .

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.

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

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.