寫前端代碼，肯定是離不開console.log()調試的。但是，你們知道其實還能使用CSS來設置控制台打印的日志。所以這篇為大家介紹一下如何花樣打印日志。
如果查看Mozilla Developer文檔Console，你會看到該Console對象支持一些漂亮的功能，例如字符串替換和CSS樣式。這兩個功能都通過在第一個console.log()參數內使用特殊標記，然后使用一系列用於修改第一個參數的后續參數來工作。
字符串替換，我們可以%o像這樣插入一個對象：
console.log("我的document是:%o", document);
CSS樣式插入，我們可以使用以下方式設置相同的日志語句的樣式%c：
console.log( "%c我的document是: %o", "color: red ;", document );
打印的字體變成了紅色。請注意，第二個和第三個參數分別用於修改%c和%o。在這種情況下，color: red影響會影響后面的所有內容%c。
下面我們來看看更多的玩法吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<title>控制打印樣式</title>
</head>
<body>
<script type="text/javascript">
console.log("%cAltering the text color", "color: fuchsia"); //文本顏色
console.log(
"%c字體的多樣化顯示",
"background-color: fuchsia ; color: white ; font-weight: bold ; " +
"font-size: 20px ; font-style: italic ; text-decoration: underline ; " +
"font-family: 'american typewriter' ; text-shadow: 1px 1px 3px black ;"
); //字體的多樣化顯示
console.log(
"%c給文本加上邊框",
"display: inline-block ; border: 3px solid red ; border-radius: 7px ; " +
"padding: 10px ; margin: 20px ;"
);//邊框樣式
console.log(
"%c背景圖片",
"display: inline-block ; background-image: url( 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg&refer=http%3A%2F%2Fa2.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612363383&t=9672c03657ad4a95d026f8a512979328' ) ; " +
"background-size: cover ; padding: 10px 175px 158px 10px ; " +
"border: 2px solid black ; font-size: 11px ; line-height: 11px ; " +
"font-family: monospace ;"
); //顯示一張背景圖片
//相同的CSS樣式可以與許多其他控制台方法一起使用，例如.group（）方法。
//創建一個組
console.group("%c組內容輸出", "background-color: #e0005a ; color: #ffffff ; font-weight: bold ; padding: 4px ;");
//分組輸出
console.log("我是組里面的內容1");
console.log("我是組里面的內容2");
console.log("我是組里面的內容3");
//結束
console.groupEnd();
</script>
</body>
</html>
我們只是試圖在各種語句中投放大量CSS，console.log()以查看它們所支持的內容。並且，當我們在Chrome中運行上述代碼時，在控制台輸出如下：
為了讓這個更好用一點，我將創建一個echo對象來代替console。意思是，它將具有受控制台啟發的方法，例如：
// 創建一個日志記錄API，其中包含一些特殊的格式信息。 var echo = (function () { var queue = []; var ECHO_TOKEN = {}; var RESET_INPUT = "%c "; var RESET_CSS = ""; function alertFormatting(value) { queue.push({ value: value, css: "display: inline-block ; background-color: #e0005a ; color: #ffffff ; font-weight: bold ; padding: 3px 7px 3px 7px ; border-radius: 3px 3px 3px 3px ;" }); return (ECHO_TOKEN); } function warningFormatting(value) { queue.push({ value: value, css: "display: inline-block ; background-color: gold ; color: black ; font-weight: bold ; padding: 3px 7px 3px 7px ; border-radius: 3px 3px 3px 3px ;" }); return (ECHO_TOKEN); } function using(consoleFunction) { function consoleFunctionProxy() { var inputs = []; var modifiers = []; for (var i = 0; i < arguments.length; i++) { if (arguments[i] === ECHO_TOKEN) { var item = queue.shift(); inputs.push(("%c" + item.value), RESET_INPUT); modifiers.push(item.css, RESET_CSS); // 對於其他所有參數類型，直接輸出值。 } else { var arg = arguments[i]; if ((typeof (arg) === "object") || (typeof (arg) === "function")) { inputs.push("%o", RESET_INPUT); modifiers.push(arg, RESET_CSS); } else { inputs.push(("%c" + arg), RESET_INPUT); modifiers.push(RESET_CSS, RESET_CSS); } } } consoleFunction(inputs.join(""), ...modifiers); // 全部輸出后，清空隊列。 queue = []; } return (consoleFunctionProxy); } return ({ // 控制台功能。 log: using(console.log), warn: using(console.warn), error: using(console.error), trace: using(console.trace), group: using(console.group), groupEnd: using(console.groupEnd), // 格式化功能。 asAlert: alertFormatting, asWarning: warningFormatting }); })(); // 混合打印 echo.log( echo.asAlert("我是錯誤"), "哈哈哈", {"我": "是一個對象"}, null, ["我是一個數組"], function amAFunction() { //方法 }, echo.asWarning("我是警告") ); echo.log(); // 測試打印 echo.group(echo.asWarning("周星馳·功夫")); echo.log("主演：周星馳"); echo.log("類型", echo.asAlert("喜劇!"), echo.asWarning("動作")); echo.log("2004年"); echo.log("票房", echo.asWarning("1.73億")); echo.groupEnd(); echo.log(); echo.log(echo.asAlert("多重打印"), "我是外層");
基本方法是，格式化方法asAlert()和asWarning()會將值和CSS推送到內部隊列中。然后，console代理方法將內部隊列合並為單個console調用。
正如你所看到的，這種echo抽象使得它封裝成一個簡單好調用的方法，然后將所有可變參數代理函數傳遞給它即可。
希望這些有趣的東西可以帶給你快樂。
以上就是整篇的所有內容了。