在开发的环境下,经常需要console出一些debug信息,以方便开发,一般debug完后都会删除掉这些输出,但难免有时会粗心大意忘记删除。而在生产环境中,又不合适在浏览器的console中输出那么多的调试信息。因此,就需要屏蔽禁用console输出的信息。所以自己最近封装了一个console.log()输出工具,用于方便自己输出调试信息或者在生产环境屏蔽输出信息。
由上图可见,唯一的缺陷就是在控制台中不能显示真正调用处的行号了,显示的而是封装JS中的行号,对于这个问题,我暂时还不知道如何去解决,有想法的同学可以告诉我。
不多说,直接上代码,Html代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Console</title> </head> <body> F12打开控制台查看效果 <script src="util.log.js"></script> <script> console.capsule("App", "v2.5.6", "default"); console.capsule("App", "v2.5.6", "primary"); console.capsule("App", "v2.5.6", "success"); console.capsule("App", "v2.5.6", "warning"); console.capsule("App", "v2.5.6", "error"); console.default("default"); console.primary("primary"); console.success("success"); console.warning("warning"); console.error("error"); console.colorful("自定义样式", "color:#660cf2;font-size:2em;"); console.text3D("text3D"); console.rainbow("彩色文字"); //Chrome不生效 console.picture("console.gif", "112px 150px;"); let obj = { C1: { "名称": "小型汽车和C2、C3", "学费": 3800, }, C2: { "名称": "小型自动挡汽车", "学费": 3200, }, C3: { "名称": "低速载货汽车和C4", "学费": 2500, }, C4: { "名称": "三轮汽车", "学费": 1500, }, }; console.groupBy("机动车", obj); console.print(obj); console.dir(console); var char = "%c"; var s1 = "font-size:5em;color:red;font-weight:bolder;text-shadow:5px 5px 2px #fff, 5px 5px 2px #373E40, 5px 5px 5px #A2B4BA, 5px 5px 10px #82ABBA;" var s2 = "color:#495A80;text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 1px 0 #bbb;font-size:20px"; console.info(char + "哈哈", s1); console.info(char + "你知道,你在干什么?:-)\r\n6666\r\n", s2); </script> </body> </html>
JS文件代码:
/* * 描 述:Util.Log 控制台日志输出 */ ; !(function (console, isDebug) { "use strict"; /** * @description 获取样式的颜色值 * @param {String} type - 样式名称 [ primary | success | warning | error | text ] * @return {String} String - 返回颜色值 */ function typeColor(type) { type = type || ''; let color = ''; switch (type) { case 'primary': color = '#2d8cf0'; break; //蓝 case 'success': color = '#19be6b'; break; //绿 case 'warning': color = '#ff9900'; break; //黄 case 'error': color = '#ed4014'; break; //红 case 'text': color = '#000000'; break; //黑 default: color = '#515a6e'; break; //灰 } return color; } /** * @description 打印一个 [ title | text ] 胶囊型样式的信息 * @param {String} title - title text * @param {String} info - info text * @param {String} type - style */ console.capsule = function (title, info, type = 'primary', ...args) { //Js字符串拼接 ${ } console.log( `%c ${title} %c ${info} %c`, 'background:#35495E; padding: 1px; border-radius: 3px 0 0 3px; color: #fff;', `background:${typeColor(type)}; padding: 1px; border-radius: 0 3px 3px 0; color: #fff;`, 'background:transparent', ...args ); }; /** * @description 打印丰富多彩的文字 * @param {String} value - 打印值 * @param {String} style - style样式 */ console.colorful = function (value, style,...args) { console.log( `%c ${value || ""}`, `${style || ""}`, ...args ); }; /** * @description 打印 default 样式的文字 * @param {String} value - 打印值 */ console.default = function (value, ...args) { console.colorful(value, `color: ${typeColor("default")};`,...args); }; /** * @description 打印 primary 样式的文字 * @param {String} value - 打印值 */ console.primary = function (value, ...args) { console.colorful(value, `color: ${typeColor("primary")};`, ...args); }; /** * @description 打印 success 样式的文字 * @param {String} value - 打印值 */ console.success = function (value, ...args) { console.colorful(value, `color: ${typeColor("success")};`, ...args); }; /** * @description 打印 warning 样式的文字 * @param {String} value - 打印值 */ console.warning = function (value, ...args) { console.colorful(value, `color: ${typeColor("warning")};`, ...args); }; /** * @description 打印 error 样式的文字 * @param {String} value - 打印值 */ console.error = function (value, ...args) { console.colorful(value, `color: ${typeColor("error")};`, ...args); }; /** * @description 打印 3D 样式的文字 * @param {String} value - 打印值 */ console.text3D = function (value, ...args) { //let style = "font-size:5em;color:red;font-weight:bolder;text-shadow:5px 5px 2px #fff, 5px 5px 2px #373E40, 5px 5px 5px #A2B4BA, 5px 5px 10px #82ABBA;" let style = "color: #393D49;font-size:2.5em;font-weight:bolder;text-shadow: 0 1px 0 #fff,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.1),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);"; console.colorful(value, style, ...args); }; /** * @description 打印 彩色 样式的文字 * @param {String} value - 打印值 */ console.rainbow = function (value, ...args) { let style = 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;'; console.colorful(value, style, ...args); }; /** * @description 打印 图片 * @param {String} imgUrl - 图片路径 * @param {String} padding - padding值 */ console.picture = function (imgUrl, padding, ...args) { let style = `padding:${padding || "0px"};background:url('${imgUrl || ""}') no-repeat center;`; console.log( `%c `, `${style || ""}`, ...args ); }; /** * @description 打印 分组 console.group * @param {String} groupName - 组名 * @param {Array} obj - 对象 */ console.groupBy = function (groupName, obj, ...args) { obj = obj || {}; //#9E9E9E #03A9F4 #4CAF50 #6a6b6d let style = `color: #9E9E9E; font-weight: bold`; console.group(`${groupName}`); for (let key in obj) { console.log(`%c ${key} :`, `${style || ""}`, obj[key], ...args); } console.groupEnd(); }; /** * @description 打印 Object和Array等引用类型,打印的是该类型的值,而不是打印引用地址的值([object Object] 、[object Array]) */ console.print = function (...args) { try { let arr = []; arr.push(...args); arr.forEach((item, index) => { if (Object.prototype.toString.call(item) === '[object Object]' || Object.prototype.toString.call(item) === '[object Array]') { arr[index] = JSON.parse(JSON.stringify(item)); } }); console.log(...arr); } catch (e) { console.error(`logger error: ${e}`); } }; //是否调试模式,非调试模式不输出 isDebug = isDebug || false; if (!isDebug) { for (let key in console) { console[key] = function () { }; } return; } })(window.console, true); //不需要输出信息时,改为false即可
文章评论