关于Chrome断点与调试我所知道的

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

这篇文章类似操作手册，帮助大家调试，提高调试的效率，快速定位问题。

快速定位代码

1. 通过报错进入对应报错代码
2. ctrl  + p 输入对应文件名，选中对应文件后进行调试
3. 控制台直接搜索资源里面的指定方法

断点

普通断点

条件断点

运行到该处且表达式为真就断住，比普通断点更灵活 右键单击代码所在的行左侧，会出现一个下拉框，可以添加一个条件断点。 输入条件表达式，当运行到这一行代码并且表达式的值为真时就会断住，这比普通断点灵活些。

DOM 断点

DOM 的子树变动、属性变动、节点删除时断住，可以用来调试引起 DOM 变化的代码 在 Chrome Devtools 的 Elements 面板的对应元素上右键，选择 break on，可以添加一个 dom 断点，也就是当子树有变动、属性有变动、节点移除这三种情况的时候会断住。可以用来调试导致 dom 变化的代码。

请求断点

请求断点。URL 匹配某个模式的时候断住，可以用来调试请求相关代码。 在 Chrome Devtools 的 Sources 面板可以添加 XHR 的 url 断点，当 ajax 请求对应 url 时就会断住，可以用来调试请求相关的代码。

事件断点

Event Listener 断点。触发某个事件监听器的时候断住，可以用来调试事件相关代码 在 Chrome Devtools 的 Sources 面板还可以添加 Event Listener 的断点，指定当发生什么事件时断住，可以用来调试事件相关代码。

调试

重新发起请求

1. 选中 network
2. 点击 fetch/xhr
3. 选中要重新发送的请求
4. 右键选择 replay xhr

在控制台快速发起请求

1. 选中 network
2. 点击 fetch/xhr
3. 选择 copy as fetch
4. 控制台粘贴代码
5. 修改参数，回车提交

复制 js 变量

代码输出一个复杂对象，且需要复制并发送给别人。 通过直接使用 copy 函数实现 JSON.stringify(obj, null, 2) 打印到控制台，然后再复制。

控制台获取 Element 面板选中元素

1. element 选中要调试的元素
2. 控制台直接使用 $0 访问

网页截屏

1. cmd/ctrl + shift + p => 执行 command 命令
2. 输入 capture full size screenshot 如果要截取选中部分元素，则输入 capture node screenshot

控制台引用上一次执行的结果

// 第1步
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// 第2步
['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// 第3步
['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf
// 使用$_引用上一次操作的结果，不用每次都复制一遍
// 第1步
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// 第2步
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// 第3步
$_.join('') // hsiftaf