Cara menggunakan SCREEN.DEBUG pada JavaScript

Question

Error dapat atau akan terjadi, setiap kali kita menulis kode pemrograman pada komputer.

Table of Contents Show

Code Debugging
JavaScript Debugger
Method console.log()
Setting Breakpoint
Keyword Debugger
Alat Debugging Browser Utama
Did You Know?
Internet Explorer
Bagaimana cara melakukan proses debugging?
Apa fungsi debugging pada aplikasi?
Console log Javascript untuk apa?
Mengapa kita perlu melakukan debugging?

Section Artikel

1 Code Debugging
2 JavaScript Debugger
3 Method console.log()
4 Setting Breakpoint
5 Keyword Debugger
6 Alat Debugging Browser Utama
7 Did You Know?

Code Debugging

Kode pemrograman mungkin menglami error pada sintaks, atau kesalahan logika.

Banyak dari kesalahan ini yang sulit didiagnosis.

Seringkali, ketika kode pemrograman mengalami kesalahan, tidak ada yang terjadi. Tidak ada pesan kesalahan, dan kita tidak akan mendapatkan indikasi di mana mencari kesalahan.

Mencari (dan memperbaiki) kesalahan dalam kode pemrograman disebut debugging code.

JavaScript Debugger

Debugging tidak mudah dilakukan. Namun untungnya, semua browser modern memiliki debugger JavaScript bawaan.

Debugger internal dapat dihidupkan dan dimatikan, memaksa kesalahan untuk dilaporkan kepada pengguna.

Dengan debugger, Anda juga dapat mengatur breakpoint (tempat di mana eksekusi kode dapat dihentikan), dan memeriksa variabel saat kode dijalankan.

Biasanya, jika tidak ikuti langkah-langkah di bagian bawah halaman ini. Untuk mengaktifkan debugging di browser dapat dilakukan dengan tombol F12, dan pilih “console” di menu debugger.

Method console.log()

Jika browser mendukung debugging, browser akan bisa menggunakan console.log() untuk menampilkan nilai JavaScript di jendela debugger.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Web Pertamaku</h2>

<p> Aktifkan debugging di browser Anda (Chrome, IE, Firefox) dengan F12, dan pilih "Console" di menu debugger. </p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

Setting Breakpoint

Pada jendela debugger, Kita juga dapat mengatur breakpoint dalam kode JavaScript.

Pada setiap breakpoint, kode JavaScript akan berhenti dijalankan, dan memungkinkan kita memeriksa nilai JavaScript.

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

Keyword Debugger

Keyword debugger menghentikan eksekusi JavaScript, dan memanggil (jika tersedia) fungsi debug.

Keyword ini memiliki fungsi yang sama seperti mengatur breakpoint di debugger.

Jika tidak ada debugging tersedia, pernyataan debugger tidak berpengaruh.

Dengan debugger diaktifkan, kode ini akan berhenti dijalankan sebelum menjalankan baris ketiga.

Contoh:

<!DOCTYPE html>
<html>
<head>
</head>

<body>

<p id="demo"></p>

<p> Dengan debugger dihidupkan, kode di bawah ini akan berhenti dijalankan sebelum menjalankan baris ketiga. </p>
<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Alat Debugging Browser Utama

Biasanya, kita dapat mengaktifkan debugging di browser Anda dengan F12, dan pilih “Console” di menu debugger.

Jika tidak, ikuti langkah-langkah berikut:

Chrome

Buka browser.
Dari menu, pilih “More tools”.
Dari alat, pilih “Developer tools”.
Terakhir, pilih Console.

Firefox

Buka browser.
Dari menu, pilih “Web Developer”.
Terakhir, pilih “Web Console”.

Edge

Buka browser.
Dari menu, pilih “Developer tools”.
Terakhir, pilih “Console”.

Opera

Buka browser.
Dari menu, pilih “Developer”.
Dari “Pengembang”, pilih “Developrt tools”.
Terakhir, pilih “Console”.

Safari

Buka Safari, Preferences, Advanced di menu utama.
Centang “Enable Show Develop menu in menu bar”.
Saat opsi baru “Develop” muncul di menu:
Pilih “Show Error Console”.

Did You Know?

Debugging adalah proses menguji, menemukan, dan mengurangi bug (error) pada program komputer.
Bug komputer pertama yang ditemukan adalah bug nyata (serangga) yang tersangkut di elektronik.

Ketika saya menemukan bahwa saya memiliki potongan kode yang bermasalah, bagaimana cara saya men-debug-nya?

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 pada halaman web teknologi yang relevan. Preferensi pribadi saya untuk debugging JavaScript adalah Firebug di Firefox. Saya tidak mengatakan Firebug lebih baik daripada yang lain; itu tergantung pada preferensi pribadi Anda dan Anda mungkin harus menguji situs Anda di semua browser, tetapi pilihan pertama, pribadi, pertama 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, tapi saya sarankan Anda menginstal Firebug add on. Ini menyediakan beberapa fitur tambahan berdasarkan versi dasar yang praktis. 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 menarik adalah tab skrip. Mengklik tab skrip membuka jendela di bawah ini:

Jelas, untuk debug Anda perlu mengklik memuat ulang :

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

