Chrome Developer Tools 开发者工具实用调试技巧

copy 复制断点处作用域的变量值

在 debugger 模式下，可以直接在控制台打印当前断点处作用域内的变量。

如果想复制相关变量的值，有两种快捷方法：

1. 在控制台中输入 copy(<变量名>)
2. 在控制台中输入该变量名，打印出该变量，在其上右键选择第一项 Copy Object

如此操作后该变量值即被复制到剪切板中了。

条件断点

debugger 指定位置的代码，右键选择修改断点 -> 条件断点，设置条件断点表达式。当表达式满足条件时才会断点暂停。

快速查找调试文件 Ctrl+p

在开启了 SourceMap 的情况下，可以还原代码的源文件且可以进行断点调试。
在记住了要调试代码的文件路径的前提下，使用快捷键 Ctrl+p 可以进入文件搜索模式。

控制台 Console 中的 $ 符号

获取Elements面板选中的元素

点击元素选择箭头或快捷键 Ctrl+Shift+C 可以进入元素选择模式。

元素节点快速选择：$0~$4 缓存了最近五次点击选中的元素节点。

$('.selector') 和 $$('.selector')

类似 document.querySelector 的节点快速选择器：

• $() -> document.querySelector()
• $$() -> document.querySelectorAll()

$_ 最近一次执行结果的引用

返回最近一次执行结果的引用。示例：

document.querySelector('video');
$_.requestPictureInPicture(); // 视频画中画播放

await fetch('/xxx');
await $_.json();

$x(xpath, context = document) xpath 快速选择器

是 document.evaluate 的一个快捷封装，返回一个命中的 DOM 节点的数组列表。示例：

$x(`//div[@id='main']/div/span/text()`)

• // 表示多级 path 匹配，/ 则只匹配一级 path
• @ 表示取元素属性 = 后面的值匹配
• text() 表示取 span 中的文本节点

console-importer 安装 npm 库到页面中

console-importer 是一个开源的 Chrome 扩展，安装后会在页面注入全局函数 $i。
在控制台执行$i() 可以从 CDN 加载指定的 npm 库到当前页面上。如：

// 在当前页面快速引入 jquery
$i('jquery');

getEventListeners(DomNode) 获取元素绑定的事件

如获取最近一次选中元素的绑定事件： getEventListeners($0)。这在开发时对元素节点的快速调试非常有用。

Preserve Log： 保留控制台中打印的 Log

当页面刷新时，Console 控制台中的打印信息默认会被清空。点击调试面板右侧的齿轮设置按钮，展开的面板中选中 Preserve Log，则可以在页面刷新时仍保留的打印信息。

inspect($('.selector')) 快速定位到指定的 DOM 节点

开发模式下，对于页面较为复杂又需频繁调试某子节点的样式，一般你可能会用鼠标点击箭头的方式去选取节点。
在不想使用频繁切换使用鼠标的情况下，此方法可以说是非常快捷方便了。

请求重放：Replay XHR 重新发送

• Network 面板选中 Fetch/XHR，选中要重新发送的请求
• 右键选择 Replay XHR

请求重放与复制：复制请求并修改参数重新发送

• Network 面板选中 Fetch/XHR，选中要重新发送的请求
• 右键选择 Copy -> Copy as fetch（复制 -> 以 fetch 格式复制）
• 在控制台粘贴代码，修改参数，然后回车执行

快速截图

全屏截图

• 打开控制台，按快捷键 cmd + shift + p
• 在打开的 Command 命令输入框中输入 Capture full size screenshot 并回车（中文控制台可输入关键字 "截图"）

选中元素截图

• 选中要截图的元素节点
• 打开控制台，按快捷键 cmd + shift + p
• 在打开的 Command 命令输入框中输入 Capture node screenshot 并回车