Difference between console.log() and console.debug()?

陌路散爱 提交于 2019-11-29 20:13:06

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

They are almost identical - the only difference is that debug messages are hidden by default in recent versions of Chrome (you have to set the log level to Verbose in the Devtools topbar while in console to see debug messages; log messages are visible by default).

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:

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.

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

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!