@@ -6,9 +6,9 @@ date: 2013-03-10
6
6
modifiedOn : 2013-12-03
7
7
---
8
8
9
- ` console ` 对象是JavaScript的原生对象,它有点像Unix系统的标准输出 ` stdout ` 和标准错误` stderr ` ,可以输出各种信息到控制台,并且还提供了很多额外的有用方法 。
9
+ ` console ` 对象是 JavaScript 的原生对象,它有点像 Unix 系统的标准输出 ` stdout ` 和标准错误` stderr ` ,可以输出各种信息到控制台,并且还提供了很多有用的辅助方法 。
10
10
11
- 它的常见用途有两个 。
11
+ ` console ` 的常见用途有两个 。
12
12
13
13
- 调试程序,显示网页代码运行时的错误信息。
14
14
- 提供了一个命令行接口,用来与网页代码互动。
@@ -17,31 +17,31 @@ modifiedOn: 2013-12-03
17
17
18
18
` console ` 对象的浏览器实现,包含在浏览器自带的开发工具之中。以Chrome浏览器的“开发者工具”(Developer Tools)为例,可以使用下面三种方法的一种打开它。
19
19
20
- 1 . 按F12或者 ` Control + Shift + i ` (PC平台)/ ` Alt + Command + i ` (Mac平台)。
20
+ 1 . 按 F12 或者 ` Control + Shift + i ` (PC平台)/ ` Alt + Command + i ` (Mac平台)。
21
21
2 . 在菜单中选择“工具/开发者工具”。
22
22
3 . 在一个页面元素上,打开右键菜单,选择其中的“Inspect Element”。
23
23
24
24
打开“开发者工具”以后,可以在顶端看到,有多个面板可供选择,主要如下。
25
25
26
26
- ** Elements** :查看网页的HTML源码和CSS代码。
27
27
- ** Resources** :查看网页加载的各种资源文件(比如代码文件、字体文件、css文件等),以及在硬盘上创建的各种内容(比如本地缓存、Cookie、Local Storage等)。
28
- - ** Network** :查看网页的HTTP通信情况 。
28
+ - ** Network** :查看网页的 HTTP 通信情况 。
29
29
- ** Sources** :查看网页加载的所有源码。
30
30
- ** Timeline** :查看各种网页行为随时间变化的情况。
31
- - ** Profiles ** :查看网页的性能情况,比如CPU和内存消耗 。
32
- - ** Console** :用来运行JavaScript命令 。
31
+ - ** Performance ** :查看网页的性能情况,比如 CPU 和内存消耗 。
32
+ - ** Console** :用来运行 JavaScript 命令 。
33
33
34
34
这些面板都有各自的用途,以下只介绍` Console ` 面板(又称为控制台)。
35
35
36
36
` Console ` 面板基本上就是一个命令行窗口,你可以在提示符下,键入各种命令。
37
37
38
- ## console对象的方法
38
+ ## console 对象的方法
39
39
40
40
` console ` 对象提供的各种方法,用来与控制台窗口互动。
41
41
42
- ### log(),info(),debug()
42
+ ### console. log(),console. info(),console. debug()
43
43
44
- ` console.log ` 方法用于在console窗口输出信息 。它可以接受多个参数,将它们的结果连接起来输出。
44
+ ` console.log ` 方法用于在控制台输出信息 。它可以接受多个参数,将它们的结果连接起来输出。
45
45
46
46
``` javascript
47
47
console .log (' Hello World' )
@@ -138,7 +138,7 @@ console.log("出错了!");
138
138
139
139
上面代码表示,使用自定义的` console.log ` 方法,可以在显示结果添加当前时间。
140
140
141
- ### warn(),error()
141
+ ### console. warn(),console. error()
142
142
143
143
` warn ` 方法和` error ` 方法也是在控制台输出信息,它们与` log ` 方法的不同之处在于,` warn ` 方法输出信息时,在最前面加一个黄色三角,表示警告;` error ` 方法输出信息时,在最前面加一个红色的叉,表示出错,同时会显示错误发生的堆栈。其他方面都一样。
144
144
@@ -152,7 +152,7 @@ console.warn('Warning! Too few nodes (%d)', document.childNodes.length)
152
152
153
153
可以这样理解,` log ` 方法是写入标准输出(` stdout ` ),` warn ` 方法和` error ` 方法是写入标准错误(` stderr ` )。
154
154
155
- ### table()
155
+ ### console. table()
156
156
157
157
对于某些复合类型的数据,` console.table ` 方法可以将其转为表格显示。
158
158
@@ -192,7 +192,7 @@ console.table(languages);
192
192
csharp|"C#"|"object-oriented"
193
193
fsharp|"F#"|"functional"
194
194
195
- ### count()
195
+ ### console. count()
196
196
197
197
` count ` 方法用于计数,输出它被调用了多少次。
198
198
@@ -240,7 +240,7 @@ greet('bob')
240
240
241
241
上面代码根据参数的不同,显示` bob ` 执行了两次,` alice ` 执行了一次。
242
242
243
- ### dir(),dirxml()
243
+ ### console. dir(),console. dirxml()
244
244
245
245
` dir ` 方法用来对一个对象进行检查(inspect),并以易于阅读和打印的格式显示。
246
246
@@ -257,7 +257,7 @@ console.dir({f1: 'foo', f2: 'bar'})
257
257
258
258
上面代码显示` dir ` 方法的输出结果,比` log ` 方法更易读,信息也更丰富。
259
259
260
- 该方法对于输出DOM对象非常有用,因为会显示DOM对象的所有属性 。
260
+ 该方法对于输出 DOM 对象非常有用,因为会显示 DOM 对象的所有属性 。
261
261
262
262
``` javascript
263
263
console .dir (document .body )
@@ -269,27 +269,38 @@ Node 环境之中,还可以指定以代码高亮的形式输出。
269
269
console .dir (obj, {colors: true })
270
270
```
271
271
272
- ` dirxml ` 方法主要用于以目录树的形式,显示DOM节点 。
272
+ ` dirxml ` 方法主要用于以目录树的形式,显示 DOM 节点 。
273
273
274
274
``` javascript
275
275
console .dirxml (document .body )
276
276
```
277
277
278
- 如果参数不是DOM节点,而是普通的JavaScript对象 ,` console.dirxml ` 等同于` console.dir ` 。
278
+ 如果参数不是 DOM 节点,而是普通的 JavaScript 对象 ,` console.dirxml ` 等同于` console.dir ` 。
279
279
280
280
``` javascript
281
281
console .dirxml ([1 , 2 , 3 ])
282
282
// 等同于
283
283
console .dir ([1 , 2 , 3 ])
284
284
```
285
285
286
- ### assert()
286
+ ### console. assert()
287
287
288
- ` assert ` 方法接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为` false ` ,才会输出第二个参数,否则不会有任何结果。
288
+ ` assert ` 方法主要用于程序运行过程中,进行条件判断,如果不满足条件,就显示一个错误,但不会中断程序执行。这样就相当于提示用户,内部状态不正确。
289
+
290
+ 它接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为` false ` ,才会提示有错误,在控制台输出第二个参数,否则不会有任何结果。
289
291
290
292
``` javascript
291
- console .assert (true === false , ' 判断条件不成立' )
293
+ console .assert (false , ' 判断条件不成立' )
292
294
// Assertion failed: 判断条件不成立
295
+
296
+ // 相当于
297
+ try {
298
+ if (false ) {
299
+ throw new Error (' 判断条件不成立' );
300
+ }
301
+ } catch (e) {
302
+ console .error (e);
303
+ }
293
304
```
294
305
295
306
下面是另一个例子,判断子节点的个数是否大于等于500。
@@ -298,9 +309,9 @@ console.assert(true === false, '判断条件不成立')
298
309
console .assert (list .childNodes .length < 500 , ' 节点个数大于等于500' )
299
310
```
300
311
301
- 上面代码中,如果符合条件的节点小于500个,不会有任何输出;只有大于等于500时,才会显示指定文本 。
312
+ 上面代码中,如果符合条件的节点小于500个,不会有任何输出;只有大于等于500时,才会在控制台提示错误,并且显示指定文本 。
302
313
303
- ### time(),timeEnd()
314
+ ### console. time(),console. timeEnd()
304
315
305
316
这两个方法用于计时,可以算出一个操作所花费的准确时间。
306
317
@@ -318,7 +329,7 @@ console.timeEnd('Array initialize');
318
329
319
330
time方法表示计时开始,timeEnd方法表示计时结束。它们的参数是计时器的名称。调用timeEnd方法之后,console窗口会显示“计时器名称: 所耗费的时间”。
320
331
321
- ### profile(),profileEnd()
332
+ ### console. profile(),console. profileEnd()
322
333
323
334
` console.profile ` 方法用来新建一个性能测试器(profile),它的参数是性能测试器的名字。
324
335
@@ -336,7 +347,7 @@ console.profileEnd()
336
347
337
348
打开浏览器的开发者工具,在` profile ` 面板中,可以看到这个性能调试器的运行结果。
338
349
339
- ### group(),groupend(),groupCollapsed()
350
+ ### console. group(),console. groupend(),console. groupCollapsed()
340
351
341
352
` console.group ` 和` console.groupend ` 这两个方法用于将显示的信息分组。它只在输出大量信息时有用,分在一组的信息,可以用鼠标折叠/展开。
342
353
@@ -363,7 +374,7 @@ console.groupEnd();
363
374
364
375
上面代码只显示一行”Fetching Data“,点击后才会展开,显示其中包含的两行。
365
376
366
- ### trace(),clear()
377
+ ### console. trace(),console. clear()
367
378
368
379
` console.trace ` 方法显示当前执行的代码在堆栈中的调用路径。
369
380
@@ -376,7 +387,7 @@ console.trace()
376
387
// InjectedScript.evaluate
377
388
```
378
389
379
- ` console.clear ` 方法用于清除当前控制台的所有输出,将光标回置到第一行。
390
+ ` console.clear ` 方法用于清除当前控制台的所有输出,将光标回置到第一行。如果用户选中了控制台的“Preserve log”选项,网页脚本调用 ` console.log ` 将不起作用,但手动在控制台执行该方法依然有效。
380
391
381
392
## 命令行 API
382
393
0 commit comments