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

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

我想知道console.log()和console.debug()之间的区别是什么。是否有一些方法可以使用一堆console.debug()语句，然后只需打开或者关闭开关就可以轻松关闭所有调试语句，不被发送到控制台(比如在启动一个网站之后)?

116797 次浏览
小开
最佳答案

至少对于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

小开

console.info，console.debug方法与console.log相同。

  • console.log 打印语句
  • console.info黑色文本与“i”图标在蓝色
  • console.debug蓝色文本

文档:

小开

根据浏览器文档，log， __abc1和info方法在实现上是相同的，但在颜色和图标上有所不同

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

小开
从技术上讲，console.log console.debug和console.info是相同的 然而，它们显示数据的方式略有不同。console.debug在浏览器的JS控制台中默认是不可见的。它可以通过使用控制台的过滤器选项来启用

没有图标的黑色文本

带有图标的蓝色文本

console.debug纯黑色文本

带有图标的黄色文本

带有图标的红色文本

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

enter image description here

小开

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

小开

如果你想要在产品完成后禁用日志记录功能，你可以覆盖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'});

没有输出

然而，我还没有找到一种方法来为输出着色。

小开

我知道它很旧了，但是继续@Espen的回答，你可以分离职责，使用console.log作为你的常规日志，这些日志也应该出现在生产中，而对于console.debug，你可以这样做:

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

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


提交答案