使用 console.log 在浏览器开发者工具控制台中输出带样式的调试文本
2017-05-09 Shane Jhu
在百度首页启动浏览器开发者工具时,发现网页中使用 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中的效果:
Microsoft Edge中的效果:
本文由lenashane.com原创,转载请注明出处:查看原文
如果觉得文章还不错,请点个赞吧