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 <的行/ p>

可以通过在第一个参数的开头添加%c而将简单的css规则添加为console.log的第二个参数来实现着色：

console.log('%c' + $message, 'color:' + $color + ';background-color: #444; padding: 3px 7px; margin-left: -7px;');

以及您在此答案下可以找到的正确日志包装

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

Answer 4

受到贾登回答的启发。做了一点日志功能。

function log(msg, color) {

  var css = "",
  paint = { // default colors
    clr: "#212121",
    bgc: "#b0bec5"
  },
  colors = {
    error: {clr:"#ffebee", bgc:"#c62828"}, // red
    success: {clr: "#e8f5e9", bgc: "#2e7d32"}, // green
    warning: {clr: "#fff3e0", bgc: "#f4511e"}, // orange
    info: {clr: "#ede7f6", bgc: "#651fff"} // purple
  };

  // overriting default colors if color given
  if (colors.hasOwnProperty(color)){ paint.clr = colors[color].clr; paint.bgc = colors[color].bgc; }
  css = "color:" + paint.clr + ";font-weight:bold; background-color: " + paint.bgc + "; padding: 3px 6px; border-radius: 2px;";

  console.log("%c"+msg, css);
}

测试

log("Default");
log("Error", "error");
log("Success", "success");
log("Warning", "warning");
log("Info", "info");

What it looks like

Answer 5

简单又不错：

console.log("%cHello World", "color:#fff;background:#08c;padding:5px;border-radius:8px")

Answer 6

可以给对象console添加函数，比如我用这个函数成功

console.success = (message) => { 
  console.log('%c ' + message, 'color: green; font-weight:bold') 
}

console.success('I am a successfull message')

Answer 7

使用以下代码段，您可以按照自己的意愿使用console.log命令！

Chrome✔️
Firefox✔️
Safari✔️
Opera（谁关心...）
IE（猜猜是......）

＆＃13;

(function () {
	$consoleLog = console.log;
  console.log = function ($message, $color) {
  	$consoleLog('%c' + $message, 'color:' + $color + ';font-weight:bold;');
  }
})();

console.log('test', 'green');

＆＃13;

OR

https://jsfiddle.net/mL88u3n9/

更改console.log消息颜色

7 个答案: