Pada awalnya: Sebenarnya, saya berpikir tentang apakah akan menulis hal ini sebelumnya, karena itu tidak sulit, tetapi mengapa ada begitu banyak orang yang bertanya, mereka tidak bertanya bagaimana menggunakan konsol, tetapi mereka tidak tahu apa yang bisa dilakukan konsol. Mereka juga tahu bahwa ada konsol.log dan hal -hal lain, tetapi mereka tidak tahu mengapa mereka menggunakan string yang begitu panjang alih -alih waspada terhadap informasi output. Di mata mereka, peringatan sudah cukup. Oke, saya akui bahwa saya sedikit mengeluh, tetapi saya hanya berencana untuk memperkenalkan pengetahuan dasar debugging dalam seri ini, dan itu tidak akan melibatkan terlalu dalam, karena hal-hal mendalam dikombinasikan dengan pengetahuan JS. Jika Anda belum mencapai tingkat JS yang sama, bahkan jika saya mengajari Anda cara men-debug bug, memecahkan beberapa plug-in, dll., Anda tidak tahu apa yang saya lakukan. Tujuan saya adalah untuk memberi tahu Anda konsol dan memulai dengan debugging. Anda harus berjalan di depan sendiri.
Tentu saja, mohon mengapung, atau mengeluh. .
Direktori seri JS Debug:
Faktanya, orang-orang pengembangan web mengetahui hal ini, apakah itu front-end atau back-end, tetapi banyak orang hanya fokus pada tampilan HTML dan modifikasi CSS, dan belum menggunakan konsol sama sekali.
Mungkin beberapa pemula tidak tahu bahwa ada hal ini. .
Ada banyak informasi tentang hal ini secara online, tetapi tidak berbicara tentang debugging, itu hanya memperkenalkan cara menggunakannya. .
Apakah itu Chrome Firefox IE (versi 8 atau lebih tinggi) atau 360 browser Quick Browser, dll., Cukup tekan F12 untuk membuka konsol.
Artikel kami menggunakan Chrome sebagai contoh untuk menjelaskannya, tetapi bukan karena saya suka Chrome. . Setiap orang memiliki preferensi sendiri. .
PS: FF di masa lalu, itu semua adalah Firebug, tetapi sekarang asli.
Sekarang kita klik F12 untuk membuka konsol dan klik item konsol.
Anda dapat melihat avatar saya dan beberapa baris teks, tetapi masih ada beberapa baris di bawah ini. Kami akan mengabaikannya untuk saat ini dan akan menjelaskannya nanti.
Bahkan, untuk F12, nama yang paling akurat adalah alat pengembang, dan konsolnya adalah konsol.
PS: Sebagai tutorial dasar, saya hanya akan memperkenalkan debugging konsol dan sumber. Harap pahami fungsi lain sendiri. .
Klik kanan menu Clear Console atau ENTER CLEAR () dan tekan ENTER untuk menghapus konten konsol.
Mari kita ambil langkah pertama untuk mengeluarkan informasi menggunakan Console.log.
Masukkan console.log ("hehe ..") dan console.log ("hehe ..", "haha ..") masing -masing dan tekan enter untuk melihat hasil output pada konsol.
Bahkan, ini hanya menghasilkan informasi, itu sangat sederhana. Gunakan alih -alih peringatan dan dokumen. Tuliskan untuk men -debug, dan pekerjaan Anda akan menjadi sangat mudah.
Misalnya, men -debug kode loop, tetapi ada lusinan atau bahkan ratusan elemen dalam array. Jika Anda waspada, Anda akan menjadi gila.
Document.write juga tidak buruk, tetapi untuk output objek, Anda hanya dapat melihat hal -hal seperti [objek objek].
Ini adalah masalah nyata yang ditemui banyak teman baru.
Jika Anda menggunakan Console.log alih -alih Dokumen Peringatan. Menulis ke informasi objek output, Anda dapat memperluas objek ini di konsol untuk melihat informasi tertentu.
Misalnya:
var arr = [{name: "nima", usia: 22}, {name: "nima", usia: 20}]; untuk (var i = 0; i <arr.length; i ++) {console.log (arr [i]);}Anda dapat langsung melihat informasi objek tanpa menunjukkan [objek objek], yang membuat kami bingung.
Apakah Anda tiba -tiba merasa bahwa konsol itu. Log meledak?
Bahkan, ini hanyalah puncak gunung esnya. Saya akan mencoba yang terbaik untuk menunjukkan kepada Anda beberapa keuntungannya.
Lanjutkan dengan langkah -langkah sekarang, sekarang kami langsung memasuki ARR dan kemudian tekan ENTER.
Apakah itu lebih tidak terkendali? Sekarang Anda dapat langsung mengklik objek untuk memperluas objek dalam array ini untuk dilihat, bahkan menyimpan output loop.
Ini adalah pesona konsol, dan ini hanyalah fitur yang paling mendasar.
Pertama -tama mari kita pahami metode apa yang ada di bawah objek konsol untuk kita gunakan.
Masukkan konsol dan tekan Enter untuk memperluas objek.
Anda dapat melihat beberapa warna gelap dan terang. Warna gelap adalah metode yang bisa kita sebut langsung. Warna -warna terang mewakili atribut atau metode default, dan tidak perlu khawatir tentang tampilan. Saya akan membicarakannya nanti jika Anda memiliki kesempatan.
Faktanya, satu -satunya yang umum adalah log dir. Yang lain jarang digunakan, dan mereka hanya akan digunakan dalam debugging canggih.
Properti bantu seperti grup dan tabel tersedia atau tidak, tergantung pada preferensi Anda. Saya tidak terlalu suka menggunakannya.
Mari kita lihat langkah demi langkah. Ngomong -ngomong, mari kita mulai dengan log dir, dan sebagian besar debugging tergantung pada mereka.
PS: Sebenarnya, saya seharusnya memberi Anda dokumentasi resmi, tetapi Google belum dapat membukanya baru -baru ini, jadi saya dapat memeriksa fungsi setiap metode di Baidu.
Saya menemukan versi Cina, itu tidak buruk. Harap baca "Objek Konsol" terlebih dahulu.
Mari kita ambil beberapa latihan setelah kelas: (Buka Baidu terlebih dahulu, lalu buka konsolnya)
1 Lihat Informasi Elemen dengan ID KW1 di konsol
2 Kemudian gunakan metode Console.dir untuk melihat informasi elemen KW1