recursal/MDN huggingface dataset:
CanvasGradient.addColorStop()
=============================

**`CanvasGradient.addColorStop()`** 方法添加一个由**偏移值**和**颜色值**指定的断点到渐变。如果偏移值不在`0`到`1`之间，将抛出`INDEX_SIZE_ERR`错误，如果颜色值不能被解析为有效的 CSS 颜色值 `<color>`，将抛出`SYNTAX_ERR`错误。

语法
--


```js
void gradient.addColorStop(offset, color);
```

### 参数

offset

`0`到`1`之间的值，超出范围将抛出`INDEX_SIZE_ERR`错误

color

CSS 颜色值 `<color>`。如果颜色值不能被解析为有效的 CSS 颜色值 `<color>`，将抛出`SYNTAX_ERR`错误。

示例
--

### 使用 `addColorStop` 方法

一个使用`CanvasGradient`对象的`addColorStop` 方法的简单例子

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(1, "white");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
```


编辑以下代码可看到画布变化：
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
var gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"white");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,200,100);</textarea
>
```


```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

标准
--

| Specification |
| --- |
| HTML Standard # dom-canvasgradient-addcolorstop-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接口定义 `CanvasGradient`
* `CanvasRenderingContext2D.createLinearGradient()`
* `CanvasRenderingContext2D.createRadialGradient()`
console：groupCollapsed() 静态方法
=============================

**`console.groupCollapsed()`** 方法在 Web 控制台上创建一个新的分组。与 `console.group()` 方法的不同点是，新建的分组默认是折叠的。用户必须点击一个按钮才能将折叠的内容打开。

调用 `console.groupEnd()` 以回到父级分组。

参见 `console` 文档中的在控制台中使用分组以获取详情和示例。

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
groupCollapsed()
groupCollapsed(label)
```

### 参数

`label`

分组的标签，为可选值。

### 返回值

无（`undefined`）。

规范
--

| Specification |
| --- |
| Console Standard # groupcollapsed |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console：profile() 静态方法
======================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

开始记录性能描述信息 (例如， Firefox performance tool)。

你可以选择提供一个参数来命名描述信息，这将允许你在有多个描述信息被记录时来选择只停止那个描述信息（被你命名的那个）。请查阅`Console.profileEnd()`来确认这个参数是如何被解释的。

要停止记录，请调用`Console.profileEnd()`。

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
profile(profileName)
```

参数
--

`profileName`

描述信息的名字。可选。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Console.profileEnd()`
console：warn() 静态方法
===================

向 Web 控制台输出一条警告信息。

**备注：** 此特性在 Web Worker 中可用

**备注：** 在火狐浏览器里，警告会有一个小感叹号图标在 Web 控制台信息前面。

语法
--


```js
warn(obj1)
warn(obj1, /\* …, \*/ objN)
warn(msg)
warn(msg, subst1, /\* …, \*/ substN)
```

参数
--

`obj1` ... `objN`

要输出的 Javascript 对象列表。其中每个对象会以字符串的形式按照顺序依次输出到控制台。

`msg`

一个 JavaScript 字符串，其中包含零个或多个替代字符串。

`subst1` ... `substN`

零个或多个 Javascript 对象 依次替换 msg 中的替代字符串，你可以在替代字符串中指定对象的输出格式。

查看向控制台输出文本来了解更多 `console` 的用法。

规范
--

| Specification |
| --- |
| Console Standard # warn |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Opera Dragonfly 文档：控制台
* MSDN：使用 F12 工具控制台来查看错误和状态
console：info() 静态方法
===================

向 web 控制台输出一个通知信息。仅在 Firefox，web 控制台的日志中的项目旁边会显示一个小的‘I‘图标

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
info(obj1)
info(obj1, /\* …, \*/ objN)
info(msg)
info(msg, subst1, /\* …, \*/ substN)
```

参数
--

`obj1` ... `objN`

要输出的 JavaScript 对象列表。对象 obj1,obj2,...列出顺序和输出顺序一致。

`msg`

JavaScript 字符串。可包含零个或多个替换字符串。

`subst1` ... `substN`

用于替换 msg 内的替换字符串的 JavaScript 对象。可以对输出的格式进行额外的控制。

查看更多细节可访问 `console` 文件内的Outputting text to the console

规范
--

| Specification |
| --- |
| Console Standard # info |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Opera Dragonfly documentation: Console
* MSDN: Using the F12 Tools Console to View Errors and Status
console：timeLog() 静态方法
======================

在控制台输出计时器的值，该计时器必须已经通过 `console.time()` 启动。

参阅文档中的 Timers 部分获取详细说明和示例。

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
timeLog()
timeLog(label)
timeLog(label, val1)
timeLog(label, val1, /\* …, \*/ valN)
```

