方法一
const _consoleLog = window.console.log
window.console.log = function () {
const iconList = ['🦑', '🦐', '🦀', '🦞', '🍏', '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒', '🍑', '🥭', '🍍', '🥥', '🥝', '🍅', '🍆', '🥑', '🥦', '🥬', '🥒', '🌶', '🌽', '🥕', '🥔', '🥐', '🍠', '🥯', '🍞', '🥖', '🥨', '🧀', '🥚', '🥞', '🥓', '🥩', '🍗', '🍖', '🦴', '🌭', '🍔', '🍟', '🍕', '🥪', '🌮', '🌯', '🥘', '🥗', '🍝', '🥫', '🥘', '🍜', '🍲', '🍝', '🍛', '🍣', '🍱', '🥟', '🍤', '🍚', '🍥', '🥠', '🥮', '🍢', '🍡', '🍧', '🍨', '🍦', '🥧', '🧁', '🍰', '🎂', '🍮', '🍭', '🍬', '🍫', '🍿', '🍩', '🍪', '🌰', '🥜', '🍯', '🥛', '🍼️', '🍵', '🥤', '🍶', '🍺', '🍻', '🍷', '🥃', '🍸', '🍹', '🍾', '🥡', '🧂']
const colorList = ["#42b983", "#33A5FF", "#B03734", "#2EAFB0", "#6EC1C2", "#ED9EC7", "#FCA650", "#3F7CFF", "#93C0A4", "#EA7E5C", "#F5CE50", "#465975", "#FFDD4D", "#7F2B82", "#4b4b4b", "#E41A6A"];
const imageList = ["https://user-gold-cdn.xitu.io/2019/5/26/16af31033bf16191?w=750&h=190&f=png&s=93956", "https://user-gold-cdn.xitu.io/2019/5/26/16af3100420b67a8?w=784&h=198&f=png&s=103447", "https://user-gold-cdn.xitu.io/2019/5/26/16af3105318f35d3?w=754&h=190&f=png&s=101303", "https://user-gold-cdn.xitu.io/2019/5/26/16af3106284daa01?w=736&h=186&f=png&s=91845"];
const iconIndex = Math.floor(Math.random() * iconList.length);
const colorIndex = Math.floor(Math.random() * colorList.length);
const imageIndex = Math.floor(Math.random() * imageList.length);
const style = `font-size:20pt;background-image: url(${imageList[imageIndex]});background-size: 100% 100%;color: ${colorList[colorIndex]};`;
// const style = `font-size:20pt;background-color: ${colorList[colorIndex]};color:#fff;`;
if (arguments.length === 1 && typeof arguments[0] != "object") {
const msg = `%c ${iconList[iconIndex]} ${arguments[0]} `;
_consoleLog(msg, style);
} else if (arguments.length === 2 && typeof arguments[0] === "string" && typeof arguments[1] === "object") {
const msg = `%c ${iconList[iconIndex]} ${arguments[0]} `;
_consoleLog(msg, style, arguments[1]);
} else if (arguments.length === 2 && typeof arguments[0] === "string" && typeof arguments[1] != "object") {
const msg = `%c ${iconList[iconIndex]} ${arguments[0]} ${arguments[1]} `;
_consoleLog(msg, style);
} else {
// _consoleLog.apply(this, arguments)
// JSON.stringify(arguments[0], null, 4)
const msg = `%c ${iconList[iconIndex]} data: `;
_consoleLog(msg, style, ...arguments);
}
}
// 测试
console.log("hello,world");
console.log(browser);
let student = {
name: 'xiaohong',
id: 1,
sex: '女'
}
console.log("hello,world", student, '12');
console.log("hello,world", '12');
console.log("hello,world", 1);
console.log('student: ', student);
方法二
window.log = console.log = (function (originFunc) {
return function () {
if (window.consoleParams && window.consoleParams.hideLog) return // 生产环境不显示log
let showType;
let tempStr;
let resArgs;
let backgroundUrl;
let backgroundUrlArr = [
'http://img.soogif.com/oTaaBm2f12ro2oHYt8MXO7ucTZ9LFDff.gif_s400x0',
'http://i687.photobucket.com/albums/vv237/4-one/4-1/ICON-4/nhj-ks-114.gif',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2431180542,3208247057&fm=21&gp=0.jpg',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1389931060,999032458&fm=21&gp=0.jpg',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2349925870,4158861286&fm=21&gp=0.jpg',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1161084296,912592514&fm=21&gp=0.jpg',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=568429576,1662716019&fm=21&gp=0.jpg',
'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2891158369,689005317&fm=21&gp=0.jpg',
'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=523690750,3468977024&fm=21&gp=0.jpg',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1674189186,3858474740&fm=21&gp=0.jpg'
];
let params = Array.prototype.slice.call(arguments); // 保存arguments数组,有push方法
let color = window.consoleParams && window.consoleParams.color || '#58baff';
let fontSize = window.consoleParams && window.consoleParams.fontSize || '12px';
if (window.consoleParams && window.consoleParams.url) {
backgroundUrl = window.consoleParams && window.consoleParams.url;
} else {
backgroundUrl = backgroundUrlArr[parseInt(Math.floor(Math.random() * 10))];
}
let backgroundHeightSize = window.consoleParams && window.consoleParams.height || 50
let iconStyle = 'line-height: ' + backgroundHeightSize + 'px; padding: ' + backgroundHeightSize / 2 + 'px 10px ' + backgroundHeightSize / 2 + 'px ' + backgroundHeightSize + 'px; color: ' + color + '; font-size: ' + fontSize + '; background: url(' + backgroundUrl + ') no-repeat left center; background-size: auto ' + backgroundHeightSize + 'px'
let args = ['%c', iconStyle]
if (!params.length) {
args[0] = '%c ' + '(请输入要打印的值...)'
resArgs = args
} else {
for (let p of params) {
if (typeof p !== 'string' && typeof p !== 'number') {
showType = 2
break
}
showType = 1
}
if (showType === 1) {
for (let i = 0; i < params.length; i++) {
if (typeof params[i] === 'string') {
params[i] = '"' + params[i] + '"'
}
}
tempStr = params.join(' ')
args[0] = '%c ' + tempStr
resArgs = args
} else {
resArgs = args.concat(params)
}
}
originFunc.apply(console, resArgs)
}
})(console.log)