控制台也能炫-chrome浏览器控制台输出彩色文字

前些时间做一个前后端通信的系统，在调试的过程中每次刷新页面都有很多输出，乱的很，所以自己又加了几个颜色的输出，console.js内容如下：

var sq = {
        log: function (s, css) {
            css = (css == undefined) ? "color:#fff7d3;background-color:#ff4f49;font-size:12px;padding:10px;" : css;
            console.log("%c%s", css, s);
        },
        green: function (s, css) {
            css = (css == undefined) ? "color:#fff7d3;background-color:#33a600;font-size:12px;padding:10px;" : css;
            console.log("%c%s", css, s);
        },
        blue: function (s, css) {
            css = (css == undefined) ? "color:#fff7d3;background-color:#00768f;font-size:12px;padding:10px;" : css;
            console.log("%c%s", css, s);
        },
        violet: function (s, css) {
            css = (css == undefined) ? "color:#fff7d3;background-color:#79008f;font-size:12px;padding:10px;" : css;
            console.log("%c%s", css, s);
        }
    }

使用方法

<script src="console.js"></script>
<script>
    console.log("原始颜色");
    console.warn("警告颜色");
    console.error("报错颜色");
    sq.log("你看看这是什么颜色");
    sq.green("我是什么颜色的？");
    sq.violet("我又是什么颜色的？")
</script>

打开控制台看看原始效果和自己设定的效果吧