介绍
JS 原生默认是没有 Console 对象的, 它是浏览器提供的内置对象, 用于访问调试控制台. 不同浏览器的显示效果可能存在差异.
一般有两个用途:
-
显示网页代码运行时的错误信息, 即用于调试代码.
-
提供一个命令行接口, 用来与网页代码交互. 如一些网站的招聘信息.
查看 baidu bilibili 简书
Console 对象方法
- console.log()
// 也支持 C语言 printf() 风格的占位符, 但支持的种类较少, %s, %d/%i, %f, %o, %O, %c
console.log('%d年%d月%d日', 2022, 2, 22)
- console.debug() console.info() console.warn() console.error()
以上四个的使用方法和 log 一模一样, 只有输出颜色和图标不同.
// 在 chrome 和 safari 中分别尝试打印:
console.log('log')
console.debug('debug')
console.info('info')
console.warn('warn')
console.error('error')
- console.table() 将数组或对象转为表格显示, 但无法显示二级以上对象
// 数组
const arr = [{ num: '1' }, { num: '2' }, { arr1: [1, 2, 3] }]
console.table(arr)
// 对象
const obj = {
a: { num: '1' },
b: { num: '2' },
c: { num: '3', name: { firstName: 'mistrain' } }
}
console.table(obj)
// set 不行
const set = new Set([1, 1, 2, 2, 3])
console.table(set)
- console.time() console.timeEnd() 计时
// 计算一段代码的执行时间, 开始和结束的传参应该相同
console.time('time-test')
const arr = []
for (let i = 0; i < 10000; i++) {
arr.push({ key: i })
}
console.timeEnd('time-test')
- console.assert() 断言
接收两个参数, 第一个参数是表达式, 第二个是字符串, 当第一个参数为 false 才会输出第二个参数, 否则不会有任何输出.
-
console.clear() 清除
-
console.count() 用于计数, 输出被调用了多少次
;(function () {
for (var i = 0; i < 5; i++) {
console.count('count')
}
})()
- console.dir() 查看对象的详细内容, 如查看 dom 属性
// dom 结构
console.log(document.body)
// dom 对象的详细信息
console.dir(document.body)
// 还有一种方法
console.log('%o', document.body)
console.log('%O', document.body)
// 提问: 如何打印页面 html 对象的详细信息?
- console.group() console.groupEnd() console.groupCollapsed() 将显示的信息分组, 可以把信息折叠和展开.
console.group('第一层')
console.groupCollapsed('第二层1')
console.log('error')
console.error('error')
console.warn('error')
console.groupEnd('第二层1')
console.group('第二层2')
console.log('hello mistrain')
console.groupEnd('第二层2')
console.groupEnd('第一层')
- console.trace() 显示当前执行代码在堆栈中的调用路径
function b(arg) {
c(arg)
}
function c(arg) {
// console.trace()
d(arg)
}
function d(arg) {
console.trace('d 是如何被调用滴')
return arg
}
b('123')
- console.profile() console.profileEnd() 性能分析, 据资料说能够打印出一张性能分析的表, 但是我用 chrome 和 safari 都没有打印出来.
function Foo() {
for (let i = 0; i < 10; i++) {
funcA(1000)
}
funcB(10000)
}
function funcA(count) {
for (let i = 0; i < count; i++) {}
}
function funcB(count) {
for (let i = 0; i < count; i++) {}
}
console.profile('性能分析器一')
Foo()
console.profileEnd('性能分析器一')
> 简书网站的控制台是如何打印的?
// %c 占位符(这里不贴代码是因为 wiki 认为我恶意注入代码，保存不了）
// 图片, 用 css background, safari 可以打印出来, chrome 似乎不行
// 但 console 不支持 width 和 height, 可以用 font-size line-height 代替控制宽高
// B 站控制台字符画 => 字符画生成工具: Ascii generator