### 参数

`label`

计时器索引。

### 返回值

如果没有传入 label 参数，则以 default: 作为引导返回数据：
```

default: 1042ms
```


如果传入了一个已经存在的 `label` ，则会以 `label:` 作为引导返回数据：
```

label: 1242ms
```

### 异常

如果计时器未启动， `timeLog()` 会返回一个警告：
```

Timer "default" doesn't exist.
```


如果传入的 label 索引没有与之对应的计时器，则返回如下警告：
```

Timer "timer name" doesn't exist.
```

示例
--


```js
console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");
```


上例中的输出分别显示了用户从打开页面到关闭第一个 alert 和第二个 alert 框的时间间隔：

![Timer output in Firefox console](/zh-CN/docs/Web/API/console/timelog_static/timer_output.png)

注意：使用 `timelog()` 输出计时器的值会显示计时器名称。使用 `timeEnd()` 停止也会显示计时器名称和输出计时器的值，并且，最后的 " - timer ended" 可以清楚的显示计时器不再计时的信息。

规范
--

| Specification |
| --- |
| Console Standard # timelog |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Opera Dragonfly documentation: Console
console：time() 静态方法
===================

你可以启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行 10,000 个计时器。当以此计时器名字为参数调用 `console.timeEnd()` 时，浏览器将以毫秒为单位，输出对应计时器所经过的时间。

关于 Timers 的细节和例子请参考文档 `console` 。

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
time()
time(label)
```

参数
--

`label`

新计时器的名字。用来标记这个计时器，作为参数调用 `console.timeEnd()` 可以停止计时并将经过的时间在终端中打印出来。

规范
--

| Specification |
| --- |
| Console Standard # time |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参阅
--

* `Console.timeEnd()`
* `Console.timeLog()`
* Opera Dragonfly documentation: Console
console：countReset() 静态方法
=========================

重置计数器。此函数有一个可选参数 `label`。

**备注：** 此特性在 Web Worker 中可用

如果提供了参数`label`，此函数会重置与 label 关联的计数。

如果省略了参数`label`，此函数会重置默认的计数器。

语法
--


```js
countReset()
countReset(label)
```

### 参数

`label`

 一个字符串，若传入此参数 `countReset()` 重置此 label 的 count 为 0。
 若忽略此参数 `countReset()` 重置 `count()` 默认的 default 字段的 count 为 0


### 返回值

若传入 label 参数：
```

 counter-name: 0
```


若不传入 label 参数：
```

default: 0
```

### 异常情况

若传入一个不存在的 `label`，`countReset` 返回下面的警告信息：
```

Counter "counter-name" doesn’t exist.
```


若 `label` 没有被传入 并且 `count()` 也没有被调用过，`countReset` 返回下面的警告信息：
```

Counter "default" doesn’t exist.
```

示例
--

下面给出示例代码：


```js
var user = "";

