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

Posted 2023-02-14

【中文标题】console.log() 和 console.debug() 的区别？

【英文标题】：Difference between console.log() and console.debug()?

【发布时间】：2014-03-19 13:05:59

【问题描述】：

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

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

【问题讨论】：

这里是如何禁用 console.log 输出 ***.com/questions/1215392/…

你可以放颜色。 console.log('%c 示例文本', 'color:green;');或者使用以下命令在文本中添加一些 VAR：console.log(`Sample $variable`, 'color:green;');

【参考方案1】：

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

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 浏览器快照。

感谢解答，截图很清楚。不过要问，为什么是字符串连接？为什么不只是console.log("Console.log"); 而不是console.log("Console.log" + " " + playerOne);？ " " + playerOne 有什么作用？

在我的控制台中，我得到了与console.log("Console.log"); console.debug("Console.debug"); console.warn("Console.warn"); console.info("Console.info"); console.error("Console.error");相同的显示

还需要注意的是，console.error 和console.warn 输出到stderr，而其他输出到stdout

【参考方案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

【讨论】：

在 Chrome 中，debug() 显示为蓝色，log() 显示为黑色

对 log() 的重大改进。

来自developer.mozilla.org/en-US/docs/Web/API/console: console.debug() - 注意：从 Chromium 58 开始，此方法仅在选择“详细”级别时出现在 Chromium 浏览器控制台中.

在 Chrome 中使用 Debug：不允许调用 Debug

【参考方案3】：

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

【讨论】：

嗨，这似乎是真的，但我无法找到有关此行为的任何信息。 Chrome docs 直到今天都没有提及它。

现在我终于明白了“在控制台顶部将日志级别设置为 Verbose”。您的意思是在开发工具中底部有控制台。在本节的顶部，除了过滤器和帧选择器，还有一个详细的日志下拉列表（预设为“信息”）

这是最相关的答案。每个人都提到颜色，但这在 IMO 中更为重要。

【参考方案4】：

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

console.logPrinting statement console.info黑色文本，蓝色“i”图标 console.debug蓝色文字

文档：

Chrome IE Edge FireFox Safari

【讨论】：

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

我已在 Chrome 52.0.2743.82 Console.Info 中以黑色和蓝色图标打印，Console.warn 以黑色和黄色图标打印 console.error 以红色和红色图标打印跨度>

请相应地编辑您的答案，以便我可以赞成或删除反对票，您是否在使用 console.info() 时注意到打印文本前的蓝色“i”图标

【参考方案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');

没有输出

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

【讨论】：

非常适合使用 ANSI 转义码进行着色：***.com/a/41407246/1175053

【参考方案6】：

根据浏览器文档，log、debug 和 info 方法在实现方面相同，但颜色和图标不同

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

【讨论】：

这应该是一个评论或添加更多解释，以回答两者如何相同或没有区别以理解 OP 和其他。谢谢