console.log

效果

方式一： 函数劫持

放主入口即可生效

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了一份

github.com/qq444716720…

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安装

更详细的参考

juejin.im/post/5c1e26…

juejin.im/post/5ce75f…

getemoji.com/

coolors.co/