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


143

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

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


以下是如何禁用的console.log输出stackoverflow.com/questions/1215392/...
frazras

你可以放颜色。console.log('%c Sample Text','color:green;'); 或使用以下命令在文本中添加一些VAR:console.log(`Sample $ {variable}`,'color:green;');
吉尔伯托·B·泰拉(Jilberto B. Terra Jr.)

Answers:


74

55
在Chrome中debug()出现蓝色和log()黑色
Simon_Weaver 2015年

38
对log()的重大改进。
Vael Victus

32
developer.mozilla.org/zh-CN/docs/Web/API/console中console.debug() - 注意:从Chromium 58开始,仅当选择“详细”级别时,此方法才出现在Chromium浏览器控制台中。
cilf '17

在Chrome中使用调试:调试调用不允许
马苏德Bimar

103

技术上console.log console.debugconsole.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);

在此处输入图片说明


在Google chrome浏览器中,info级别日志仅用图标(与快照中的图标相同)显示,但文本(console.info帖子中的文本)为黑色,行的背景颜色为白色。可能是您用于Firefox浏览器的快照。
RBT

3
感谢您的回答,截图非常清楚。一定要问,为什么要字符串串联?为什么不只是console.log("Console.log");代替console.log("Console.log" + " " + playerOne);?怎么" " + playerOne办?
hofnarwillie '18 -10-3

在我的控制台中,与console.log("Console.log"); console.debug("Console.debug"); console.warn("Console.warn"); console.info("Console.info"); console.error("Console.error");
kotchwane

36

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


2
嗨,这似乎是事实,但我无法找到有关此行为的任何信息。到目前为止Chrome文档还没有提及它。
oligofren

3
现在,我终于了解了“在控制台顶部将日志级别设置为Verbose”。您的意思是在开发工具中,控制台位于底部。在此部分的顶部,以及“过滤器”和帧选择器,还有日志的详细信息下拉列表(预设为“信息”)
oligofren

1
这是最相关的答案。每个人都提到颜色,但这对IMO更为重要。
DurkoMatko

15

console.infoconsole.debug方法与相同console.log

  • console.log 印刷声明
  • console.info 黑色文字带有蓝色的“ i”图标
  • console.debug 蓝色文字

说明文件:


Console.info打印蓝色,console.warn打印黄色,console.error打印红色
shivgre

我已经在Chrome 52.0.2743.82中进行了测试。Console.Info以黑色显示带有蓝色图标,Console.warn以黑色显示带有黄色图标console.error以红色显示带有红色图标
Venkat

请相应地编辑答案,以便我可以上投票或删除下票,您是否在使用console.info()时在打印的文本之前注意到了蓝色的“ i”图标
shivgre

2

如果要在产品完成后禁用日志记录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'});

无输出

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.