在 Firebug / Chrome 控制台中输出 HTML

Question

我的印象是只能使用console.log("text")或console.info("text")等将文本记录到浏览器控制台，这些大网站如何设法在控制台中获取不同的字体和ascii艺术？

Chrome 控制台上的 Facebook：

Chrome 控制台上的 Google Plus：

Firebug 控制台上的 Facebook：

Answer 1

重写控制台并不能让他们使用不同的颜色。

它是console.log() 的内置功能，您可以使用以%c 开头的CSS 属性在JavaScript 控制台中设置文本样式。

大红字：

console.log("%cStop!", "font: 50px sans-serif; font-weight:bold; color:red; -webkit-text-stroke:1px black;");

黄色背景上的红色文字：

console.log("%cWARNING!", "font: 2em monospace; color: red; background-color: yellow;");

Ascii 艺术：

var asciiArt = [
  "",
  " .d8888b.  888                       888",
  "d88P  Y88b 888                       888",
  "Y88b.      888                       888",
  ' "Y888b.   888888  .d88b.  88888b.   888',
  '    "Y88b. 888    d88""88b 888 "88b  888',
  '      "888 888    888  888 888  888  Y8P',
  "Y88b  d88P Y88b.  Y88..88P 888 d88P",
  ' "Y8888P"   "Y888  "Y88P"  88888P"   888',
  "                           888",
  "                           888",
  "                           888",
];
var sideText = 'This is a browser feature intended for developers. If someone told you to copy-paste something here to enable a Facebook feature or "hack" someone\'s account, it is a scam and will give them access to your Facebook account.';
var bottomText = "See https://www.facebook.com/selfxss for more information.";
// split lines in side text into groups of 35 characters until the end of a word
var split = ("" + sideText.toString()).match(/.{35}.+?\s+|.+$/g);
if (split != null) {
    // row of ascii text to start adding side text
    var startingRow = Math.floor(Math.max(0, (asciiArt.length - split.length) / 2));
    for (var i = 0; i < asciiArt.length || i < split.length; i++) {
        // add spaces and a line of sideText to each line of ascii art
        asciiArt[i] += new Array(45 - asciiArt[i].length).join(" ") + (split[i - startingRow] || "");
    }
}
// print ascii art followed by bottom text
console.log("\n\n\n" + asciiArt.join("\n") + "\n\n" + bottomText.toString() + "\n");