console.log()是web开发人员工作中的好朋友。但是你知道控制台包含的不仅仅是console.log()吗?这篇文章要讨论的就是JavaScript中的控制台。
0 }* b3 a8 x2 r2 k) N; J2 j 简介
4 i: [& A5 b* |! U- c1 h( B Web控制台是一个工具,主要用于记录与网页相关的信息,例如:网络请求、JavaScript安全错误、警告、CSS等。它使我们能够通过在网页内容中执行JavaScript表达式来与网页交互。5 n0 j) E: o2 Z6 o' L/ @
控制台的类型
9 j5 l2 d. o. e0 a6 I console.log() console.error() console.warn() console.clear() console.time() console.table() console.count() console.group()
8 R% U7 G) \7 F 1. console.log()
0 s. }% A/ }" y; b; v 主要用于将输出信息打印到控制台。log()中可以放入任何类型,无论是强类型、数组、对象、还是布尔值等。, ]% f1 `9 r$ E+ p% q8 Y8 c* Q
//console.log() method
console.log('string')
console.log(800)
console.log(true)
console.log(null)
console.log(undefined)
console.log({a:1, b:2}) // object inside log()
console.log([1,2,3,4]) // array inside log()
- p. K7 L) L! ] 2. console.error() }6 k8 M# Q% U) j7 V. \
此方法用于将错误消息记录到控制台。在测试代码时很有用。默认情况下,错误消息将突出显示为红色。
/ H/ r' H# R# m0 W: L! I2 X // console.error() method
console.error('This is a sample Error')
8 w) {8 U; C5 Q! C1 U 3. console.warn()
% i4 G6 \0 u# I* @1 K& t7 j 用于将警告消息记录到控制台。默认情况下,警告消息将突出显示为黄色。
- R3 ^4 @) k3 ]7 ^ // console.warn() method
console.warn('This is a sample Warning')
$ g! x7 a8 \2 h
4. console.clear()
+ j: G4 ~6 @) r0 D 用于清除控制台信息。清除控制台时,如果是基于Chromium的浏览器,将打印一个简单的叠加文本,如下面的截图所示“Console was cleared”,而在Firefox中,则不会返回任何消息。
$ X2 m7 W5 ^" {7 a+ H // console.clear() method
console.clear()
+ ]5 N* D# y+ D# x4 ?6 A2 v
5. console.time()和console.timeEnd() 0 ]& z+ N" w5 R0 ?7 i
无论何时我们想知道一段代码或一个函数所需要花费的时间,都可以使用JavaScript控制台对象提供的time()和timeEnd()方法。关键是要有一个必须相同的标签,而里面的代码可以是任何东西(函数、对象、甚至直接console.log()都可以)。
4 ?4 _; x9 A+ f // console.time() and console.timeEnd() method
// console.time() method
console.time("Let's see time console")
let time1 = function(){
console.log('time1 function is running')
}
let time2 = function(){
console.log('time2 function is running')
}
time1()
time2()
// console.timeEnd() method
console.timeEnd('Time Taken')
/ M& N7 t$ W1 N4 Z3 ]1 w# ?( q" ]
6. console.table()
) o) A% \3 r, k$ J) _/ ? 这个方法允许我们在控制台中生成表格。输入数据必须是数组或显示为表格的对象。, @5 ~8 p0 u n( s0 E1 i; L
// console.table() method
console.table({a:1, b:2, c:3, d:4, e:5})
, h/ u' e. E+ g+ T! g, Z; ?; p3 P
7. console.count()
8 L9 f& _, L6 w8 g 这个方法在调用时会将数字(调用次数)写入到控制台。
* \- `0 z S- ]: i$ C // console.count() method
console.log('This is a sample count')
for(let i=0; i<10; i++){
console.count('This is iteration number', i)
}
/ y/ K* r- b% K$ q. d3 v% u
8. console.group()和console.groupEnd()
# d1 I0 |+ J1 C/ M) ?' Z- m 控制台对象的group()和groupEnd()方法允许我们将内容分组到单独的代码块中,并且这些代码块将缩进。和time()和timeEnd()一样,它们也接受值相同的标签。
/ {& f5 B' J/ s# m7 A // console.group() and console.groupEnd() method
// console.group() method
console.group('This is a sample group')
console.log('This is a sample group log')
console.warn('This is a sample group warning')
console.error('This is a sample group error')
// console.groupEnd() method
console.groupEnd('This is a sample group')
console.log('This is a new section')
7 e. N# h& l. w" g6 |+ ^