Apa itu console.log?

Apa gunanya console.log?

Tolong jelaskan bagaimana cara menggunakannya dalam JavaScript, dengan contoh kode.

Ini bukan fitur jQuery tetapi fitur untuk tujuan debugging. Misalnya Anda dapat mencatat sesuatu ke konsol ketika sesuatu terjadi. Contohnya:

$('#someButton').click(function() {
  console.log('#someButton was clicked');
  // do something
});

Anda kemudian akan melihat #someButton was clicked di tab "Konsol" Firebug (atau konsol alat lain - mis. Inspektur Web Chrome) ketika Anda akan mengklik tombol.

Untuk beberapa alasan, objek konsol mungkin tidak tersedia. Maka Anda dapat memeriksa apakah itu - ini berguna karena Anda tidak harus menghapus kode debug Anda ketika Anda menyebarkan ke produksi:

if (window.console && window.console.log) {
  // console is available
}

Tempat Anda dapat melihat konsol! Hanya untuk memiliki semuanya dalam satu jawaban.

Firefox

http://getfirebug.com/

(Anda sekarang juga dapat menggunakan alat pengembang bawaan Firefox Ctrl + Shift + J (Alat> Pengembang Web> Konsol Kesalahan), tetapi Firebug jauh lebih baik; gunakan Firebug)

Safari dan Chrome

Pada dasarnya sama.

https://developers.google.com/chrome-developer-tools/docs/overview

https://developer.apple.com/technologies/safari/developer-tools.html

Internet Explorer

Jangan lupa Anda dapat menggunakan mode kompatibilitas untuk men-debug IE7 dan IE8 di IE9 atau IE10

http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx

http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx

Jika Anda harus mengakses konsol di IE6 untuk IE7 gunakan bookmarklet Firebug Lite

http://getfirebug.com/firebuglite/ cari bookmarklet stabil

http://en.wikipedia.org/wiki/Bookmarklet

Opera

http://www.opera.com/dragonfly/

iOS

Berfungsi untuk semua iPhone, iPod touch, dan iPad.

http://developer.apple.com/library/ios/ipad/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

Sekarang dengan iOS 6 Anda dapat melihat konsol melalui Safari di OS X jika Anda mencolokkan perangkat Anda. Atau Anda dapat melakukannya dengan emulator, cukup buka jendela browser Safari dan buka tab "Kembangkan". Di sana Anda akan menemukan opsi untuk membuat inspektur Safari berkomunikasi dengan perangkat Anda.

Windows Phone, Android

Keduanya tidak memiliki konsol bawaan dan tidak ada kemampuan bookmarklet. Jadi kami menggunakan http://jsconsole.com/type : listen dan itu akan memberi Anda tag skrip untuk ditempatkan di HTML Anda. Sejak saat itu Anda dapat melihat konsol Anda di dalam situs web jsconsole.

iOS dan Android

Anda juga dapat menggunakan http://html.adobe.com/edge/inspect/ untuk mengakses alat pemeriksa web dan konsol di perangkat apa pun menggunakan pengaya peramban yang nyaman.

Masalah browser yang lebih lama

Versi IE yang lebih lama akan crash jika Anda menggunakan console.log dalam kode Anda dan tidak memiliki alat pengembang terbuka pada saat yang sama. Untungnya ini adalah perbaikan yang mudah. Gunakan cuplikan kode di bawah ini di bagian atas kode Anda:

 if(!window.console){ window.console = {log: function(){} }; } 

Ini memeriksa untuk melihat apakah konsol ada, dan jika tidak mengaturnya ke objek dengan fungsi kosong yang disebut log. Ini window.console dan window.console.log tidak pernah benar-benarundefined.

Anda dapat melihat pesan apa pun yang masuk ke konsol jika Anda menggunakan alat seperti Firebug untuk memeriksa kode Anda. Katakanlah Anda melakukan ini:

console.log('Testing console');

Saat Anda mengakses konsol di Firebug (atau alat apa pun yang Anda putuskan untuk memeriksa kode Anda), Anda akan melihat pesan apa pun yang Anda beri tahu fungsi untuk login. Ini sangat berguna ketika Anda ingin melihat apakah suatu fungsi sedang dieksekusi, atau jika suatu variabel diteruskan / ditugaskan dengan benar. Ini sebenarnya agak berharga untuk mencari tahu apa yang salah dengan kode Anda.

Ini akan memposting pesan log ke konsol javascript browser, misalnya Firebug atau Alat Pengembang (Chrome / Safari) dan akan menampilkan baris dan file dari mana ia dieksekusi.

Selain itu, ketika Anda menghasilkan objek jQuery itu akan menyertakan referensi ke elemen itu di DOM, dan mengkliknya akan pergi ke yang di tab Elemen / HTML.

