console.log()是web开发人员工作中的好朋友。但是你知道控制台包含的不仅仅是console.log()吗?这篇文章要讨论的就是JavaScript中的控制台。
3 w# E2 w% v% j. | 简介
4 G2 _9 W. H1 ]2 o1 a8 _# u Web控制台是一个工具,主要用于记录与网页相关的信息,例如:网络请求、JavaScript安全错误、警告、CSS等。它使我们能够通过在网页内容中执行JavaScript表达式来与网页交互。
, `- M# V) a* l& `8 b 控制台的类型 y% ?( V5 |( p, i4 ]9 t1 V* ~$ \
console.log() console.error() console.warn() console.clear() console.time() console.table() console.count() console.group()
8 a) n" f) x+ s4 Y, E- k 1. console.log()
8 ^$ c9 B0 @6 A; W0 g5 [/ t 主要用于将输出信息打印到控制台。log()中可以放入任何类型,无论是强类型、数组、对象、还是布尔值等。* g6 S+ @$ }* U- }- L5 n
//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()
. X' C: q1 s- M8 X 2. console.error() 3 `. @" Z7 s# \4 g! j1 {7 z
此方法用于将错误消息记录到控制台。在测试代码时很有用。默认情况下,错误消息将突出显示为红色。9 E5 H9 a# B1 z7 x V
// console.error() method
console.error('This is a sample Error')
. r1 A7 A2 b4 _6 U: [. g 3. console.warn() ' C1 e4 C+ F# q$ A! }( Y
用于将警告消息记录到控制台。默认情况下,警告消息将突出显示为黄色。. j9 g. r+ i j$ B
// console.warn() method
console.warn('This is a sample Warning')
6 M/ w0 q2 |9 | H( p/ {$ h
4. console.clear()
) i$ ^( M" S" T+ O 用于清除控制台信息。清除控制台时,如果是基于Chromium的浏览器,将打印一个简单的叠加文本,如下面的截图所示“Console was cleared”,而在Firefox中,则不会返回任何消息。! h& F0 v- U4 r% |0 z
// console.clear() method
console.clear()
- _0 i2 q, l; Y; a& z
5. console.time()和console.timeEnd() % y' ?/ A! |8 C+ \9 G7 n& g+ m
无论何时我们想知道一段代码或一个函数所需要花费的时间,都可以使用JavaScript控制台对象提供的time()和timeEnd()方法。关键是要有一个必须相同的标签,而里面的代码可以是任何东西(函数、对象、甚至直接console.log()都可以)。1 F* g% F& C6 W1 Q$ r4 K* r
// 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 a' H7 Q+ K7 g7 e3 |4 e3 c 6. console.table()
7 h4 g: M# y" n8 w1 B& M; C9 m+ M 这个方法允许我们在控制台中生成表格。输入数据必须是数组或显示为表格的对象。
" z( A7 z+ J3 J2 r" R // console.table() method
console.table({a:1, b:2, c:3, d:4, e:5})
. m1 t; L5 n8 f2 P) r, }- t/ i4 |
7. console.count() % e; [; \* w; k B! @# c
这个方法在调用时会将数字(调用次数)写入到控制台。
) K; g# G( a l' d3 ?3 @+ 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)
}
% q$ A1 H' p6 {6 g 8. console.group()和console.groupEnd()
5 C d: @, C) i, V% p8 E$ \( ] 控制台对象的group()和groupEnd()方法允许我们将内容分组到单独的代码块中,并且这些代码块将缩进。和time()和timeEnd()一样,它们也接受值相同的标签。
1 q h I8 U& g, r // 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')
+ r" R, q# e" E& X7 C