方法一
const _consoleLog = window.console.logwindow.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)