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)
相关推荐
十五年专注C++开发2 分钟前
设计模式之单例模式(二): 心得体会
开发语言·c++·单例模式·设计模式
Hilaku4 分钟前
为什么我们用了 Vite 还是构建慢?——真正的优化在这几步
前端·javascript·vite
XI锐真的烦4 分钟前
横向对比npm和yarn
前端·npm·node.js
国家不保护废物5 分钟前
🧩 React 组件化进阶:像乐高大师一样搭建你的应用世界!
前端·react.js·ai编程
TimelessHaze12 分钟前
从"切图崽"到前端工程师:React 到底是个啥?🚀
前端·react.js·ai编程
站在风口的猪110816 分钟前
《前端面试题:CSS的display属性》
前端·css·html·css3·html5
wandongle17 分钟前
HTML 面试题错题总结与解析
前端·面试·html
Code_Geo19 分钟前
前端打包工具简单介绍
前端·打包工具