console.log() 和 console.debug() 的区别？

Question

Google has not been helpful for me, since searching for "console.debug" just brings up a bunch of pages that have the words "console" and "debug" on them.

I'm wondering what the difference is between console.log() and console.debug() . Is there some way to use a bunch of console.debug() statements and then just flip a switch to easily shut off all debug statements from being sent to the console (like after launching a site)?

Answer 1

Technically console.log console.debug and console.info are identical However the way they display the data is little different

console.log Black color text with no icon

console.info Blue color text with icon

console.debug Pure black color text

console.warn Yellow color text with icon

console.error Red Color text with icon

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

Answer 2

For at least IE, Firefox and Chrome consoles, .debug() is just an alias for .log() added for improved compatibility

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

Answer 3

它们几乎完全相同 - 唯一的区别是默认情况下调试消息在最近版本的Chrome中隐藏（您必须在Devtools顶部栏中将日志级别设置为Verbose ，而在控制台中查看调试消息;默认情况下可以看到日志消息） 。

Answer 4

console.info , console.debug methods are identical to console.log .

• console.log Printing statement
• console.info Black color text with "i" icon in blue color
• console.debug Blue Color text

Documentation:

• Chrome
• IE
• Edge
• FireFox
• Safari

Answer 5

If you want the ability to disable logging after a product is finished you could override the console.debug() function or make another custom one.

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

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

Foo▸ {age: 41, name: "Jhon Doe"}

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

No output

However I havent figured a way to color the outputs as well.

Answer 6

From Documentation of browsers,The log , debug and also info methods are identical in implementation wise but varies in color and icon

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

Answer 7

I know it's old, but to continue on @Espen's answer, you can separate responsibilities and use console.log for your regular logs that should also appear on production, and for console.debug you can do something like that:

if (env === 'production') {
   console.debug = function () {};
}

This will override console.debug and it won't print anything. This way you don't have to worry about things that should appear in prod environment.