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 插件搜索 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.im/post/5c1e26…

juejin.im/post/5ce75f…

getemoji.com/

coolors.co/