Chrome console相关

落日映苍穹つ 2022-12-23 13:29 239阅读 0赞

## 概览 ##

### 消息堆叠 ###

如果控制台输出的消息连续重复，而不是在新行上输出每一个消息实例，控制台将“堆叠”消息并在左侧外边距显示一个数字，此数字表示该消息已重复的次数。

![4f2555957309ea73179f0cd9da808366.png][]

如果想要输出的每一个条目都单独展示，可以在`DevTools`设置中启用`Show timestamps`

![e794f911f1ffe6782a1681f228d4cf56.png][]

此时，每一条消息都会有一个时间戳，且会各自占用一行。

![4e655827e0c9a07620c5cf265ff98e79.png][]

### 保留历史记录 ###

启用控制台顶部的`Preseve log`可以在页面刷新或更改之间保留控制台历史记录。 消息将一直存储，直至您清除控制台或者关闭标签。

![661fb2f381361ae6b815fba6faec2ebe.png][]

或者通过在控制台点击鼠标右键，选择`save as`将其保存下来。

![befbe1418e4aa7f7485495c70e45d36e.png][]

### 其他设置 ###

打开 `DevTools` 设置，转至 `General` 标签，然后向下滚动到 `Console` 部分，查看更多控制台设置。

![bc7840f03d4189eed0c5e829a008b529.png][]

## 控制台和其他标签页一起展示 ##

在其他标签页中如`Elements`，按下`Esc`键，可以打开控制台。

## 控制台中运行`JavaScript` ##

控制台是`REPL`1，代表读取，评估，打印和循环。它读取键入的`JavaScript`，评估您的代码，打印出`Expression`2的结果，然后循环回到第一步。

### 控制台中的一些便利功能 ###

1.  不必键入`document.querySelector（）`来选择元素，而是可以键入`$（）`。该语法受`jQuery`启发，但实际上不是`jQuery`。它只是`document.querySelector（）`的别名。
2.  `debug（function）`有效地在该函数的第一行设置一个断点。
3.  `keys（object）`返回一个包含指定对象键的数组。

## 一些参考 ##

### 控制台设置 ###

下面的这些链接说明了每一项设置：

*  [Hide Network 【隐藏网络部分】][Hide Network]
 *  [Preserve Log 【保留日志】][Preserve Log]
 *  [Selected Context Only 【仅选定上下文】][Selected Context Only]
 *  [Group Similar 【相似内容分组】][Group Similar]
 *  [Log XmlHttpRequests 【记录下XHR】][Log XmlHttpRequests _XHR]
 *  [Eager Evaluation 【结果预览】][Eager Evaluation] 3
 *  [Autocomplete From History 【根据历史记录中自动完成】][Autocomplete From History] 4

## API参考 ##

*  `console.assert(expression, object)` 当表达式的计算结果为`false`时，将错误写入控制台。
 *  `console.clear()` 清除控制台。
 *  `console.count([label])` 写入在同一行和同一标签上调用`count（）`的次数。调用`console.countReset（[label]）`以重置计数。
 *  `console.countReset([label])` 重置一个计数
 *  `console.debug(object [, object, ...])` 与`console.log（object [，object，...]）`相同。
 *  `console.dir(object)` 打印指定对象的`JSON`表示形式。
 *  `console.dirxml(node)` 打印节点后代的`XML`表示形式。
 *  `console.error(object [, object, ...])` 将对象打印到控制台，将其格式化为错误，并包括堆栈跟踪。
 *  `console.group(label)` 以可视方式将消息分组在一起，直到调用`console.groupEnd（label）`为止。最初登录控制台时，使用`console.groupCollapsed（label）`折叠组。
 *  `console.groupCollapsed(label)` 与`console.group（label）`相同，除了该组在登录到控制台时最初是折叠的。
 *  `console.groupEnd(label)` 停止`console.group(label)`的分组
 *  `console.info(object [, object, ...])` 与`console.log（object [，object，...]）`相同。
 *  `console.log(object [, object, ...])` 将消息打印到控制台。
 *  `console.table(array)` 将对象数组记录为表格。
 *  `console.time([label])` 启动一个新的计时器。调用`console.timeEnd（[label]）`停止计时器并将经过的时间打印到控制台。
 *  `console.timeEnd([label])` 停止计时器。参见`console.time（）`。
 *  `console.trace()` 将堆栈跟踪信息打印到控制台。
 *  `console.warn(object [, object, ...])` 将警告信息打印到控制台。

## 控制台的一些实用API ##

> 这些函数只有在控制台调用它们时才起作用。不可以通过写入脚本来调用。

### `$_` ###

返回最近求值的表达式的值。

![34772eae959fdef3fb39a82bab374273.png][]

所有控制台输出的操作都会更新`$_`的值，如下图，开始的时候，`$_`代表一个数组，当`$_.length`执行之后，`$_`会被更新为4。

![5fd6a1d7ec38c4c7e67e06c9564f83d1.png][]

### `$0 - $4` ###

