Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit d58eb56

Browse files
committed
docs(stdlib): edit console
1 parent 425a536 commit d58eb56

File tree

1 file changed

+36
-25
lines changed

1 file changed

+36
-25
lines changed

stdlib/console.md

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ date: 2013-03-10
66
modifiedOn: 2013-12-03
77
---
88

9-
`console`对象是JavaScript的原生对象,它有点像Unix系统的标准输出`stdout`和标准错误`stderr`,可以输出各种信息到控制台,并且还提供了很多额外的有用方法
9+
`console`对象是 JavaScript 的原生对象,它有点像 Unix 系统的标准输出`stdout`和标准错误`stderr`,可以输出各种信息到控制台,并且还提供了很多有用的辅助方法
1010

11-
它的常见用途有两个
11+
`console`的常见用途有两个
1212

1313
- 调试程序,显示网页代码运行时的错误信息。
1414
- 提供了一个命令行接口,用来与网页代码互动。
@@ -17,31 +17,31 @@ modifiedOn: 2013-12-03
1717

1818
`console`对象的浏览器实现,包含在浏览器自带的开发工具之中。以Chrome浏览器的“开发者工具”(Developer Tools)为例,可以使用下面三种方法的一种打开它。
1919

20-
1. 按F12或者`Control + Shift + i`(PC平台)/ `Alt + Command + i`(Mac平台)。
20+
1. 按 F12 或者`Control + Shift + i`(PC平台)/ `Alt + Command + i`(Mac平台)。
2121
2. 在菜单中选择“工具/开发者工具”。
2222
3. 在一个页面元素上,打开右键菜单,选择其中的“Inspect Element”。
2323

2424
打开“开发者工具”以后,可以在顶端看到,有多个面板可供选择,主要如下。
2525

2626
- **Elements**:查看网页的HTML源码和CSS代码。
2727
- **Resources**:查看网页加载的各种资源文件(比如代码文件、字体文件、css文件等),以及在硬盘上创建的各种内容(比如本地缓存、Cookie、Local Storage等)。
28-
- **Network**查看网页的HTTP通信情况
28+
- **Network**查看网页的 HTTP 通信情况
2929
- **Sources**:查看网页加载的所有源码。
3030
- **Timeline**:查看各种网页行为随时间变化的情况。
31-
- **Profiles**:查看网页的性能情况,比如CPU和内存消耗
32-
- **Console**用来运行JavaScript命令
31+
- **Performance**:查看网页的性能情况,比如 CPU 和内存消耗
32+
- **Console**用来运行 JavaScript 命令
3333

3434
这些面板都有各自的用途,以下只介绍`Console`面板(又称为控制台)。
3535

3636
`Console`面板基本上就是一个命令行窗口,你可以在提示符下,键入各种命令。
3737

38-
## console对象的方法
38+
## console 对象的方法
3939

4040
`console`对象提供的各种方法,用来与控制台窗口互动。
4141

42-
### log(),info(),debug()
42+
### console.log(),console.info(),console.debug()
4343

44-
`console.log`方法用于在console窗口输出信息。它可以接受多个参数,将它们的结果连接起来输出。
44+
`console.log`方法用于在控制台输出信息。它可以接受多个参数,将它们的结果连接起来输出。
4545

