如何創建格式化的 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的網站： 網站

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