function greet() {
  console.count();
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
console.countReset();
```


控制台打印输出结果：
```

"default: 1"
"default: 2"
"default: 3"
"default: 1"
"default: 0"
```


Note that the call to console.counterReset() resets the value of the default counter to zero.

可以看到 调用 `console.counterReset()` 重置了`default` 的计数为 0

如果我们把 `user` 变量做为 `label` 传入第一次调用的 `count()` 把字符串 `'alice'` 作为第二次调用 `count()` 的参数


```js
var user = "";

function greet() {
  console.count(user);
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.countReset("bob");
console.count("alice");
```


我们看到的输出如下：
```

"bob: 1"
"alice: 1"
"alice: 2"
"bob: 0"
"alice: 3"
```


调用 countReset("bod") 只是重置了 "bob" 的计数器值 而 "alice" 的计数器值没有改变。

规范
--

| Specification |
| --- |
| Console Standard # countreset |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console：groupEnd() 静态方法
=======================

在 Web 控制台中退出一格缩进 (结束分组). 请参阅 `console` 中的Using groups in the console 来获取它的用法和示例。

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
groupEnd()
```

参数
--

无。

规范
--

| Specification |
| --- |
| Console Standard # groupend |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Opera Dragonfly documentation: Console
console：profileEnd() 静态方法
=========================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

**警告：** 在 console.profile() 之后立刻调用此 API 可能会导致其无法工作。为解决此问题，请在 setTimeOut 中至少延迟 5 毫秒后再调用。请看 bug #1173588。

profileEnd 方法会停止记录之前已经由`console.profile()`开始记录的性能描述信息

你可以选择提供一个参数来命名需要记录的描述信息。这使得你在记录多个描述信息的时候可以停止记录特定的描述信息。

* 如果 `console.profileEnd()` 传了描述信息名字，并且它与正在记录的描述信息的名字相匹配，则此描述信息将会停止。
* 如果 `console.profileEnd()` 传了描述信息名字，并且它与正在记录的描述信息的名字不匹配，则不会进行更改。
* 如果 `console.profileEnd()` 没有传描述信息名字，最近启动记录的描述信息将会停止。

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
profileEnd(profileName)
```

参数
--

`profileName`

描述信息的名字。可选。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Console.profile()`
console：timeStamp() 静态方法
========================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

向浏览器的 Performance 或者 Waterfall 工具添加一个标记。这样可以让你将代码中的一个点和其他在时间轴上已记录的事件相关联，例如布局事件和绘制事件等。

你可以选择用一个参数来作为时间戳标签，然后标记旁边就会显示这个标签。

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
timeStamp(label)
```

参数
--

`label`

Label for the timestamp. Optional.

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `console.time()`
* `console.timeEnd()`
* Adding timestamps to the Waterfall
console：timeEnd() 静态方法
======================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

概述
--

停止一个通过 `console.time()` 启动的计时器

**备注：** 该方法在使用时不会将输出的时间返回到 js，它只能用于控制台调试。请勿将该方法作为普通计时器或性能数据收集器的一部分。

有关详细信息和示例，请参阅 Timers

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
timeEnd()
timeEnd(label)
```

### 参数

`label`

需要停止的计时器名字。一旦停止，计时器所经过的时间会被自动输出到控制台。

规范
--

| Specification |
| --- |
| Console Standard # timeend |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Opera Dragonfly documentation: Console
console：log() 静态方法
==================

**`console.log()`** 方法向 Web 控制台输出一条信息。这条信息可能是单个字符串（包括可选的替代字符串），也可能是一个或多个对象。

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
log(obj1)
log(obj1, /\* …, \*/ objN)
log(msg)
log(msg, subst1, /\* …, \*/ substN)
```

参数
--

`obj1` ... `objN`

一个用于输出的 JavaScript 对象列表。其中每个对象会以字符串的形式按照顺序依次输出到控制台。请注意，如果你在最新版本的 Chrome 和 Firefox 中输出对象，你在控制台中得到的是*对该对象的引用*，这不一定是你调用 `console.log()` 时该对象的“值”，但它一定是该对象在你打开控制台时的值。

`msg`

一个 JavaScript 字符串，其中包含零个或多个替代字符串。

`subst1` ... `substN`

JavaScript 对象，用来依次替换 `msg` 中的替代字符串。你可以在替代字符串中指定对象的输出格式。

查看输出文本到控制台来了解更多 `console` 对象的用法。

返回值
---

无（`undefined`）。

输出对象
----

不要使用 `console.log(obj)`，而应该使用 `console.log(JSON.parse(JSON.stringify(obj)))`。

这样可以确保你所看到的 `obj` 的值是当前输出的值。否则，大多数浏览器会提供一个随着值的变化而不断更新的实时视图。这可能不是你想要的。

规范
--

| Specification |
| --- |
| Console Standard # log |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* MSDN: Using the F12 Tools Console to View Errors and Status
* NodeJS: Console API
console：table() 静态方法
====================

将数据以表格的形式显示。

这个方法需要一个必须参数 `data`，`data` 必须是一个数组或者是一个对象；还可以使用一个可选参数 `columns`。

它会把数据 `data` 以表格的形式打印出来。数组中的每一个元素（或对象中可枚举的属性）将会以行的形式显示在表格中。

表格的第一列是 `index`。如果数据 `data` 是一个数组，那么这一列的单元格的值就是数组的索引。如果数据是一个对象，那么它们的值就是各对象的属性名称。注意（在 FireFox 中）`console.table` 被限制为只显示 1000 行（第一行是被标记的索引（原文：labeled index））。

**备注：** 此特性在 Web Worker 中可用

### 打印单一参数类型

数据的参数类型可以是数组或是对象。


```js
// 打印一个由字符串组成的数组

console.table(["apples", "oranges", "bananas"]);
```


![](/zh-CN/docs/Web/API/console/table_static/console-table-array.png)


```js
// 打印一个属性值是字符串的对象

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var me = new Person("John", "Smith");

console.table(me);
```


![](/zh-CN/docs/Web/API/console/table_static/console-table-simple-object.png)

### 打印复合的参数类型

如果需要打印的元素在一个数组中，或者需要打印的属性在一个对象，并且他们本身就是一个数组或者对象，则将会把这个元素显示在同一行，每个元素占一列：


```js
// 二元数组的打印

var people = [
  ["John", "Smith"],
  ["Jane", "Doe"],
  ["Emily", "Jones"],
];
console.table(people);
```


![Table displaying array of arrays](/zh-CN/docs/Web/API/console/table_static/console-table-array-of-array.png)


```js
// 打印一个包含对象的数组

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily]);
```


请注意，如果数组包含对象，则列将使用属性名称进行标记。

结果显示，如果数组中包含该对象，打印出来的列标签将是该对象的属性名

![Table displaying array of objects](/zh-CN/docs/Web/API/console/table_static/console-table-array-of-objects.png)


```js
// 打印属性名是对象的对象

