console.log输出五彩斑斓的颜色

console.log 最经常使用它在控制台输出信息然后进行代码调试,会发现输出信息的颜色永远是黑色。本文教学如何用 console.log在控制台输出具有五彩斑斓颜色的信息。

单色输出

javascript 复制代码
console.log('\x1B[31m红色\x1B[34m 蓝色')
javascript 复制代码
console.log('%c字符:', 'color:red', type)
javascript 复制代码
console.log('%c当前环境:' + type, 'color:blue')

多色输出

javascript 复制代码
console.log('%c123%c456', 'color: blue', 'color: green')
console.log.apply(void 0, ['%c123%c456', 'color: blue', 'color: green'])

背景输出

javascript 复制代码
console.log('\x1b[43m背景')

背景+颜色输出

javascript 复制代码
console.log('%c hello world ',
      'background: black; color: red')

背景+颜色+样式输出

javascript 复制代码
console.log('%c 输出 %c 大大 a %c 颜色', 'color:red;', 'font-size:30px;', 'color:blue;background:yellow;')

其他输出

warn输出:

javascript 复制代码
console.warn('hello world')

error输出:

javascript 复制代码
console.error('hello world')

body输出:

javascript 复制代码
console.log('%o', document.body)
相关推荐
LaoZhangAI2 分钟前
Google Gemini AI图片编辑完全指南:50+中英对照提示词与批量处理教程(2025年9月)
前端·后端
2301_821046522 分钟前
Python的深度学习
开发语言·javascript·ecmascript
用户11481867894846 分钟前
从零搭建 Vue3 + Nest.js 实时通信项目:4 种方案(短轮询 / 长轮询 / SSE/WebSocket)
前端·后端
LaoZhangAI6 分钟前
Google Gemini Nano与Banana AI完整部署指南:2025年轻量级AI解决方案
前端·后端
用户114818678948411 分钟前
基于 Webpack Module Federation 的 Vue 微前端实践
前端
怪可爱的地球人12 分钟前
Pinia状态管理有哪些常用API?
前端
小高00712 分钟前
🤔函数柯里化:化繁为简的艺术与实践
前端·javascript·面试
却尘15 分钟前
React useMemo 依赖陷阱:组件重挂载,状态无限复原
前端·javascript·react.js
Asort19 分钟前
JavaScript 从零开始(三):浏览器控制台与VS Code协同工作环境搭建详解
前端·javascript
跟橙姐学代码20 分钟前
自动化邮件发送的终极秘籍:Python库smtplib与email的完整玩法
前端·python·ipython