Devtools 老师傅养成[3] - Console 面板

最新推荐文章于 2024-06-01 15:04:20 发布

ScarSu

最新推荐文章于 2024-06-01 15:04:20 发布

阅读量315

点赞数

本文链接：https://blog.csdn.net/zsy666666/article/details/106394578

版权

本文结构

- 本文相关

- Console面板概览

- Message

- Javascript执行环境

- 选择执行环境

- Console中的$符号

- Console下的方法

本文共计：1415字1图

预计阅读时间：2min40s

本文相关

全系列文章可以点击上方的《Devtools老师傅养成系列》专辑
本文基于 chrome 浏览器版本 73.0.3683.103（正式版本）总结
本文目的：关于【devtools 能做什么】建立完善的知识结构，至于怎么做，请查阅官方文档；工具类知识需要实践，建议阅读本文时打开 Devtools Sample[1]和 devtools 操作一遍
参考 1：google developers 官方文档[2]
参考 2：来自作者 Jon Kuoerman 在 FrontEndMaster 的 Mastering Chrome Developer Tools v2 课程[3]
参考 3：来自作者 Tomek Sułkowski 在 medium 的系列文章[4]
Devtools脑图.png[5]

Console面板概览

Console 面板是浏览器的控制台，也是 Devtools 的灵魂。

可以通过设置->Show Console drawer或者Esc 快捷键让 Console 在每个面板都能显示。

Message

在 console 中，可以看到来自浏览器/代码的五种类型的信息：
- user message
- error
- warning
- info
- verbose
相同的消息默认是堆叠的，可以通过 ctrl+shift+p 输入 time 命令或者设置中找到timestamps命令，给消息加上时间戳
通过选项Log XMLHttpRequest选择是否输出所有 XMLHttp 请求日志(可以监控页面所有 ajax 请求定位其代码调用栈)
通过Hide network选择显示/隐藏网络请求的错误信息(例如 GET xxx 404)
通过Preserve log选择保留历史记录，即刷新页面后是否还显示先前的消息

javascript 实时执行环境

console 除了能输出调试信息，也是一个 javascript 实时执行环境。
可以直接在这里输入任何全局变量名/内置对象名/函数名，会得到相应的值输出;在调试环境下的断点内，可以获取局部变量值
右键选Store as global variable，可以将输出值存储为一个临时的全局变量
双击对象的属性值，可以直接更改这个对象（持久化的更改,因为 console 存储下来的是对象的引用）
console 中输出的 dom 元素 -> 右键 -> reveal in elements：快速定位到元素面板中的当前元素

选择执行环境

可以通过左上的下拉列表，选择不同的执行环境

top 是最外层的顶级页面,其他的是 iframe 子页面

默认情况下

子 frame 中：

(window === self) === self.window;
//top.window是顶级页面top的全局变量window

top frame 中：

(((window === self) === self.window) === top) === top.window;

console 中的`$`符号：

可以通过$0，获取当前在 Elements 面板所选中的元素节点
如果 $ 在当前页面没被占用，可以用来替代 document.querySlector 方法使用
$$ 是 document.querySelectorAll 方法的更佳替代，因为 document.querySelectorAll 返回的是 nodeList(NodeList)，而$$能直接返回数组(Array)

$_可以引用上一次执行的结果

如果需要使用 npm 的包，可以安装 Console Importer 插件，用$i方法引入 npm 中的库

console 下的方法：

除了被用烂了的console.log()（当然 console.log 也有特别一点的用法）

console 对象还有 console.error/clear/debug/count/time/table/tarce 等等方法
直接在 console 中输入 console，可以看到 console 对象下的所有方法

例如 console.table(obj)可以把你的对象以可视化的表格形式进行输出

例如可以使用 console.time()和 console.timeEnd()方法来测量时间差

另:console 命令行还内置了一些 API 方法，例如 queryObjects(),可以返回指定类型的对象下所有的实例化的对象

queryObjects(Object); //返回所有object对象
queryObjects(Function); //返回所有函数
queryObjects(Array); //返回所有数组

monitor(function)方法来追踪函数调用信息，当函数被执行，会输出追踪信息

monitorEvents(el,eventType)方法来追踪事件

- END -

Devtools 老师傅养成[2] - Elements 面板

【自律】书籍推荐《4点起床》舒适而高效的作息方式

其他文章

【自律】书籍推荐《4点起床》舒适而高效的作息方式

【认知分享】行为决策学入门书籍推荐《别做正常的傻瓜》

【认知分享】如何高效舒适的成长——《刻意学习》读书输出

【认知分享】为什么马云能成功而你不能

【效率工具】 Notion为什么能让我放弃手账

【认知分享】无痛提升英语的方法

【学习方法】如何学习源码 | 如何高效学习一个新知识

我的博客

www.scarsu.com

“效率是第一生产力”

点个“在看”鼓励我吧????