开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情
这篇文章类似操作手册，帮助大家调试，提高调试的效率，快速定位问题。
基础操作
| 操作类型 | 快捷键/说明 |
|---|---|
| 控制台：全局copy方法 | copy(window.location) 复制任何对象到剪切板 |
| 控制台：查询Dom元素 | $ <-> document.querySelector; $$ <-> document.querySelectorAll |
| 控制台：安装npm包 | $i('lodash') |
| Store as global 存储为全局变量 | 右键会出现这个选项 |
控制台引用上一次执行的结果
// 第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
复制 js 变量
代码输出一个复杂对象，且需要复制并发送给别人。
通过直接使用 copy 函数实现 JSON.stringify(obj, null, 2) 打印到控制台，然后再复制。
控制台获取 Element 面板选中元素
- element 选中要调试的元素
- 控制台直接使用 $0 访问
搜索
| 操作类型 | 快捷键/说明 |
|---|---|
| 内容搜索查找 | Ctrl+F。元素、控制台、源代码、网络都支持。 |
| 知道文件名，定位代码 | ctrl + p 输入对应文件名，选中对应文件后进行调试，控制台直接搜索资源里面的指定方法 |
| 知道方法名，定位代码 | 控制台 三个点，选择 search |
Command面板
Ctrl + Shift + p，常用的功能是元素截图，只要搜索“截图”，全屏截图、指定节点截图。或者选中元素之后，右键菜单选择“捕获节点屏幕截图”。
网页截屏
- cmd/ctrl + shift + p => 执行 command 命令
- 输入 capture full size screenshot 如果要截取选中部分元素，则输入 capture node screenshot
断点
普通断点
条件断点
运行到该处且表达式为真就断住，比普通断点更灵活 右键单击代码所在的行左侧，会出现一个下拉框，可以添加一个条件断点。 输入条件表达式，当运行到这一行代码并且表达式的值为真时就会断住，这比普通断点灵活些。
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 的断点，指定当发生什么事件时断住，可以用来调试事件相关代码。
监听变量
控制台里的眼睛图标，相当于添加了一个动态表达式，然后实时监控（显示）该表达式的值。
调试
重新发起请求
- 选中 network
- 点击 fetch/xhr
- 选中要重新发送的请求
- 右键选择 replay xhr
在控制台快速发起请求
- 选中 network
- 点击 fetch/xhr
- 选择 copy as fetch
- 控制台粘贴代码
- 修改参数，回车提交
调试线上代码
创建本地工作目录
- 源代码 source 下面找到“覆盖（Override）”
- 然后点击“选择替代文件夹”，添加一个本地空的文件夹，作为本地工作目录。
- 添加后要注意要确认授权。
创建源代码的本地副本
- 选择需要修改的源代码右键“保存以备替代”，就会在本地目录创建副本文件，网页使用本地的JS文件。
还有种办法是使用 chrome xswitch 插件 或者 Charles 将远程资源替换为本地资源。
路由更改时暂停执行
- 单页面应用路由跳转
const dbg = () => {
debugger;
};
history.pushState = dbg;
history.replaceState = dbg;
window.onhashchange = dbg;
window.onpopstate = dbg;
- 直接调用
window.location.replace/assign
debug(window.location.replace);
debug(window.location.assign);
设置浏览器跳转新的标签页自动打开控制台
