浏览器控制台打印:Javascript 之 Console 对象

Console 对象提供对浏览器控制台的连接,是程序员们常用的调试工具之一
Console 对象有很多方法,除了常用的 console.log() 以外,还有一些比较实用的方法,现整理下来方便以后学习使用

console.log()

向控制台输出一条消息

语法

console.log(param1 [, param2, ..., paramN)
console.log('String: %s, Int: %d,Float: %f, Object: %o', str, ints, floats, obj)
console.log(`param的值为: ${param}`)

示例

let str = "Good morning!"
let num = 66
console.log("Hello world!")
console.log("%s,%d", str, num)
consoel.log(`num 的值为:${num}`)

// 打印结果
Hello world!
Good morning!,66
num 的值为:66

console.log() 的参数不仅可以是字符串,也可以是对象或者数组等

console.info()

用法和 console.log() 相同,只不过在部分浏览器的打印结果前多出一个‘i’图标

console.warn()

用法和 console.log() 相同,只不过在部分浏览器的打印结果前多出一个‘!’图标,消息背景变为淡橙色

console.error()

用法和 console.log() 相同,只不过在部分浏览器的打印结果前多出一个‘x’图标,消息背景变为淡红色

console.assert()

语法

console.assert(assertion, param1 [, param2, ..., paramN)
console.assert(assertion, `error message: ${str}`)

如果 assertion 为假,则打印一条错误消息,如果 assertion 为真,没有任何反应

示例

let b = 5 > 6
console.assert(b, "some error message")

// 打印
Assertion failed: some error message

console.clear()

清空控制台

console.count()

输出 count() 在某个地方被调用的次数,可接受一个可选参数 label

语法

console.count([label])

示例

function say() {
  console.count("child")
}
say()
say()
say()
console.count("parent")

// 打印
child: 1
child: 2
child: 3
parent: 1

console.group()

在控制台中新建一个打印分组,之后打印的消息都会缩进展示在该分组下

示例

> console.group()
▶ console.group
  > console.log("test message")
    test message
  > console.log("hello world")
    hello world

console.groupCollapsed()

console.group() 用法一样,不同之处在于 groupCollapsed 的打印结果会折叠起来,需要手动展开

console.groupEnd()

结束控制台打印分组

console.table()

把一个数组或对象用 table 形式打印出来

语法

console.table(data [, columns])

第二个参数为可选参数,指定要打印的列、

示例

console.table(["john", "tom", "leo"])

image

let obj = {name: 'john', age: 24}
console.table(obj)

image

function Person(name, age) {
  this.name = name
  this.age = age
}
var john = new Person("John", 16)
var jane = new Person("Jane", 17)
var emily = new Person("Emily", 18)
console.table([john, jane, emily], ["firstName"])

image

console.time()

启动一个计时器,来跟踪某个操作的占用时长,需要跟 console.timeEnd() 配合使用
接收一个参数,表示计时器的名字,如果省略则为 'default'

语法

console.time(timerName)

示例

function doSth () {
  for (i = 0; i < 10000; i++) {
    let temp = i * 10
  }
}
console.time('test')
doSth()
console.timeEnd('test')

// 打印
default: 1.6630859375ms

console.timeEnd()

结束某个计时器

【提示】更多控制台方法请参考 https://developer.mozilla.org/zh-CN/docs/Web/API/Console

除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1011.html
鄂ICP备17018604号-1  鄂公网安备42060702000030号