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

2020-10-22 10:11:27 浏览数 (1)

本文结构

- 本文相关

- Console面板概览

- Message

- Javascript执行环境

- 选择执行环境

- Console中的$符号

- Console下的方法

本文共计：1415字1图

预计阅读时间：2min40s

本文相关

  • 本文基于 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 中：
代码语言：javascript复制
(window === self) === self.window;
//top.window是顶级页面top的全局变量window
  • top frame 中：
代码语言：javascript复制
(((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(),可以返回指定类型的对象下所有的实例化的对象
代码语言：javascript复制
queryObjects(Object); //返回所有object对象
queryObjects(Function); //返回所有函数
queryObjects(Array); //返回所有数组
  • monitor(function)方法来追踪函数调用信息，当函数被执行，会输出追踪信息
  • monitorEvents(el,eventType)方法来追踪事件

- END -

javascript java npm 官方文档 xml

0 人点赞