4646
```javascript
4747
console.log('Hello World')
@@ -138,7 +138,7 @@ console.log("出错了!");
138138

139139
上面代码表示,使用自定义的`console.log`方法,可以在显示结果添加当前时间。
140140

141-
### warn(),error()
141+
### console.warn(),console.error()
142142

143143
`warn`方法和`error`方法也是在控制台输出信息,它们与`log`方法的不同之处在于,`warn`方法输出信息时,在最前面加一个黄色三角,表示警告;`error`方法输出信息时,在最前面加一个红色的叉,表示出错,同时会显示错误发生的堆栈。其他方面都一样。
144144

@@ -152,7 +152,7 @@ console.warn('Warning! Too few nodes (%d)', document.childNodes.length)
152152

153153
可以这样理解,`log`方法是写入标准输出(`stdout`),`warn`方法和`error`方法是写入标准错误(`stderr`)。
154154

155-
### table()
155+
### console.table()
156156

157157
对于某些复合类型的数据,`console.table`方法可以将其转为表格显示。
158158

@@ -192,7 +192,7 @@ console.table(languages);
192192
csharp|"C#"|"object-oriented"
193193
fsharp|"F#"|"functional"
194194

195-
### count()
195+
### console.count()
196196

197197
`count`方法用于计数,输出它被调用了多少次。
198198

@@ -240,7 +240,7 @@ greet('bob')
240240

241241
上面代码根据参数的不同,显示`bob`执行了两次,`alice`执行了一次。
242242

243-
### dir(),dirxml()
243+
### console.dir(),console.dirxml()
244244

245245
`dir`方法用来对一个对象进行检查(inspect),并以易于阅读和打印的格式显示。
246246

@@ -257,7 +257,7 @@ console.dir({f1: 'foo', f2: 'bar'})
257257

258258
上面代码显示`dir`方法的输出结果,比`log`方法更易读,信息也更丰富。
259259

260-
该方法对于输出DOM对象非常有用,因为会显示DOM对象的所有属性
260+
该方法对于输出 DOM 对象非常有用,因为会显示 DOM 对象的所有属性
261261

262262
```javascript
263263
console.dir(document.body)
@@ -269,27 +269,38 @@ Node 环境之中,还可以指定以代码高亮的形式输出。
269269
console.dir(obj, {colors: true})
270270
```
271271

272-
`dirxml`方法主要用于以目录树的形式,显示DOM节点
272+
`dirxml`方法主要用于以目录树的形式,显示 DOM 节点
273273

274274
```javascript
275275
console.dirxml(document.body)
276276
```
277277

278-
如果参数不是DOM节点,而是普通的JavaScript对象`console.dirxml`等同于`console.dir`
278+
如果参数不是 DOM 节点,而是普通的 JavaScript 对象`console.dirxml`等同于`console.dir`
279279

280280
```javascript
281281
console.dirxml([1, 2, 3])
282282
// 等同于
283283
console.dir([1, 2, 3])
284284
```
285285

286-
### assert()
286+
### console.assert()
287287

288-
`assert`方法接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为`false`,才会输出第二个参数,否则不会有任何结果。
288+
`assert`方法主要用于程序运行过程中,进行条件判断,如果不满足条件,就显示一个错误,但不会中断程序执行。这样就相当于提示用户,内部状态不正确。
289+
290+
它接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为`false`,才会提示有错误,在控制台输出第二个参数,否则不会有任何结果。
289291

290292
```javascript
291-
console.assert(true === false, '判断条件不成立')
293+
console.assert(false, '判断条件不成立')
292294
// Assertion failed: 判断条件不成立
295+
296+
// 相当于
297+
try {
298+
if (false) {
299+
throw new Error('判断条件不成立');
300+
}
301+
} catch(e) {
302+
console.error(e);
303+
}
293304
```
294305

295306
下面是另一个例子,判断子节点的个数是否大于等于500。
@@ -298,9 +309,9 @@ console.assert(true === false, '判断条件不成立')
298309
console.assert(list.childNodes.length < 500, '节点个数大于等于500')
299310
```
300311

301-
上面代码中,如果符合条件的节点小于500个,不会有任何输出;只有大于等于500时,才会显示指定文本
312+
上面代码中,如果符合条件的节点小于500个,不会有任何输出;只有大于等于500时,才会在控制台提示错误,并且显示指定文本
302313

303-
### time(),timeEnd()
314+
### console.time(),console.timeEnd()
304315

305316
这两个方法用于计时,可以算出一个操作所花费的准确时间。
306317

@@ -318,7 +329,7 @@ console.timeEnd('Array initialize');
318329

319330
time方法表示计时开始,timeEnd方法表示计时结束。它们的参数是计时器的名称。调用timeEnd方法之后,console窗口会显示“计时器名称: 所耗费的时间”。
320331

321-
### profile(),profileEnd()
332+
### console.profile(),console.profileEnd()
322333

323334
`console.profile`方法用来新建一个性能测试器(profile),它的参数是性能测试器的名字。
324335

@@ -336,7 +347,7 @@ console.profileEnd()
336347

337348
打开浏览器的开发者工具,在`profile`面板中,可以看到这个性能调试器的运行结果。
338349

339-
### group(),groupend(),groupCollapsed()
350+
### console.group(),console.groupend(),console.groupCollapsed()
340351

341352
`console.group``console.groupend`这两个方法用于将显示的信息分组。它只在输出大量信息时有用,分在一组的信息,可以用鼠标折叠/展开。
342353

@@ -363,7 +374,7 @@ console.groupEnd();
363374

364375
上面代码只显示一行”Fetching Data“,点击后才会展开,显示其中包含的两行。
365376

366-
### trace(),clear()
377+
### console.trace(),console.clear()
367378

368379
`console.trace`方法显示当前执行的代码在堆栈中的调用路径。
369380

@@ -376,7 +387,7 @@ console.trace()
376387
// InjectedScript.evaluate
377388
```
378389

379-
`console.clear`方法用于清除当前控制台的所有输出,将光标回置到第一行。
390+
`console.clear`方法用于清除当前控制台的所有输出,将光标回置到第一行。如果用户选中了控制台的“Preserve log”选项,网页脚本调用`console.log`将不起作用,但手动在控制台执行该方法依然有效。
380391

381392
## 命令行 API
382393

0 commit comments

Comments
 (0)