如何创建格式化的 javascript 控制台日志消息

Posted 2023-02-22

【中文标题】如何创建格式化的 javascript 控制台日志消息

【英文标题】：How do I create formatted javascript console log messages

【发布时间】：2014-04-05 00:56:31

【问题描述】：

我今天在 Facebook 上的 Chrome 中的控制台“蹒跚”。 令人惊讶的是，我在控制台中收到了这条消息。 现在我的问题是：这怎么可能？ 我知道控制台有一些“利用”方法，但是如何在控制台中进行这种字体格式设置？ （它是console.log吗？）

【参考方案1】：

是的，您可以像这样格式化console.log()：

console.log("%cExtra Large Yellow Text with Red Background", "background: red; color: yellow; font-size: x-large");

注意第一个参数中文本前面的%c 和第二个参数中的样式规范。文本看起来像您的示例。

请参阅Google's "Styling Console Output with CSS" 或FireBug's Console Documentation 了解更多详情。

文档链接还包括一些其他巧妙的技巧，例如在控制台日志中包含对象链接。

【讨论】：

在尝试使用console.log 中的格式字符串之前，您可能需要检查是否正在使用兼容的浏览器，因为旧版浏览器可能会因异常而停止您的脚本。 caniuse says 它是在 Firefox 9 和 Edge 79 中引入的； Chrome 显然在 Chrome 83 之前的一段时间内开始支持它，但我们不知道确切的时间。

【参考方案2】：

试试这个：

console.log("%cThis will be formatted with blue text", "color: blue");

引用文档，

您使用 %c 格式说明符将自定义 CSS 规则应用于任何 您使用 console.log() 或相关写入控制台的字符串 方法。

来源： https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

【讨论】：

您好，downvoter，有什么要添加的 cmets 吗？ - 当您不让 cmets 解释自己时，很难改进答案（您认为不好）。 :)

【参考方案3】：

您还可以格式化子字符串。

var red = 'color:red';
var blue = 'color:blue';
console.log('%cHello %cWorld %cfoo %cbar', red, blue, red, blue);

【讨论】：

请注意，只能在console.log 的第一个参数中设置样式，并且样式必须紧跟在后面。

【参考方案4】：

来自谷歌的网站：site

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

【参考方案5】：

只需扩展其他答案，您就可以重用现有的选择器、类、元素的 css 样式。在 SO 控制台窗口中试试这个。

const customLog = (message, cssSelector) =>
  console.log(
    `%c$message`,
    Object.entries(getComputedStyle(document.querySelector(cssSelector)))
      .map(([k, v]) => `$k:$v`)
      .join(";")
  );

customLog("Hello ***", "#question-header > div > a");

customLog("Hello ***", "strong");

customLog("Hello ***", "a");