`$ 0`，`$ 1`，`$ 2`，`$ 3`和`$ 4`命令用作对在`Elements面板`中检查的**最后五个DOM元素**或在`Profiles面板`中选择的**最后五个JavaScript堆对象**的历史参考。`$ 0`返回最近选择的元素或JavaScript对象，`$ 1`返回第二个最近选择的元素，依此类推。

在`Elements`面板只需要鼠标单击一下dom节点，即可在控制台中使用`$0`查看点击的节点。

### `$(selector, [startNode])` ###

`$（selector）`返回对具有指定CSS选择器的第一个DOM元素的引用。此函数是`document.querySelector（）`函数的别名。

![11cb3514044e461aad29c5db93a639b7.png][]

右键单击返回的结果，然后选择`在元素面板中显示`以在DOM中找到它，或选择`滚动到视图`以在页面上显示它。

> 注意：如果使用的是使用`$`的`jQuery`之类的库，则此功能将被覆盖，并且`$`将对应于该库的实现。

### `$$(selector, [startNode])` ###

`$$（selector）`返回与给定CSS选择器匹配的元素数组。此命令等效于调用`document.querySelectorAll（）`。

### `$x(path, [startNode])` ###

### `clear()` ###

### `copy(object)` ###

### `debug(function)` ###

### `dir(object)` ###

### `dirxml(object)` ###

### `inspect(object/function)` ###

### `getEventListeners(object)` ###

### `keys(object)` ###

### `monitor(function)` ###

### `monitorEvents(object[, events])` ###

### `profile([name]) and profileEnd([name])` ###

### `table(data[, columns])` ###

### `undebug(function)` ###

### `unmonitor(function)` ###

### `unmonitorEvents(object[, events])` ###

### `values(object)` ###

--------------------

> [https://developers.google.com/web/tools/chrome-devtools/console][https_developers.google.com_web_tools_chrome-devtools_console]

--------------------

1.  “读取-求值-输出”循环（英语：Read-Eval-Print Loop，简称REPL），也被称做交互式顶层构件（英语：interactive toplevel），是一个简单的，交互式的编程环境。这个词常常用于指代一个Lisp的交互式开发环境，也能指代命令行的模式。 ↩︎
2.  https://2ality.com/2012/09/expressions-vs-statements.html ↩︎
3.  在控制台中键入JavaScript表达式时，`Eager Evaluation`将显示该表达式的返回值的预览。打开控制台设置，并禁用`Eager Evaluation`复选框以关闭返回值预览。 ↩︎
4.  键入表达式时，控制台的自动完成弹出窗口会显示您之前运行的表达式。这些表达式以`>`字符开头。打开控制台设置，然后禁用“从历史记录自动完成”复选框，以停止显示历史记录中的表达式。 ↩︎

[4f2555957309ea73179f0cd9da808366.png]: /images/20221120/66f2c99c476a470ea821251aecf69c21.png
[e794f911f1ffe6782a1681f228d4cf56.png]: https://img-blog.csdnimg.cn/img_convert/e794f911f1ffe6782a1681f228d4cf56.png
[4e655827e0c9a07620c5cf265ff98e79.png]: https://img-blog.csdnimg.cn/img_convert/4e655827e0c9a07620c5cf265ff98e79.png
[661fb2f381361ae6b815fba6faec2ebe.png]: https://img-blog.csdnimg.cn/img_convert/661fb2f381361ae6b815fba6faec2ebe.png
[befbe1418e4aa7f7485495c70e45d36e.png]: https://img-blog.csdnimg.cn/img_convert/befbe1418e4aa7f7485495c70e45d36e.png
[bc7840f03d4189eed0c5e829a008b529.png]: https://img-blog.csdnimg.cn/img_convert/bc7840f03d4189eed0c5e829a008b529.png
[Hide Network]: https://developers.google.com/web/tools/chrome-devtools/console/reference#network
[Preserve Log]: https://developers.google.com/web/tools/chrome-devtools/console/reference#persist
[Selected Context Only]: https://developers.google.com/web/tools/chrome-devtools/console/reference#filtercontext
[Group Similar]: https://developers.google.com/web/tools/chrome-devtools/console/reference#group
[Log XmlHttpRequests _XHR]: https://developers.google.com/web/tools/chrome-devtools/console/reference#xhr
[Eager Evaluation]: https://developers.google.com/web/tools/chrome-devtools/console/reference#eagereval
[Autocomplete From History]: https://developers.google.com/web/tools/chrome-devtools/console/reference#autocomplete
[34772eae959fdef3fb39a82bab374273.png]: https://img-blog.csdnimg.cn/img_convert/34772eae959fdef3fb39a82bab374273.png
[5fd6a1d7ec38c4c7e67e06c9564f83d1.png]: https://img-blog.csdnimg.cn/img_convert/5fd6a1d7ec38c4c7e67e06c9564f83d1.png
[11cb3514044e461aad29c5db93a639b7.png]: https://img-blog.csdnimg.cn/img_convert/11cb3514044e461aad29c5db93a639b7.png
[https_developers.google.com_web_tools_chrome-devtools_console]: https://developers.google.com/web/tools/chrome-devtools/console