var family = {};

family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");

console.table(family);
```


![Table displaying object of objects](/zh-CN/docs/Web/API/console/table_static/console-table-object-of-objects.png)

### 选择要隐藏的列

`console.table()` 会把所有元素罗列在每一列，你可以使用 `columns` 参数选择要显示的列的子集：


```js
// 一个对象数组，只打印 firstName

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily], ["firstName"]);
```


![Table displaying array of objects with filtered output](/zh-CN/docs/Web/API/console/table_static/console-table-array-of-objects-firstname-only.png)

### 按列重新排序

你可以点击每列的顶部标签来重排输出的表格。

语法
--
```

console.table(data [, columns]);
```

### 参数

`data`

要显示的数据。必须是数组或对象。

`columns`

一个包含列的名称的数组。

规范
--

| Specification |
| --- |
| Console Standard # table |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console：error() 静态方法
====================

向 Web 控制台输出一条错误消息。

**备注：** 此特性在 Web Worker 中可用

语法
--
```

console.error(obj1 [, obj2, ..., objN]);
console.error(msg [, subst1, ..., substN]);
console.exception(obj1 [, obj2, ..., objN]);
console.exception(msg [, subst1, ..., substN]);
```


**备注：** `console.exception()` 是 `console.error()` 的别名；它们功能相同。

### 参数

`obj1` ... `objN`

要输出的 JavaScript 对象列表。这些对象的字符串形式按顺序加起来然后输出。

`msg`

一个字符串，它包含零个或多个替代字符串。

`subst1` ... `substN`

JavaScript 对象可以用此来替换`msg`里的替代字符串。你可以控制输出的格式。

详情请看`console`文档中的 输出文本到控制台 。

规范
--

| Specification |
| --- |
| Console Standard # error |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Opera Dragonfly documentation: Console
* MSDN: Using the F12 Tools Console to View Errors and Status
* Chrome Developer Tools: Using the Console
console：assert() 静态方法
=====================

如果断言为 false，则将一个错误消息写入控制台。如果断言是 `true`，没有任何反应。

**备注：** 此特性在 Web Worker 中可用

`console.assert()` 方法在 Node.js 中的实现和浏览器中可用的 `console.assert()` 方法实现是不同的。在浏览器中当 `console.assert()` 方法接受到一个值为假断言的时候，会向控制台输出传入的内容，但是并不会中断代码的执行，而在 Node.js v10.0.0 之前，一个值为假的断言也将会导致一个 `AssertionError` 被抛出，使得代码执行被打断。v10.0.0 修复了此差异，所以现在 `console.assert()` 在 Node 和浏览器中执行行为相同。

语法
--


```js
console.assert(assertion, obj1 [, obj2, ..., objN]);
console.assert(assertion, msg [, subst1, ..., substN]); // c-like message formatting
```

### 参数

`assertion`

一个布尔表达式。如果 assertion 为假，消息将会被输出到控制台之中。

`obj1` ... `objN`

被用来输出的 Javascript 对象列表，最后输出的字符串是各个对象依次拼接的结果。

`msg`

一个包含零个或多个子串的 Javascript 字符串。

`subst1` ... `substN`

各个消息作为字串的 Javascript 对象。这个参数可以让你能够控制输出的格式。

案例
--

下面的代码示例演示了 JavaScript 对象的使用：


```js
const errorMsg = "the # is not even";
for (let number = 2; number <= 5; number += 1) {
  console.log("the # is " + number);
  console.assert(number % 2 === 0, { number: number, errorMsg: errorMsg });
  // 或者使用 ES2015 对象简写：
  // console.assert(number % 2 === 0, {number, errorMsg});
}
// 输出：
// the # is 2
// the # is 3
// Assertion failed: {number: 3, errorMsg: "the # is not even"}
// the # is 4
// the # is 5
// Assertion failed: {number: 5, errorMsg: "the # is not even"}
```


请注意，你可以在大多数浏览器中使用 console.log 进行格式化输出


```js
console.log("the word is %s try number %d", "foo", 123);
// 输出：the word is foo try number 123
```


但是 `console.assert` 在不同浏览器中可能获得不同的效果：


```js
console.assert(false, "the word is %s", "foo");
// correct output in Node (e.g. v8.10.0) and some browsers
// (e.g. Firefox v60.0.2):
// Assertion failed: the word is foo
// incorrect output in some browsers
// (e.g. Chrome v67.0.3396.87):
// Assertion failed: the word is %s foo
```


有关详细信息，请参阅 `console` 文档中的 输出文本到控制台。

规范
--

| Specification |
| --- |
| Console Standard # assert |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* WHATWG Console Standard: console.assert
* Opera Dragonfly documentation: Console
* MSDN: Using the F12 Tools Console to View Errors and Status
* Chrome Developer Tools: Using the Console
console：dir() 静态方法
==================

**`console.dir()`** 方法可以显示指定 JavaScript 对象的属性列表，并以交互式的形式展现。输出结果呈现为分层列表，包含展开/折叠的三角形图标，可用于查看子对象的内容。

换句话说，`console.dir()` 是一种在控制台中查看指定 JavaScript 对象的所有属性的方法，开发人员可以通过这种方式轻松获取对象的属性。

**备注：** 此特性在 Web Worker 中可用

![console-dir.png](/zh-CN/docs/Web/API/console/dir_static/console-dir.png)

语法
--


```js
dir(object);
```

参数
--

`object`

应输出其属性的 JavaScript 对象。

### 返回值

无（`undefined`）。

规范
--

| Specification |
| --- |
| Console Standard # dir |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* MSDN：使用 F12 工具控制台查看错误和状态
* Chrome 控制台 API 参考
console：group() 静态方法
====================

**`console.group()`** 方法在 Web 控制台上创建一个新的分组。随后输出到控制台上的内容都会被添加一个缩进，表示该内容属于当前分组，直到调用 `console.groupEnd()` 之后，当前分组结束。

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
group()
group(label)
```

