前言
作为一个前端开发，调试对我们来说很重要，以前没有太关注调试方法， 真的是一段console.log走天下的感觉，最近逐渐意识到了调试的重要性以及一些调试方法给研发工作带来的便捷性，因此花了点时间去学习并总结了一下常用的调试技巧。
一、Console
Console 对象提供了浏览器控制台调试的接口。不仅仅提供了log、info、error等我们熟悉的接口，还提供了time、timeEnd、clear等多大24个丰富的接口。
二、浏览器控制台
$_
$_：返回上一个被执行过的值。
$0 - $4
$0、$1、$2、$3、$4五个指令相当于在Elements面板最近选择过的五个el引用。&0表示的是最近一次点击的el，值此类推。利用此方法可以快速在Console面板调试你选中的节点。
$
类似于document.querySelector()，选择指定的节点。
$还有第二个参数，指定从哪个节点开始选择；限定在某个范围内选择，很是实用。
$$
类似于document.querySelectorAll()，使用方法同$。
copy
通过此命令可以将在控制台获取到的内容复制到剪贴板。
keys/values
这两个方法类似于Object.keys，Object.values
keys返回对象所有的键组成的数组。
values返回对象所有的值组成的数组。
monitor & unmonitor
monitor(fn)接收一个函数名作为参数，用于监听函数fn的执行。注意，匿名函数无法进行监听。
当不需要监听fn时，使用unmonitor(fn)取消监听。
三、断点调试
Sources面板
按照按钮顺序依次是：
- 恢复（Resume）： 恢复按钮(第一个按钮)，继续执行，快捷键 F8。继续执行。如果没有其他的断点，那么程序就会继续执行，并且调试器不会再控制程序。
- 跨步（Step over）：运行下一条指令，但不会进入到一个函数中，快捷键 F10。
- 步入（Step into）：快捷键 F11。和“下一步（Step）”类似，但在异步函数调用情况下表现不同，步入会进入到代码中并等待异步函数执行。
- 步出（Step out）：继续执行到当前函数的末尾，快捷键 Shift+F11。继续执行代码并停止在当前函数的最后一行。当我们使用 偶然地进入到一个嵌套调用，但是我们又对这个函数不感兴趣时，我们想要尽可能的继续执行到最后的时候是非常方便的。
- 下一步（Step）：运行下一条语句，快捷键 F9。一次接一次地点击此按钮，整个脚本的所有语句会被逐个执行。下一步命令会忽略异步行为。
- 启用/禁用所有的断点：这个按钮不会影响程序的执行。只是一个批量操作断点的开/关。
- 启用/禁用出现错误时自动暂停脚本执行：当启动此功能并且开发者工具是打开着的时候，任何一个脚本的错误都会导致该脚本执行自动暂停。然后我们可以分析变量来看一下什么出错了。因此如果我们的脚本因为错误挂掉的时候，我们可以打开调试器，启用这个选项然后重载页面，查看一下哪里导致它挂掉了和当时的上下文是什么。
察看（Watch）—— 显示任意表达式的当前值。 你可以点击加号+然后输入一个表达式。调试器将随时显示它的值，并在执行过程中自动重新计算该表达式。
调用栈（Call Stack）—— 显示嵌套的调用链。
作用域（Scope）—— 显示当前的变量。
Local 显示当前函数中的变量，你还可以在源代码中看到它们的值高亮显示了出来。
Global 显示全局变量
debugger命令
const searchList = () => {
// eslint-disable-next-line no-debugger
debugger
state.form.page = 1
getList()
}
breakpoint
直接在Source面板添加断点进行调试。
Conditional breakpoint
给断点添加条件，只有符合条件时，才会触发断点。
条件断点的颜色是橙色。
logpoint
日志断点，当代码执行到这里时，会在控制台输出你的表达式，不会暂停代码执行。日志断点式粉红色。
四、其他调试方法
SSR
当你想要 debug 某个页面上 SSR 渲染的样式时，可以禁用掉 js 的执行。
打开 Source 面板，然后 cmd+p，输入>disable javascript，按回车，然后刷新页面，你的页面就是纯 SSR 状态了。