Anda dapat menggunakan berbagai metode, tetapi berhati-hatilah agar itu berfungsi di Firefox, Anda harus membuka Firebug, jika tidak seluruh halaman akan macet. Apakah yang Anda masuki adalah variabel, array, objek atau elemen DOM, itu akan memberi Anda rincian lengkap termasuk prototipe untuk objek juga (selalu menarik untuk melihat-lihat). Anda juga bisa memasukkan sebanyak argumen yang Anda inginkan, dan mereka akan digantikan oleh spasi.

console.log(  myvar, "Logged!");
console.info( myvar, "Logged!");
console.warn( myvar, "Logged!");
console.debug(myvar, "Logged!");
console.error(myvar, "Logged!");

Ini muncul dengan logo berbeda untuk setiap perintah.

Anda juga dapat menggunakan console.profile(profileName);untuk mulai membuat profil suatu fungsi, skrip, dll. Dan kemudian mengakhirinya dengan console.profileEnd(profileName);dan itu akan muncul di tab Profil Anda di Chrome (tidak tahu dengan FF).

Untuk referensi lengkap, buka http://getfirebug.com/logging dan saya sarankan Anda membacanya. (Jejak, grup, profil, inspeksi objek).

Semoga ini membantu!

Tidak ada hubungannya dengan jQuery dan jika Anda ingin menggunakannya saya menyarankan Anda untuk melakukannya

if (window.console) {
    console.log("your message")
}

Jadi Anda tidak merusak kode Anda ketika itu tidak tersedia.

Seperti yang disarankan dalam komentar, Anda juga dapat menjalankannya di satu tempat dan kemudian menggunakannya console.logseperti biasa

if (!window.console) { window.console = { log: function(){} }; }

console.logtidak ada hubungannya dengan jQuery. Ini adalah objek / metode umum yang disediakan oleh debugger (termasuk debugger Chrome dan Firebug) yang memungkinkan skrip untuk mencatat data (atau objek dalam banyak kasus) ke konsol JavaScript.

console.loglog informasi debug ke konsol pada beberapa browser (Firefox dengan Firebug diinstal, Chrome, IE8, apa pun dengan Firebug Lite diinstal). Di Firefox, ini adalah alat yang sangat kuat, memungkinkan Anda untuk memeriksa objek atau memeriksa tata letak atau properti elemen HTML lainnya. Ini tidak terkait dengan jQuery, tetapi ada dua hal yang biasanya dilakukan saat menggunakannya dengan jQuery:

• instal ekstensi FireQuery untuk Firebug. Ini, di antara kelebihan lainnya, membuat pencatatan objek jQuery terlihat lebih bagus.

• buat pembungkus yang lebih sesuai dengan konvensi kode chaining jQuery.

Ini biasanya berarti sesuatu seperti ini:

$.fn.log = function() {
    if (window.console && console.log) {
        console.log(this);
    }
    return this;
}

yang dapat Anda panggil seperti

$('foo.bar').find(':baz').log().hide();

untuk dengan mudah memeriksa rantai jQuery.

console.log tidak ada hubungannya dengan jQuery.

Ini mencatat pesan ke konsol debugging, seperti Firebug.

Suatu titik kebingungan kadang-kadang adalah bahwa untuk mencatat pesan teks bersama dengan isi dari salah satu objek Anda menggunakan console.log, Anda harus melewati masing-masing dari keduanya sebagai argumen yang berbeda. Ini berarti bahwa Anda harus memisahkannya dengan koma karena jika Anda menggunakan operator + untuk menggabungkan output, ini secara implisit akan memanggil .toString()metode objek Anda. Ini dalam banyak kasus tidak secara eksplisit ditimpa dan implementasi default yang diwarisi oleh Objecttidak memberikan informasi yang berguna.

Contoh untuk dicoba di konsol:

>>> var myObj = {foo: 'bar'}
undefined
>>> console.log('myObj is: ', myObj);
myObj is: Object { foo= "bar"}

sedangkan jika Anda mencoba menyatukan pesan teks informatif beserta konten objek, Anda akan mendapatkan:

>>> console.log('myObj is: ' + myObj);
myObj is: [object Object]

Jadi perlu diingat bahwa console.log sebenarnya membutuhkan argumen sebanyak yang Anda suka.

Menggunakan console.log untuk menambahkan informasi debug ke halaman Anda.

Banyak orang menggunakan alert(hasNinjas)untuk tujuan ini tetapiconsole.log(hasNinjas) lebih mudah untuk dikerjakan. Menggunakan pop-up lansiran kotak dialog modal yang memblokir antarmuka pengguna.

