讓喜歡按F12的訪客不至于看到空空的控制臺，console打印的文字是可以添加樣式的，不過不是全部css效果都有效，這里只介紹一小部分樣式。

\n是換行，可以將一個字符串設置成多行
%c標記之后的內容使用對應樣式，格式如 console.log('%c第一個樣式%c第二個樣式','css1','css2'); 如此對應
樣式和普通的css效果基本一致，可以設置文字顏色，背景顏色，字體大小，間距，邊距等等。還支持部分css3高級效果。
甚至還支持輸出圖片，不過我怎么都沒有弄出來。。。
代碼如下：

/*
* 控制臺
*/
$(function () {
    console.log("%c%c博客名稱%cAE博客", "line-height:28px;", "line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px", "color:#3fa9f5;line-height:28px;font-size:16px;");
	console.log("%c%c網站地址%chttp://www.zoe725.cn", "line-height:28px;", "line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px", "color:#ff9900;line-height:28px;font-size:16px;");
	console.log("%c%c企鵝號碼%c774740085", "line-height:28px;", "line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px", "color:#008000;line-height:28px;font-size:16px;");
	console.log("%c%c咸魚永遠是咸魚 、即使翻身以后", "line-height:28px;", "line-height:28px;padding:4px 0px;color:#fff;font-size:16px;background-image:-webkit-gradient(linear,left top,right top,color-stop(0,#ff22ff),color-stop(1,#5500ff));color:transparent;-webkit-background-clip:text;");
  
});

轉載請注明出處 AE博客|墨淵 ? Console美化，在瀏覽器控制臺添加網站說明