console.log()花样输出/屏蔽输出（胶囊样式、彩色文字、图片等）
在开发的环境下，经常需要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即可
文章评论