在看簡(jiǎn)書(shū)的時(shí)候，打開(kāi)控制臺(tái)頁(yè)面，可以看到如下的輸出：

image.png

進(jìn)入source下找到如下代碼

var i = "#1475b2"
    , c = "#42c02e"
    , u = function (e) {
        var t = e.title
            , r = e.content
            , n = e.backgroundColor
            , a = ["%c ".concat(t, " %c ").concat(r, " "), "padding: 1px; border-radius: 3px 0 0 3px; color: #fff; background: ".concat("#606060", ";"), "padding: 1px; border-radius: 0 3px 3px 0; color: #fff; background: ".concat(n, ";")];
        return function () {
            var e;
            window.console && "function" === typeof window.console.log && (e = console).log.apply(e, arguments)
        }.apply(void 0, a)
    };

(function (e) {
    var t = e.title
        , r = e.content;
    u({
        title: t,
        content: r,
        backgroundColor: c
    })
})({
    title: "Environment",
    content: "production"
})

改造改造

var customizeConsole = function (e) {
        var t = e.title
            , r = e.content
            , n = e.backgroundColor
            , a = [`%c ${e.title} %c  ${e.content} `, `padding: 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060 ;`, `padding: 1px; border-radius: 0 3px 3px 0; color: #fff; background: ${e.backgroundColor} ;`];
        return function () {
            var e;
            window.console && "function" === typeof window.console.log && (e = console).log.apply(e, arguments)
        }.apply(void 0, a)
    };


    customizeConsole({
        title: "Environment",
        content: "production",
        backgroundColor: "#42c02e"
    })

示例如下：

image.png

然后我們就可以愉快的在項(xiàng)目中使用這些并沒(méi)有什么卵用但有意思的代碼了
關(guān)于console.log %c 語(yǔ)法可用的屬性如下：

• background 與其全寫(xiě)版本。
• border 與其全寫(xiě)版本。
• border-radius
• box-decoration-break
• box-shadow
• clear 和 float
• color
• cursor
• display
• font 與其全寫(xiě)版本。
• line-height
• margin
• outline 與其全寫(xiě)版本。
• padding
• text-transform 這類 text-* 屬性
• white-space
• word-spacing 和 word-break
• writing-mode
  參考資料：MDN