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

Question

谷歌对我没有帮助，因为搜索“console.debug”只会显示一堆带有“console”和“debug”字样的页面。

我想知道console.log()和console.debug()之间有什么区别。 有什么方法可以使用一堆console.debug()语句，然后只需翻转一个开关即可轻松关闭所有调试语句，使其不被发送到控制台（例如在启动站点之后）？

Answer 1

从技术上讲， console.log console.debug和console.info是相同的但是它们显示数据的方式却略有不同

console.log没有图标的黑色文本

console.info带图标的蓝色文本

console.debug纯黑色文字

console.warn带图标的黄色文本

console.error带图标的红色文本

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

对于至少IE，Firefox和Chrome控制台，.debug（）只是.log（）的别名，为了提高兼容性而添加

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方法与console.log相同。

• console.log 打印声明
• console.info黑色文本，蓝色“i”图标
• console.debug蓝色文本

文档：

• 铬
• IE
• 边缘
• 火狐
• 苹果浏览器

Answer 5

如果您希望能够在产品完成后禁用日志记录，则可以覆盖console.debug()函数或创建另一个自定义日志。

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

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

Foo▸{年龄：41，名字：“Jhon Doe”}

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

没有输出

但是我还没有找到一种方法来为输出着色。

Answer 6

从浏览器的文档中， log ， debug和info方法在实现方面是相同的，但颜色和图标各不相同

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

Answer 7

我知道它已经过时了，但是要继续@Espen 的回答，您可以分离职责并将 console.log 用于您的常规日志，这些日志也应该出现在生产中，对于 console.debug 您可以执行以下操作：

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

这将覆盖 console.debug 并且不会打印任何内容。 这样您就不必担心应该出现在 prod 环境中的东西。