Perbedaan antara console.log () dan console.debug ()?

143

Google belum membantu saya, karena mencari "console.debug" hanya memunculkan banyak halaman yang memiliki kata "console" dan "debug".

Saya bertanya-tanya apa perbedaan antara console.log()dan console.debug(). Apakah ada cara untuk menggunakan banyak console.debug()pernyataan dan kemudian cukup beralih untuk mematikan semua pernyataan debug agar tidak dikirim ke konsol (seperti setelah meluncurkan situs)?

javascript console console.log web-developer-toolbar CaptSaltyJack
sumber
Berikut adalah cara menonaktifkan keluaran console.log stackoverflow.com/questions/1215392/...
frazras
Anda bisa menaruh warna. console.log ('% c Contoh Teks', 'warna: hijau;'); Atau tambahkan beberapa VAR dalam teks menggunakan: console.log (`Sample $ {variable}`, 'color: green;');
Gilberto B. Terra Jr.

Jawaban:

74

Untuk setidaknya IE, Firefox dan konsol Chrome, .debug () hanyalah alias untuk .log () ditambahkan untuk meningkatkan kompatibilitas

https://developer.mozilla.org/en-US/docs/Web/API/console

https://developers.google.com/chrome-developer-tools/docs/console-api#consoledebugobject_object

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

Pete TNT
sumber
55
Di Chrome debug()muncul warna biru dan log()hitam
Simon_Weaver
38
Peningkatan serius pada log ().
Vael Victus
32
Dari developer.mozilla.org/en-US/docs/Web/API/console : console.debug () - Catatan: Memulai dengan Chromium 58 metode ini hanya muncul di konsol browser Chromium ketika level "Verbose" dipilih.
cilf
Menggunakan Debug di Chrome: Memanggil Debug tidak Diizinkan
Masoud Bimar
103

Secara teknis console.log console.debugdan console.infoidentik Namun cara mereka menampilkan data sedikit berbeda

console.log Teks warna hitam tanpa ikon

console.info Teks warna biru dengan ikon

console.debug Teks warna hitam murni

console.warn Teks warna kuning dengan ikon

console.error Teks Warna Merah dengan ikon

var playerOne = 120;
var playerTwo = 130;
var playerThree = 140;
var playerFour = 150;
var playerFive = 160;

console.log("Console.log" + " " +  playerOne);
console.debug("Console.debug" + " " +playerTwo);
console.warn("Console.warn" + " " + playerThree);
console.info("Console.info" + " " + playerFour);
console.error("Console.error" + " " + playerFive);

masukkan deskripsi gambar di sini

Prabhakar Undurthi
sumber
Di google chrome, infotingkat log log hanya ditampilkan dengan ikon (sama seperti dalam snapshot) tetapi teks ( console.infoteks dalam posting Anda) berwarna hitam dan warna latar belakang baris adalah putih. Mungkin snapshot Anda untuk browser firefox.
RBT
3
Terima kasih atas jawabannya, sangat jelas dengan tangkapan layar. Harus bertanya, mengapa senar digabungkan? Kenapa tidak console.log("Console.log");malah console.log("Console.log" + " " + playerOne);? Apa yang " " + playerOnedilakukan?
hofnarwillie
Di konsol saya, saya mendapatkan tampilan yang sama denganconsole.log("Console.log"); console.debug("Console.debug"); console.warn("Console.warn"); console.info("Console.info"); console.error("Console.error");
kotchwane
36

Mereka hampir identik - satu-satunya perbedaan adalah bahwa pesan debug disembunyikan secara default di versi terbaru Chrome (Anda harus mengatur level log Verbosedi bilah Devtools saat di konsol untuk melihat pesan debug; pesan log terlihat secara default).

pengguna2486570
sumber
2
Hai, ini tampaknya benar, tetapi saya tidak dapat menemukan informasi tentang perilaku ini. Dokumen Chrome tidak menyebutkannya sampai hari ini.
oligofren
3
Sekarang saya akhirnya mengerti "atur level log ke Verbose di atas konsol". Maksud Anda di Dev Tools ada konsol di bagian bawah. Di bagian atas bagian ini, bersama dengan Filter dan pemilih bingkai, ada juga drop-down verbositas untuk log (preset ke "Info")
oligofren
1
Ini adalah jawaban yang paling relevan. Semua orang menyebutkan warna tetapi ini IMO lebih penting.
DurkoMatko
15

console.info, console.debugmetode identik dengan console.log.

  • console.log Pernyataan pencetakan
  • console.info Teks warna hitam dengan ikon "i" dalam warna biru
  • console.debug Teks Warna Biru

Dokumentasi:

Venkat
sumber
Console.info mencetak warna biru, console.warn mencetak warna kuning dan console.error mencetak warna merah
shivgre
Saya telah menguji di Chrome 52.0.2743.82 Console.Info mencetak dalam warna hitam dengan ikon biru, Console.warn mencetak dalam warna hitam dengan ikon ikon kuning. Cetak teror dalam warna Merah dengan ikon merah
Venkat
harap edit jawaban Anda sehingga saya dapat menaikkan atau menghapus downvote, apakah Anda memperhatikan ikon "i" berwarna biru di depan teks yang dicetak saat menggunakan console.info ()
shivgre
2

Jika Anda ingin kemampuan menonaktifkan pencatatan setelah produk selesai, Anda bisa mengganti console.debug()fungsinya atau membuat yang lain kustom.

console.debug = function() {
    if(!console.debugging) return;
    console.log.apply(this, arguments);
};

console.debugging = true;
console.debug('Foo', {age:41, name:'Jhon Doe'});

Foo▸ {umur: 41, nama: "Jhon Doe"}

console.debugging = false;
console.debug('Foo', {age:26, name:'Jane Doe'});

Tidak ada output

Namun saya belum menemukan cara untuk mewarnai output juga.

Espen MS
sumber
1

Dari Dokumentasi peramban, Metode log, debugdan juga infoidentik dalam penerapannya tetapi bervariasi dalam warna dan ikon

https://jsfiddle.net/yp4z76gg/1/

Venkat
sumber
1
Ini harus berupa komentar atau tambahkan lebih banyak penjelasan dengan jawaban untuk bagaimana keduanya identik atau tidak ada perbedaan untuk memahami OP dan yang lainnya. Terima kasih
ρяσѕρєя K