效果
方式一: 函数劫持
放主入口即可生效
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)
复制代码
方式二: 修改vscode
的 vscode-js-console-utils
插件
我fork了一份
1.拉取代码
git clone https://github.com/qq444716720/vscode-js-console-utils.git
复制代码
2. cd
到项目目录安装依赖
npm i
复制代码
3.全局安装 vscode (打包工具)
vsce npm install vsce -g
复制代码
4.使用命令 vsce package
然后就会在代码当前的目录下打包生成一个vsix
vsce package
复制代码
5.安装
如果之前存在,要先卸载原有的javascript console utils插件,再从vscode安装
更详细的参考