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

Question

今天我在 Facebook 上的 Chrome 控制台上“摇摇晃晃”。
令人惊讶的是我在控制台中收到了这条消息。

现在我的问题是：
这怎么可能？
我知道控制台有一些“利用”方法，但是如何在控制台中进行这样的字体格式化？ （是console.log吗？）

Answer 1

是的，您可以使用如下格式格式化

console.log()

：

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

请注意第一个参数中文本前面的

%c

以及第二个参数中的样式规范。文本将类似于您的示例。

请参阅 Google 的“使用 CSS 设置控制台输出样式” 或 FireBug 的控制台文档了解更多详细信息。

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

Answer 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

Answer 3

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

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

Answer 4

来自 Google 网站：site

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

Answer 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 StackOverflow", "#question-header > div > a");

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

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

Answer 6

通过点击 10 年前这里给出的链接，

https://developer.chrome.com/docs/devtools/console/format-style#style-ansi

浏览器控制台似乎也支持 ANSI 转义序列。

如何使用它们是一个漫长的旅程，但从我的 shell 知识来看，文本转换的基础可以如下完成：

console.info('\033[9mStrike\033[0m')
console.info('\033[4mUnderline\033[0m')
console.info('\033[2mDimmed\033[0m')
console.info('\033[1mBold\033[0m')
console.info('\033[3mItalic \033[0m')
console.info('\033[5mBlinking does not work, someone fix this ASAP\033[0m')
console.info('\033[31mANSI \033[32;4;1m8 BIT\033[0m \033[33mCOLOR\033[0m')

---

我们可以传递带有一些 CSS 的 SVG 🎩。

console.log("%c  ","font-size:250px;background:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><text y='0.95em' font-size='8'>🎩</text></svg>\")")

https://stackoverflow.com/a/79190595/2494754