Chrome DevTools的console面板

redspider
1,275 阅读6分钟

这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战

Console 面板

Chrome DevTools 的 Console 主要提供两类功能：

  • 在开发过程中记录代码诊断信息
  • 与文档和 DevTools 交互的命令行工具

Ⅰ- 打开 Console

  1. 首先，先提一下打开 Console 的方法。第一种是之前提到过的：Ctrl + Shift + J / Cmd + Opt + J，打开 DevTools，并且直接定位到控制台面板。
  2. Console drawer:这种比较特殊，如果你想打开其他功能面板的同时，还想打开 Console 的话，详见本笔记常用操作第17点

Ⅱ- Console 中的内置菜单详解

我们先看一下 Console 的界面，看看这个曾经很熟悉的界面是否真的熟悉image-20210609181850152

上下结构，上面是功能按钮或选项，下面是信息展示或交互的面板。先看上面，从左往右，依次是：

  • image-20210609182042261:显示/隐藏侧边栏的按钮，其功能是进行控制台面板的显示信息过滤。
  • image-20210609182028915:清空 Console控制台打印内容
  • image-20210609182234858:执行环境选择器,比如切换成vue-devtools
  • image-20210609182327170:监听变量,点击后输入某变量,就会将其置顶显示在console顶部,每次变量值改变都会同步上去
  • image-20210609182136699:过滤 Console 中的信息,可以用正则,也可以直接输入变量名
  • image-20210609182826833:也是对消息的过滤-分为Verbose（详细）,Info（信息），Warnings（警告）,Error（错误) 四个等级类型
  • image-20210609182447874:其他的隐藏功能-如Preserve log刷新时保存当前console的变量等
1) 过滤信息

上面按钮中过滤信息的为

  1. image-20210609182042261、image-20210609182826833:显示侧边栏时其右边的Default levels下拉菜单会被禁止使用，因为它的作用也是过滤信息并且侧边栏的过滤功能包含它image-20210609184500891

共有四种选项，按照严重级别排序分别为：Verbose（详细）,Info（信息），Warnings（警告）,Error（错误）。 在侧边栏的信息过滤功能中，除了上述四种过滤方式外还可以根据具体的messages进行过滤

  1. image-20210609182136699:过滤框主要能按照以下三种类型的输入进行信息过滤：

  • URL
  • 上下文
  • 正则表达式

示例图

image-20210609185937713

2) 清空标志:清空控制台信息
  1. image-20210609182028915:清空 Console控制台打印内容
  2. 在控制台中键入clear()，然后运行
  3. Ctrl+L清空
3) top下拉标志:切换执行环境
  1. image-20210609182234858此下拉菜单称为 Execution Context Selector,通常，您会看到此环境设置为 top（页面的顶部框架)。
  2. 其他框架和扩展程序在其自身的环境中运行。要使用这些其他环境，您需要从下拉菜单中选中它们。 例如，如果您要查看 <iframe> 元素的日志输出，并修改该环境中存在的某个变量，您需要从 Execution Context Selector 下拉菜单中选中该元素。
  3. 当您在 top 以外的环境中操作时，DevTools 将 Execution Context Selector 突出显示为红色，如下面的屏幕截图中所示。 这是因为开发者很少需要在 top 以外的任意环境中操作。 输入一个变量，期待返回一个值，只是为了查看该变量是否为 undefined（因为该变量是在不同环境中定义的），这会非常令人困惑
  4. 示例图

image-20210609191945880

4) 眼睛标志:监听变量

image-20210609182327170:用于创建一个Live表达式，此表达式的值可实时更新。

image-20210609193128590

5) settings按钮具备显示信息的控制功能，其里面有八个选择项

内部挺多功能就稍微说常用的

  1. Preserve log:默认是不勾选的，所以当刷新页面时，Console 中的信息会被清空掉。如果勾选了的话，那么刷新页面之后，信息还会被保留。
  2. 其他的我不常用谢谢

image-20210609193539202

Ⅲ- Console 能干什么事

1) 执行表达式

你可以输入任何表达式，按回车执行。在输入过程中，可能会出现智能提醒，你可以按 tab 或者 → 键来完成自动补全。另外，还可以按 ↑ 和 ↓ 键来翻阅历史表达式

2) Chrome DevTools 自带了哪些常用的表达式?

下面描述的都是 Chrome DevTools 自带的方法或者变量，需要注意一下的是，当页面暴露相同的方法或变量的话，DevTools 自带的会被覆盖，比如 jQuery 官网下的 Console 中的 $() 就是自己的方法。

常用来调试
① 选择元素
  • $()：是 document.querySelector() 的缩写
  • $x()：通过 XPath 的方式查看元素，注意是 "XPath" 中的 "x"，而不是 +-*/ 中的 *
  • 示例图image-20210609194732798
② inspect

在 Console 中输入 inspect() 参数是 DOM 元素或者 JS 引用，可以跳转到 Elements 面板并且定位到你选择的那个 DOM 节点那。

image-20210609201540829

③ *$0-4

0，0，1...4，代表5个最近访问过的DOM或者堆对象（HeapObject），4，代表5个最近访问过的DOM或者堆对象（HeapObject），0 是最近访问的。那访问的意思是什么？就是在 Elements 面板被审查或者在 Memory 面板被选择的 DOM 元素或者堆对象

image-20210609201830754

④ $_

$_ 返回上一次表达式执行的结果。举个栗子：

image-20210609202055771

⑤ Event

在 Chrome DevTools 里你可以给 DOM 绑定事件、解绑事件，也能查看 DOM 注册了哪些事件

  • monitorEvents(DOM_element, event)，如果 event 为空的话，那会给选定的 DOM 元素加上所有事件；如果想监听多个事件的话，event 还可以是 Array 类型的变量
  • unmonitorEvents(DOM_element)，为某个 DOM 元素解绑事件
  • getEventListeners(DOM_element)，查看某个 DOM 元素绑定了哪些事件

image-20210609202813407

在上面例子中,我为<p>本人是2021届毕业生</p>注册了一个点击事件并解绑

⑥ debug(function) 与 undebug(function)

在 Console 中调用 debug() 方法，当调用这个方法的时候，就会开启 debug 模式。用 undebug 方法来关闭。

image-20210609203225834

⑥ monitor(function) 与 unmonitor(function)

当调用某个 function 时，Console 会输出这个 function 的名字和参数。

⑦ dir(object) 与 dirxml(object)

dir() 与 console.dir() 一样，dirxml() 与 console.dirxml() 一样。

dir() 将选中元素以对象的形式输出，而 dirxml() 将元素以 xml 的形式输出。

Ⅳ- Console drawer状态查看与修改你的值

ps:Console drawer其实就是在别的面板打开控制台

如果你以为 Chrome DevTools 就简单看看这些值那就太小瞧她了，在中断状态下，还能动态修改变量的值。比如中断处有个变量叫 v，值是 1，如果我直接按 "Resume script execution" 的话，那么下一次的 v 也是 1，但如果我在按恢复执行按钮之前，我在 Console drawer 中输入 v = 2 回车，那么，下一处的 v 就是 2 了。

还有更厉害的，你不仅可以修改变量的值，你还可以修改代码！当程序中断时，你可以在 Sources(断点调试) 面板修改你的代码

avatar
文章
阅读
粉丝