lena和shane,家庭日志,xulavigne,Lena&Shane

如何实现

使用 console.log 在浏览器开发者工具控制台中输出带样式的调试文本

2017-05-09 Shane Jhu

在百度首页启动浏览器开发者工具时,发现网页中使用 console.log() 输出了一段招聘信息,不得不说这种发布方式很有创意而且更有针对性。


百度首页的招聘,console.log


该代码中使用了颜色样式,但这种样式在 IE 和 Edge 中是无效的,会将所有参数当做普通字符一并输出。

本文就介绍 console.log() 输出带颜色格式的写法,附带判断浏览器类型。


/*检测浏览器类型*/
function uaMatch() {
    var userAgent = navigator.userAgent,
            rEdge = /(edge)\/([\w.]+)/,
            rMsie = /(msie\s|trident.*rv:)([\w.]+)/,
            rFirefox = /(firefox)\/([\w.]+)/,
            rOpera = /(opera).+version\/([\w.]+)/,
            rChrome = /(chrome)\/([\w.]+)/,
            rSafari = /version\/([\w.]+).*(safari)/;
    var ua = userAgent.toLowerCase();

    var match = rEdge.exec(ua);
    if (match != null) {
        return { browser: "EDGE", version: match[2] || "0" };
    }
    var match = rMsie.exec(ua);
    if (match != null) {
        return { browser: "IE", version: match[2] || "0" };
    }
    var match = rFirefox.exec(ua);
    if (match != null) {
        return { browser: match[1] || "", version: match[2] || "0" };
    }
    var match = rOpera.exec(ua);
    if (match != null) {
        return { browser: match[1] || "", version: match[2] || "0" };
    }
    var match = rChrome.exec(ua);
    if (match != null) {
        return { browser: match[1] || "", version: match[2] || "0" };
    }
    var match = rSafari.exec(ua);
    if (match != null) {
        return { browser: match[2] || "", version: match[1] || "0" };
    }
    if (match != null) {
        return { browser: "", version: "0" };
    }
}

try{
    var browser = uaMatch().browser;
    
    if(browser.toUpperCase() == "IE" || browser.toUpperCase() == "EDGE"){
      window.console&&window.console.log&&(
        console.log("【Lena ♥ Shane】"),
        console.log("逆风的方向\n更适合飞翔"),
        console.log("http://www.lenashane.com/")
      )
    } else {
      window.console&&window.console.log&&(
        console.log("%c【Lena %c♥ %cShane】","color:black","color:pink","color:black"),
        console.log("%c逆风的方向\n更适合飞翔","color:#1d6402"),
        console.log("%chttp://www.lenashane.com/","color:red")
      )
    }
}catch(e){}


Chrome中的效果:

Chrome,console.log


Microsoft Edge中的效果:

Edge,console.log


本文由lenashane.com原创,转载请注明出处:查看原文

如果觉得文章还不错,请点个赞吧

7月 21 2022
宽恕不会改变过去,但是却可以拓展未来。

保罗·波希 (Paul Boese 美国商人、作家)