console.log()是web开发人员工作中的好朋友。但是你知道控制台包含的不仅仅是console.log()吗?这篇文章要讨论的就是JavaScript中的控制台。4 o- e! F+ [9 C- f4 c5 ^! d2 ^- H
简介
1 ^ K H9 h/ l; K5 C Web控制台是一个工具,主要用于记录与网页相关的信息,例如:网络请求、JavaScript安全错误、警告、CSS等。它使我们能够通过在网页内容中执行JavaScript表达式来与网页交互。
' i1 t p5 ^: L: ~( }( M9 _ 控制台的类型2 y }( b7 g( K" X; l
console.log() console.error() console.warn() console.clear() console.time() console.table() console.count() console.group()
2 ^5 P! C8 z% d4 d9 J+ d0 h+ r 1. console.log() 1 e. Z, @9 N5 v9 f# J
主要用于将输出信息打印到控制台。log()中可以放入任何类型,无论是强类型、数组、对象、还是布尔值等。
# z: y2 ^. F* s: Y, K* v! B4 V //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()
( U p1 ^4 m4 i- s
2. console.error()
3 H1 p1 D) V4 N9 N! e 此方法用于将错误消息记录到控制台。在测试代码时很有用。默认情况下,错误消息将突出显示为红色。9 ~) @/ |* O( K) L1 H6 |
// console.error() method
console.error('This is a sample Error')
$ f+ x' O8 C# B' `) N 3. console.warn()
; J% E) j( w Q 用于将警告消息记录到控制台。默认情况下,警告消息将突出显示为黄色。
) R( l7 c/ c, ^# u // console.warn() method
console.warn('This is a sample Warning')
8 ?, d# ~. ~/ C, j 4. console.clear()
% j$ w8 z* N* g! C0 b 用于清除控制台信息。清除控制台时,如果是基于Chromium的浏览器,将打印一个简单的叠加文本,如下面的截图所示“Console was cleared”,而在Firefox中,则不会返回任何消息。
- S J4 Y5 z5 B( E( g' @ // console.clear() method
console.clear()
8 K5 |3 V6 ]$ w, k& h. y 5. console.time()和console.timeEnd()
1 P! c( N/ ~0 i5 {0 m a0 s* {0 C 无论何时我们想知道一段代码或一个函数所需要花费的时间,都可以使用JavaScript控制台对象提供的time()和timeEnd()方法。关键是要有一个必须相同的标签,而里面的代码可以是任何东西(函数、对象、甚至直接console.log()都可以)。3 C% r# c4 @ D
// 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')
7 b/ V- p1 g7 `; n" W# {" Z& i
6. console.table()
/ x, R- l5 M" x3 J1 b7 L3 X% ] 这个方法允许我们在控制台中生成表格。输入数据必须是数组或显示为表格的对象。' ^/ f* }4 l7 U+ m) ?# c
// console.table() method
console.table({a:1, b:2, c:3, d:4, e:5})
! ^( b6 b$ _" Y! Z) V, b$ R( p 7. console.count()
' i0 M$ J% e- X! M# b7 i3 @ 这个方法在调用时会将数字(调用次数)写入到控制台。
. l: t9 L3 b6 T9 B, Q5 e // console.count() method
console.log('This is a sample count')
for(let i=0; i<10; i++){
console.count('This is iteration number', i)
}
8 L. W' ]4 A* T' T: m3 N* a1 v" S
8. console.group()和console.groupEnd()
# K; E- }. K! A* l 控制台对象的group()和groupEnd()方法允许我们将内容分组到单独的代码块中,并且这些代码块将缩进。和time()和timeEnd()一样,它们也接受值相同的标签。
( g0 ?( v3 q+ j# u1 S' p) S // 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')
" F% b1 M" O% H: |6 _% J) m2 e