While reading the book, open the console page and see the following output:Go to source and find the following code

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"
})
Copy the code

Transformation transform

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"
    })
Copy the code

The following is an example:And then we can have fun using this useless but interesting code in our projects, right

The properties available for console.log %c syntax are as follows:

  • Background and its full written version.
  • Border and its full write version.
  • border-radius
  • box-decoration-break
  • box-shadow
  • The clear and float
  • color
  • cursor
  • display
  • Font and its full written version.
  • line-height
  • margin
  • Outline and full written version.
  • padding
  • Text-transform This type of text-* attribute
  • white-space
  • Word – spacing and word – break
  • writing-mode

Reference: MDN