Sunting: Saya setuju dengan Baptiste Pernet dan Jan Hančič bahwa itu adalah ide yang sangat bagus untuk memeriksa apakah window.consoledidefinisikan terlebih dahulu sehingga kode Anda tidak rusak jika tidak ada konsol yang tersedia.

Contoh - misalkan Anda ingin tahu baris kode mana yang dapat menjalankan program Anda (sebelum rusak!), Cukup ketik

console.log("You made it to line 26. But then something went very, very wrong.")

Anda menggunakannya untuk men-debug kode JavaScript dengan Firebug untuk Firefox, atau konsol JavaScript di browser WebKit .

var variable;

console.log(variable);

Ini akan menampilkan konten variabel, bahkan jika itu adalah array atau objek.

Ini mirip dengan print_r($var);untuk PHP .

Hati-hati: meninggalkan panggilan ke konsol dalam kode produksi Anda akan menyebabkan situs Anda rusak di Internet Explorer. Jangan pernah membuka bungkusnya. Lihat: https://web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog

Pada hari-hari awal JS debugging dilakukan melalui alert()fungsi - sekarang ini merupakan praktik yang usang.

Ini console.log()adalah fungsi yang menulis pesan untuk login pada konsol debugging, seperti Webkit atau Firebug. Di browser Anda tidak akan melihat apa pun di layar. Ini mencatat pesan ke konsol debugging. Ini hanya tersedia di Firefox dengan Firebug dan di browser berbasis Webkit (Chrome dan Safari). Itu tidak bekerja dengan baik di semua rilis IE .

Objek konsol adalah ekstensi ke DOM.

The console.log()harus digunakan dalam kode hanya selama pengembangan dan debugging.

Ini dianggap praktik buruk yang ditinggalkan seseorang console.log()di file javascript di server produksi.

Jika browser Anda mendukung debugging, Anda dapat menggunakan metode console.log () untuk menampilkan nilai-nilai JavaScript.

Aktifkan debugging di browser Anda dengan F12 , dan pilih "Console" di menu debugger.

Konsol dalam JavaScript. Cobalah untuk memperbaiki, atau "debug," program JavaScript yang tidak berfungsi, dan berlatih menggunakan perintah console.log (). Ada beberapa pintasan yang akan membantu Anda mengakses konsol JavaScript, berdasarkan peramban yang Anda gunakan:

Pintasan Keyboard Konsol Chrome

Windows: Ctrl+ Shift+ J
Mac: Cmd+ Option+J

Pintasan Keyboard Konsol Firefox

Windows: Ctrl+ Shift+ K
Mac: Cmd+ Option+K

Pintasan Keyboard Konsol Internet Explorer

F12 kunci

Pintasan Keyboard Konsol Safari

Cmd+ Option+C

console.logsecara khusus adalah metode untuk pengembang untuk menulis kode untuk secara tidak mencolok menginformasikan pengembang apa yang dilakukan kode. Ini dapat digunakan untuk mengingatkan Anda bahwa ada masalah, tetapi tidak boleh menggantikan debugger interaktif ketika tiba saatnya untuk men-debug kode. Sifatnya yang tidak sinkron berarti nilai yang dicatat tidak selalu mewakili nilai ketika metode dipanggil.

Singkatnya: kesalahan log dengan console.log(jika tersedia), lalu perbaiki kesalahan menggunakan debugger pilihan Anda: Firebug , Alat Pengembang WebKit (bawaan untuk Safari dan Chrome ), Alat Pengembang IE atau Visual Studio.

Saya benar-benar merasa pemrograman web mudah ketika saya mulai console.loguntuk debugging.

var i;

Jika saya ingin memeriksa nilai iruntime ..

console.log(i);

Anda dapat memeriksa nilai saat ini idi tab konsol firebug. Ini khusus digunakan untuk debugging.

Ini digunakan untuk mencatat (apa pun yang Anda lewati) ke konsol Firebug . Penggunaan utama adalah untuk men-debug kode JavaScript Anda.

Terlepas dari penggunaan yang disebutkan di atas, console.logjuga dapat mencetak ke terminal di node.js. Server yang dibuat dengan express (misalnya) dapat digunakan console.loguntuk menulis ke file logger output.

Dalam skrip java tidak ada fungsi input dan output. Jadi untuk debug metode kode console.log () digunakan. Ini adalah metode untuk logging. Ini akan dicetak di bawah log konsol (alat pengembangan).

Ini tidak ada di IE8 dan di bawah sampai Anda membuka alat pengembangan IE.

Ini tidak ada hubungannya dengan jQuery. Ini console.log()merujuk ke fungsi log objek konsol, yang menyediakan metode untuk mencatat informasi ke konsol browser. Metode-metode ini dimaksudkan hanya untuk tujuan debugging dan tidak boleh diandalkan untuk menyajikan informasi kepada pengguna akhir.