Ketika breakpoint Anda terkena, itu akan terlihat seperti di bawah ini:

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

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

Chrome

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

Internet Explorer

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

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

Internet Explorer 8 (Alat Pengembang - F12). Yang lainnya adalah tingkat kedua di Internet Explorer
Firefox dan Firebug . Memukul F12 menampilkan.
Safari (Tampilkan Bilah Menu, Preferensi -> Lanjutan -> Tampilkan Bilah menu Develop )
Google Chrome Konsol JavaScript (F12 atau (Ctrl + Shift + J)). Sebagian besar browser yang sama dengan Safari, tetapi Safari adalah IMHO yang lebih baik.
Opera ( Alat -> Lanjutan -> Alat Pengembang )

Ada debugger kata kunci dalam JavaScript untuk men-debug kode JavaScript. Masukkan debugger; cuplikan di kode JavaScript Anda. 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 titik debugger; .
Seharusnya dibuka jendela pengembang browser.

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

Lihatlah ke sulap %o:

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

%o dump konten yang dapat diklik dan dalam-dijelajahi, cukup dicetak objek JS. %s ditampilkan hanya untuk catatan.

Dan ini:

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

memberi Anda jejak stack mirip Java ke titik pemanggilan new Error() (termasuk path ke file dan nomor baris !!).

Baik %o dan new Error().stack tersedia dalam Chrome dan Firefox.

Dengan alat yang sangat kuat Anda membuat asumsi kesalahan apa yang terjadi di JS Anda, masukkan hasil debug (jangan lupa bungkus pernyataan if untuk mengurangi jumlah data) dan verifikasi asumsi Anda. Perbaiki masalah atau buat asumsi baru atau masukkan lebih banyak output debug ke masalah bit.

Juga untuk penggunaan tumpukan jejak:

console.trace();

sebagai say Konsol

Selamat melakukan peretasan!

Mulai dengan Firebug dan IE Debugger.

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

Contoh:

Untuk Internet Explorer, umumnya ini adalah perlambatan bertahap dan merupakan semacam jenis kebocoran memori. Setelah setengah jam atau lebih, saya harus memulai kembali. Tampaknya cukup teratur.

Untuk Firebug, mungkin sudah lebih dari satu tahun sehingga mungkin versi yang lebih lama. Akibatnya, saya tidak ingat secara spesifik, tetapi pada dasarnya kode tidak berjalan dengan benar dan setelah mencoba untuk men-debug untuk sementara waktu saya menonaktifkan Firebug dan kode tersebut berfungsi dengan baik.

Meskipun alert(msg); berfungsi dalam skenario "Saya hanya ingin mencari tahu apa yang terjadi" ... setiap pengembang telah menemukan kasus di mana Anda berakhir dalam loop (sangat besar atau tidak ada) yang Anda bisa ' t keluar dari.

Saya akan merekomendasikan itu selama pengembangan jika Anda menginginkan opsi debug yang sangat langsung, gunakan opsi debug yang memungkinkan Anda keluar. (PS Opera, Safari? Dan Chrome? Semuanya memiliki ini dalam dialog asli mereka)

//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 memasukkan diri Anda ke dalam lingkaran besar debugging popup, di mana menekan Enter/Ok memungkinkan Anda melompati setiap pesan, tetapi menekan Escape/Cancel memungkinkan Anda keluar dengan baik.

Saya menggunakan WebKit's menu pengembang/konsol (Safari 4). Itu 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 sudah saatnya Firebug atau debugger lain.

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

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

Anda mungkin juga memeriksa YUI Logger . Yang harus Anda lakukan untuk menggunakannya adalah memasukkan beberapa tag ke dalam HTML Anda. Ini merupakan tambahan yang bermanfaat bagi Firebug, yang kurang lebih merupakan keharusan.

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

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

Saya menggunakan Venkman , debugger JavaScript untuk XUL aplikasi.

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

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

Tentu saja, Firebug bagus jika Anda menggunakan Firefox.

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

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

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

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

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

Bagaimana cara melakukan proses debugging?

Ada beberapa langkah untuk melakukan debugging, yaitu melakukan identifikasi, mencari sumber bug, menganalisis bug, membuktikan hasil analisis, serta memperbaiki bug.

Apa fungsi debugging pada aplikasi?

Sahal, debugging adalah proses mendeteksi dan menghapus kesalahan dan potensi kesalahan (bug) yang ada dalam kode perangkat lunak. Eror tersebut dapat menyebabkan perilaku yang tidak diharapkan (kerusakan atau kesalahan) atau penghentian program.

Console log Javascript untuk apa?

Fungsi console.log() adalah fungsi untuk menampilkan teks ke console Javascript. Fungsi console.log() biasanya digunakan untuk debugging. Karena setiap pesaan error di Javascript selalu ditampilkan di dalam Console. Selain console.log() , terdapat juga beberapa fungsi untuk debugging seperti console.

Mengapa kita perlu melakukan debugging?

Proses debugging perlu dilakukan karena beberapa alasan, yaitu : Dapat segera melaporkan error sehingga pendeteksian kesalahan dapat dilakukan lebih awal. Memberikan informasi mengenai struktur data dan interpretasi yang mudah.

kode javascript Fungsi console Operator pada Javascript Console JavaScript