如何創建格式化的javascript控制檯日誌消息

Question

我今天在Facebook的Chrome中通過控制檯「搖擺」。
令人驚訝的是，我在控制檯中收到了這條消息。

現在我的問題是：
這怎麼可能？
我知道控制檯有一些'exploit'方法，但是如何在控制檯中進行這種字體格式化呢？ （並且它CONSOLE.LOG？）

Answer 1

是的，你可以用這樣的格式化console.log()論據。文字看起來就像你的例子。

請參閱Google's "Styling Console Output with CSS"或FireBug's Console Documentation瞭解更多詳情。

文檔鏈接還包含一些其他整潔的技巧，例如在控制檯日誌中包含對象鏈接。

Answer 2

試試這個：

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

引用的文檔，

您使用％C格式說明應用自定義CSS規則，任何 字符串你用console.log（）或相關的方法寫入控制檯。

來源：

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

注意%c在第二位的第一個參數文字和樣式規格前面： https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

Answer 3

從谷歌的網站：site

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

Answer 4

您也可以格式化字符串。

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