更改console.log消息颜色

Question

有没有一种方法可以这样做：

console.log("hello world", '#FF0000')

是Chrome/Safari还是Firefox？

Answer 1

这是可行的：

function colorTrace(msg, color) {
    console.log("%c" + msg, "color:" + color + ";font-weight:bold;");
}
colorTrace("Test Me", "red");

Answer 2

制作了这个，并且它很有帮助：

function log(msg, color) {
    color = color || "black";
    bgc = "White";
    switch (color) {
        case "success":  color = "Green";      bgc = "LimeGreen";       break;
        case "info":     color = "DodgerBlue"; bgc = "Turquoise";       break;
        case "error":    color = "Red";        bgc = "Black";           break;
        case "start":    color = "OliveDrab";  bgc = "PaleGreen";       break;
        case "warning":  color = "Tomato";     bgc = "Black";           break;
        case "end":      color = "Orchid";     bgc = "MediumVioletRed"; break;
        default: color = color;
    }

    if (typeof msg == "object") {
        console.log(msg);
    } else if (typeof color == "object") {
        console.log("%c" + msg, "color: PowderBlue;font-weight:bold; background-color: RoyalBlue;");
        console.log(color);
    } else {
        console.log("%c" + msg, "color:" + color + ";font-weight:bold; background-color: " + bgc + ";");
    }
}

使用：

log("hey"); // Will be black
log("Hows life?", "green"); // Will be green
log("I did it", "success"); // Styled so as to show how great of a success it was!
log("FAIL!!", "error"); // Red on black!
var someObject = {prop1: "a", prop2: "b", prop3: "c"};
log(someObject); // prints out object
log("someObject", someObject); // prints out "someObect" in blue followed by the someObject

Answer 3

当前给出的所有答案都将导致重大调试问题-日志输出中报告的行号始终与自定义日志函数最终调用本机console.log的行相对应

在常规的console.log中提供了简单的着色功能--只需在第一个参数前面加上%c，并将字符串形式的css规则作为第二个参数传递即可：

console.log(`%c[stackoverflow] postAnswer()`, ';background: lightblue; color: #444; padding: 3px; border-radius: 5px;');

这是它在控制台中的外观：

​

您可以在下面的答案中找到正确的日志记录包装器

A proper wrapper for console.log with correct line number?

适用于VSCode用户的：

以下是快捷键代码片段，它将剪贴板包装成漂亮的日志，并允许您选择颜色：

{
    "key": "cmd+alt+l",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "snippet": "console.log(`%c[${WORKSPACE_NAME/(.*)/${1:/upcase}/}] ${CLIPBOARD}`, '${2|;background: lightblue; color: #444;,;background: lightgreen; color: #444;,;background: lightsalmon; color: #444;,;background: lightcyan; color: #444;,;background: lightpink; color: #444;,;background: lightseagreen; color: #444;,;background: lightskyblue; color: #444;,;background: lightsteelblue; color: #444;,;background: khaki; color: #444;,;background: purple; color: white;,;background: salmon; color: white;,;background: blue; color: white;,;background: #444; color: white;,;background: green; color: white;,‍♀️;background: blueviolet; color: white;,;background: chocolate; color: white;,‍;background: mediumvioletred; color: white;,;background: brown; color: white;,;background: cadetblue; color: white;,;background: cornflowerblue; color: white;,;background: crimson; color: white;,;background: red; color: white;|} padding: 3px; border-radius: 5px;');"
    }
}

只需将此条目添加到您的keybindings.json -在mac上它在这里：~/Library/Application Support/Code/User/keybindings.json

这是它在VSCode中的外观：

​

​