type
status
date
slug
summary
tags
category
icon
password
Property
Aug 28, 2024 03:24 AM
Console 面板的打开方式
- 在控制台打开的情况选择 console 按钮
- 在 DevTool 的其他面板按 ESC 键打开面板(在开发者工具获得焦点的情况下)
- 在右上角的菜单打开(setting–show–console–drawer)
- 输入快捷键
Ctrl+Shift+P
,再输入Console
![notion image](https://cdn.jsdelivr.net/gh/kitety/blog_img@master/img/ia_10006.gif?t=77ef63b2-868b-448b-9835-2b678d6f6f17)
初识面板
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2318c7bf-204e-4d35-90bc-7bfcaef6331a%2F20200923172121.png?table=block&id=559cc35c-274e-4058-84c2-e2d211d48e4c&t=559cc35c-274e-4058-84c2-e2d211d48e4c&width=959&cache=v2)
面板分析
上面部分为工具栏
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2dc78b13-d8ea-447c-aba3-9bed1366c75b%2F20200923175847.png?table=block&id=80e70946-d923-4be3-93d6-46964c11c340&t=80e70946-d923-4be3-93d6-46964c11c340&width=1150&cache=v2)
下面部分为命令区
工具栏使用方法
展开关闭侧边栏
![notion image](https://i.loli.net/2020/09/23/NwpqoC8jKfMcB41.gif?t=59be9841-bd6c-4b66-924d-163767defb94)
ia_10009.gif
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe53c9d4f-0ec5-441d-a9d5-41f61a5b3ccf%2F20200923172330.png?table=block&id=9ff6ab41-8b5b-450f-b6a2-aedf1f77eb6d&t=9ff6ab41-8b5b-450f-b6a2-aedf1f77eb6d&width=341&cache=v2)
点击可以切换侧边栏的展示和隐藏,点击一栏可以对命令区的进行过滤。默认是以关闭的,就不会对信息进行过滤。
左侧的分类栏目主要由以下几类:
- message 全部的信息,就是未分类的信息,是以下信息的综合。
- user message
- errors 日志级别为 error 的日志
- warning 日志级别为 warning 的日志
- info 日志级别为 info 的日志
- verbose 日志级别为 verbose(冗长) 的日志
前面会显示该栏目总的日志数量,具体的信息会显示在该栏目的子栏目上,比如文件路径,产生日志数量,文件名等
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F49b9979d-5aeb-4134-b71e-fcab68008c3b%2F20200923172403.png?table=block&id=3b7345e3-ad25-4801-b7ed-259137223ae8&t=3b7345e3-ad25-4801-b7ed-259137223ae8&width=350&cache=v2)
点击对应的消息会在右侧展示过滤的结果。
清空命令行
点击这个图标
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F44745423-1195-4537-a25a-6d19ed5d1e6a%2F20200923172422.png?table=block&id=75200e7c-2262-42ee-af5a-8baf0fdfdd54&t=75200e7c-2262-42ee-af5a-8baf0fdfdd54&width=23&cache=v2)
可以清空命令行
列举出可以清空命令行的一些操作
- 右键菜单 Clear Console
- 在命令行输入 clear()
- js 调用 console.clear()
- 快捷键
Ctrl + L
上下文选择
默认的上下文环境为 top,也就是当前网页打开的环境。你也可以选择切换为你需要你的环境
比如在这个 iframe 页面,你就可以切换环境为 iframe 的环境。
当我进入 iframe 的上下文的时候就可以打印出 iframe 里面的数据
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fdff77781-39f7-4e80-a665-f7918db94279%2Fia_10012.gif?table=block&id=d53395ce-1fbd-4361-a366-4e599aca7af8&t=d53395ce-1fbd-4361-a366-4e599aca7af8&width=753&cache=v2)
实时表达式
Live Expressions 实时执行的表达式,可以创建多个表达式,失去焦点就会保存,创建之后也可以删除。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F86cb0636-11bf-47c9-bea5-42cd45a7abd5%2Fia_10013.gif?table=block&id=029b8ec3-6bf0-42c6-8fdb-07452881eff7&t=029b8ec3-6bf0-42c6-8fdb-07452881eff7&width=753&cache=v2)
过滤选项
可以输入文本、正则等对打印的信息进行搜索和过滤。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fabf3076d-cdf8-40b1-bbc0-7d3ab58520cf%2F1600854061519-ia_10014.gif?table=block&id=d9ee404e-86a7-490c-af61-dd5a9bc766da&t=d9ee404e-86a7-490c-af61-dd5a9bc766da&width=815&cache=v2)
打印级别过滤
打印级别过滤有如下选项:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2cb139cf-3ddd-4072-aa3c-659ece0b038f%2F20200923172458.png?table=block&id=ce14eb1b-135b-4b1f-a3c2-bd418cfe3eaa&t=ce14eb1b-135b-4b1f-a3c2-bd418cfe3eaa&width=204&cache=v2)
Default: 默认为警告信息和错误 Verbose: 冗长的的打印 其余为常规的信息、警告、错误级别
当过滤级别不是全部展示的话会在右侧显示被隐藏的条数。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F356fb4b3-11dc-40f2-b54d-77866d67bc3e%2F20200923172507.png?table=block&id=0c791de1-4bc6-422f-bb69-731ed381577c&t=0c791de1-4bc6-422f-bb69-731ed381577c&width=378&cache=v2)
设置
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F75a941da-e288-464b-bc21-dfe919c889e9%2F20200923172514.png?table=block&id=41143d76-0f68-4b0f-8bd1-525708fd0ba9&t=41143d76-0f68-4b0f-8bd1-525708fd0ba9&width=827&cache=v2)
- Hide Network是否对有关网络的日志进行隐藏
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fae9804dc-bf3d-4fb9-a874-875f6dab172a%2Fia_10018.gif?table=block&id=e74e836e-95eb-41bd-91c4-0d3291eb6d1a&t=e74e836e-95eb-41bd-91c4-0d3291eb6d1a&width=815&cache=v2)
- Log XmlHttpRequests是否打印 XHR 请求
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F733cf602-3cf0-4299-b595-05782818e835%2Fia_10019.gif?table=block&id=2188b93e-426c-4888-bf0f-3b9bd215ce29&t=2188b93e-426c-4888-bf0f-3b9bd215ce29&width=1356&cache=v2)
- Preserve Log 是否保留日志,每次刷新是否自动清空日志。
- Selected Context Only 是否只显示当前的上下文环境的日志信息
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0890e383-f5a5-482e-ba59-4757bb3cfa0f%2Fia_10020.gif?table=block&id=53e1cda8-d768-4277-9669-ae9decbdee51&t=53e1cda8-d768-4277-9669-ae9decbdee51&width=759&cache=v2)
- Group Similar
- Eager Evaluation及时显示执行结果
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1436328e-ced1-4b58-bbcd-f2a66d3a4c6a%2Fia_10021.gif?table=block&id=927c46f9-deaf-4bd4-8ad8-63f6aebcbbe3&t=927c46f9-deaf-4bd4-8ad8-63f6aebcbbe3&width=759&cache=v2)
- Autocomplete From History根据历史记录自动完成命令
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8c301edd-3022-45fe-88c5-504f57d780f5%2Fia_10022.gif?table=block&id=57d6c71c-4243-4684-9b57-7bc90a1c0bcf&t=57d6c71c-4243-4684-9b57-7bc90a1c0bcf&width=502&cache=v2)
- Group Similar 相同日志归到一个组里面,此选项在禁用日志时间戳事才有效
- Evaluate triggers user activation
命令区使用方法
基本使用
- 上一行输入,下一行输出结果
- 键盘的上线键可根据历史记录自动补全
右键菜单
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd4762c04-43b8-47b9-8efa-d4a3b82e6a76%2F20200923172532.png?table=block&id=6389d507-ecba-4154-97fd-444f9aab4d40&t=6389d507-ecba-4154-97fd-444f9aab4d40&width=179&cache=v2)
- Clear console
清空命令区
- Clear console history
清空历史记录,这时上下键的补全将失效
- Save as
存储当前的日志信息
Console Api
Console 工具库 Api
整理自谷歌文档
语句 | 效果 |
$_ | 返回最近执行的结果 |
$0-$4 | 日志历史的最近五个 DOM 元素 |
$ | document.querySelector(如果引用了 jquery 等库,就会被覆盖为引入的库) |
$$ | document.querySelectorAll |
$x | $x(path) 返回与给定 XPath 表达式匹配的 DOM 元素数组。 |
clear | 清除控制台 |
copy | copy(object) 将指定对象的字符串表示形式复制到剪贴板。 |
debug | 当调用指定的函数时,调试器将被调用并在 Sources 面板上的函数内部中断,从而逐步执行代码并进行调试。 |
dir | dir(object)显示所有指定对象属性的对象样式列表。此方法是 Console API console.dir()方法的别名。 |
dirxml | dirxml(object)打印指定对象的 XML 表示形式。此方法等效于 console.dirxml()方法。 |
inspect | inspect(object/function) 打开并在适当的面板中选择指定的元素或对象:DOM 元素的 Elements 面板或 JavaScript 堆对象的 Profiles 面板。 |
getEventListeners | getEventListeners(object)返回在指定对象上注册的事件 |
keys | keys(object)返回一个数组,其中包含属于指定对象的属性的名称 |
monitor | 调用指定的函数时,一条消息会记录到控制台,该消息指示函数名称以及调用该函数时传递给该函数的参数。 |
monitorEvents | 当指定对象上发生指定事件之一时,事件对象将记录到控制台。您可以指定要监视的单个事件,事件数组或映射到预定义事件集合的一般事件“类型”之一。 |
参考资源
https://developers.google.com/web/tools/chrome-devtools/console/utilities > https://developer.mozilla.org/zh-CN/docs/Web/API/Console > https://segmentfault.com/a/1190000002511877 > https://zhuanlan.zhihu.com/p/80751021
- 作者:Kitety
- 链接:https://www.kitety.com/article/chrome-console-panel-analysis
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。
相关文章