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://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/5/26/16af31033bf16191~tplv-t2oaga2asx-image.image", "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/5/26/16af3100420b67a8~tplv-t2oaga2asx-image.image", "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/5/26/16af3105318f35d3~tplv-t2oaga2asx-image.image", "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/5/26/16af3106284daa01~tplv-t2oaga2asx-image.image"]
	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 插件搜索 javascript console utils

javascript console utils

方式三： 修改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.cn/post/684490…

juejin.cn/post/684490…

getemoji.com/

coolors.co/