方法一

  1. const _consoleLog = window.console.log
  2. window.console.log = function () {
  3. const iconList = ['🦑', '🦐', '🦀', '🦞', '🍏', '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒', '🍑', '🥭', '🍍', '🥥', '🥝', '🍅', '🍆', '🥑', '🥦', '🥬', '🥒', '🌶', '🌽', '🥕', '🥔', '🥐', '🍠', '🥯', '🍞', '🥖', '🥨', '🧀', '🥚', '🥞', '🥓', '🥩', '🍗', '🍖', '🦴', '🌭', '🍔', '🍟', '🍕', '🥪', '🌮', '🌯', '🥘', '🥗', '🍝', '🥫', '🥘', '🍜', '🍲', '🍝', '🍛', '🍣', '🍱', '🥟', '🍤', '🍚', '🍥', '🥠', '🥮', '🍢', '🍡', '🍧', '🍨', '🍦', '🥧', '🧁', '🍰', '🎂', '🍮', '🍭', '🍬', '🍫', '🍿', '🍩', '🍪', '🌰', '🥜', '🍯', '🥛', '🍼️', '🍵', '🥤', '🍶', '🍺', '🍻', '🍷', '🥃', '🍸', '🍹', '🍾', '🥡', '🧂']
  4. const colorList = ["#42b983", "#33A5FF", "#B03734", "#2EAFB0", "#6EC1C2", "#ED9EC7", "#FCA650", "#3F7CFF", "#93C0A4", "#EA7E5C", "#F5CE50", "#465975", "#FFDD4D", "#7F2B82", "#4b4b4b", "#E41A6A"];
  5. 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"];
  6. const iconIndex = Math.floor(Math.random() * iconList.length);
  7. const colorIndex = Math.floor(Math.random() * colorList.length);
  8. const imageIndex = Math.floor(Math.random() * imageList.length);
  9. const style = `font-size:20pt;background-image: url(${imageList[imageIndex]});background-size: 100% 100%;color: ${colorList[colorIndex]};`;
  10. // const style = `font-size:20pt;background-color: ${colorList[colorIndex]};color:#fff;`;
  11. if (arguments.length === 1 && typeof arguments[0] != "object") {
  12. const msg = `%c ${iconList[iconIndex]} ${arguments[0]} `;
  13. _consoleLog(msg, style);
  14. } else if (arguments.length === 2 && typeof arguments[0] === "string" && typeof arguments[1] === "object") {
  15. const msg = `%c ${iconList[iconIndex]} ${arguments[0]} `;
  16. _consoleLog(msg, style, arguments[1]);
  17. } else if (arguments.length === 2 && typeof arguments[0] === "string" && typeof arguments[1] != "object") {
  18. const msg = `%c ${iconList[iconIndex]} ${arguments[0]} ${arguments[1]} `;
  19. _consoleLog(msg, style);
  20. } else {
  21. // _consoleLog.apply(this, arguments)
  22. // JSON.stringify(arguments[0], null, 4)
  23. const msg = `%c ${iconList[iconIndex]} data: `;
  24. _consoleLog(msg, style, ...arguments);
  25. }
  26. }
  27. // 测试
  28. console.log("hello,world");
  29. console.log(browser);
  30. let student = {
  31. name: 'xiaohong',
  32. id: 1,
  33. sex: '女'
  34. }
  35. console.log("hello,world", student, '12');
  36. console.log("hello,world", '12');
  37. console.log("hello,world", 1);
  38. console.log('student: ', student);

方法二

  1. window.log = console.log = (function (originFunc) {
  2. return function () {
  3. if (window.consoleParams && window.consoleParams.hideLog) return // 生产环境不显示log
  4. let showType;
  5. let tempStr;
  6. let resArgs;
  7. let backgroundUrl;
  8. let backgroundUrlArr = [
  9. 'http://img.soogif.com/oTaaBm2f12ro2oHYt8MXO7ucTZ9LFDff.gif_s400x0',
  10. 'http://i687.photobucket.com/albums/vv237/4-one/4-1/ICON-4/nhj-ks-114.gif',
  11. 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2431180542,3208247057&fm=21&gp=0.jpg',
  12. 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1389931060,999032458&fm=21&gp=0.jpg',
  13. 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2349925870,4158861286&fm=21&gp=0.jpg',
  14. 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1161084296,912592514&fm=21&gp=0.jpg',
  15. 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=568429576,1662716019&fm=21&gp=0.jpg',
  16. 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2891158369,689005317&fm=21&gp=0.jpg',
  17. 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=523690750,3468977024&fm=21&gp=0.jpg',
  18. 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1674189186,3858474740&fm=21&gp=0.jpg'
  19. ];
  20. let params = Array.prototype.slice.call(arguments); // 保存arguments数组,有push方法
  21. let color = window.consoleParams && window.consoleParams.color || '#58baff';
  22. let fontSize = window.consoleParams && window.consoleParams.fontSize || '12px';
  23. if (window.consoleParams && window.consoleParams.url) {
  24. backgroundUrl = window.consoleParams && window.consoleParams.url;
  25. } else {
  26. backgroundUrl = backgroundUrlArr[parseInt(Math.floor(Math.random() * 10))];
  27. }
  28. let backgroundHeightSize = window.consoleParams && window.consoleParams.height || 50
  29. 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'
  30. let args = ['%c', iconStyle]
  31. if (!params.length) {
  32. args[0] = '%c ' + '(请输入要打印的值...)'
  33. resArgs = args
  34. } else {
  35. for (let p of params) {
  36. if (typeof p !== 'string' && typeof p !== 'number') {
  37. showType = 2
  38. break
  39. }
  40. showType = 1
  41. }
  42. if (showType === 1) {
  43. for (let i = 0; i < params.length; i++) {
  44. if (typeof params[i] === 'string') {
  45. params[i] = '"' + params[i] + '"'
  46. }
  47. }
  48. tempStr = params.join(' ')
  49. args[0] = '%c ' + tempStr
  50. resArgs = args
  51. } else {
  52. resArgs = args.concat(params)
  53. }
  54. }
  55. originFunc.apply(console, resArgs)
  56. }
  57. })(console.log)