### 参数

`label`

分组标签。

### 返回值

无（`undefined`）。

规范
--

| Specification |
| --- |
| Console Standard # group |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `console.groupEnd()`
console：debug() 静态方法
====================

**`console.debug()`** 方法将一条消息输出到 web 控制台，消息的日志级别为“debug”。只有在控制台配置为显示调试输出时，才会向用户显示该消息。在大多数情况下，日志级别在控制台 UI 中进行配置。该日志级别可能对应于 **`Debug`** 或 **`Verbose`** 日志级别。

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
debug(obj1)
debug(obj1, /\* …, \*/ objN)
debug(msg)
debug(msg, subst1, /\* …, \*/ substN)
```

### 参数

`obj1` … `objN`

要输出的 JavaScript 对象列表。按传参的顺序把对象输出到控制台。

`msg`

包含零个或多个替换字符串的 JavaScript 字符串，这些替换字符串会按照连续的顺序用 `subst1` 到 `substN` 进行替换。

`subst1` … `substN`

JavaScript 对象，用来依次替换 `msg` 中的替代字符串。你可以在替代字符串中指定对象的输出格式。查看使用字符串替换了解替换字符串如何工作。

有关详细信息，请参阅 `console` 对象文档中的输出文本到控制台。

### 返回值

无 (`undefined`)。

规范
--

| Specification |
| --- |
| Console Standard # debug |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console：trace() 静态方法
====================

`console` 的 **`trace()`** 方法向 Web 控制台输出一个堆栈跟踪。

**备注：** 此特性在 Web Worker 中可用

在页面 `console` 文档中查看堆栈跟踪的详细介绍和示例。

语法
--


```js
trace()
trace(object1, /\* …, \*/ objectN)
```

### 参数

`...any, ...data` 可选

Zero or more objects to be output to console along with the trace. These are assembled and formatted the same way they would be if passed to the `console.log()` method.

Example
-------
```

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();
```


In the console, the following trace will be displayed:
```

bar
foo
<anonymous>
```

规范
--

| Specification |
| --- |
| Console Standard # trace |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Opera Dragonfly documentation: Console
console：dirxml() 静态方法
=====================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

显示一个明确的 XML/HTML 元素的包括所有后代元素的交互树。如果无法作为一个 element 被显示，那么会以 JavaScript 对象的形式作为替代。它的输出是一个继承的扩展的节点列表，可以让你看到子节点的内容。

语法
--
```

console.dirxml(object);
```

参数
--

`object`

一个属性将被输出的 JavaScript 对象。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Opera Dragonfly documentation: Console
console：count() 静态方法
====================

**`console.count()`** 方法会记录调用 `count()` 的次数。

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
count()
count(label)
```

### 参数

`label` 可选

一个字符串。如果给定，`count()` 会输出带有该标签的调用次数。如果未提供，调用 `count()` 的行为就像是带有“default”标签一样。

### 返回值

无（`undefined`）。

示例
--

例如，给定这样的代码：


```js
let user = "";

function greet() {
  console.count();
  return `hi ${user}`;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
```


控制台输出看起来像这样：
```

"default: 1"
"default: 2"
"default: 3"
"default: 4"
```


标签显示为 `default`，因为没有提供明确的标签。

如果我们将 `user` 变量作为第一次调用 `count()` 函数时的 `label` 参数传入，并将字符串”alice“作为第二次调用的参数：


```js
let user = "";

function greet() {
  console.count(user);
  return `hi ${user}`;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count("alice");
```


我们会看到如下的输出：
```

"bob: 1"
"alice: 1"
"alice: 2"
"alice: 3"
```


我们现在仅根据 `label` 的值维护单独的计数。

规范
--

| Specification |
| --- |
| Console Standard # count |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console：clear() 静态方法
====================

**`console.clear()`** 方法会清空控制台，但前提是该控制台允许清空。像浏览器运行的图形控制台就允许清空，而像 Node 运行的终端上显示的控制台则不支持它，调用该方法将不会产生任何效果（也不会报错）。

语法
--


```js
clear();
```

### 参数

无

### 返回值

无（`undefined`）。

规范
--

| Specification |
| --- |
| Console Standard # clear |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WebSocket: message event
========================

`message` 事件会在 `WebSocket` 接收到新消息时被触发。

| 起泡（Bubbles） | 不 |
| --- | --- |
| 可取消 | 不 |
| 接口 | `MessageEvent` |
| 事件处理程序属性 | `onmessage` |

例子
--


```js
// 创建一个 WebSocket 连接
const socket = new WebSocket("ws://localhost:8080");

// 监听消息
socket.addEventListener("message", function (event) {
  console.log("Message from server ", event.data);
});
```

规范
--

| Specification |
| --- |
| WebSockets Standard # dom-websocket-onmessage |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

另看
--

* WebSocket: close event
* WebSocket: error event
* WebSocket: open event
* Writing WebSocket client applications (en-US)
WebSocket.onclose
=================

**`WebSocket.onclose`** 属性返回一个事件监听器，这个事件监听器将在 WebSocket 连接的`readyState` 变为 `CLOSED`时被调用，它接收一个名字为“close”的 `CloseEvent` 事件。

语法
--
```

WebSocket.onclose = function(event) {
  console.log("WebSocket is closed now.");
};
```

值
-

一个`EventListener`.

规范
--

| Specification |
| --- |
| WebSockets Standard # dom-websocket-onclose |
WebSocket.readyState
====================

概要
--

返回当前 `WebSocket` 的链接状态，只读。

语法
--
```

var readyState = WebSocket.readyState;
```

值
-

以下其中之一

0 (`WebSocket.CONNECTING`)

正在链接中

1 (`WebSocket.OPEN`)

已经链接并且可以通讯

2 (`WebSocket.CLOSING`)

连接正在关闭

3 (`WebSocket.CLOSED`)

连接已关闭或者没有链接成功

Specifications
--------------

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-readystate① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.