调试的定义
调试其实是非常重要的开发的通用型的能力,而这往往被大多数开发人员忽略。
首先看一下调试的定义:
代码在某个平台运行,把运行时的状态通过某种方式暴露出来,传递给开发工具做 UI 的展示和交互,辅助开发者排查问题、梳理流程、了解代码运行状态等。
- 某个平台,可以是浏览器、Node.js、Electron、小程序等任何能执行 JS 代码的平台
- 暴露出的运行时状态,可能是调用栈、执行上下文,或者 DOM 的结构,组件的状态等
- 暴露出这些数据的方式一般是通过基于 WebSocket 的调试协议
接下来看一下前端最常用的两种调试方式:console 和 breakpoint
console 控制台
console.log: 在控制台输出内容,假设有多个变量需要输出,直接输出没办法查看对应名称,可以添加一个中括号console.log({name,sex,age})
const name = "小明";
const age = 20;
const sex = "女";
console.log(name, sex, age)
// 小明 20 女
console.log({name, sex, age})
// { name:"小明",sex:"女",age:20 }
console.warn:在控制台输出警告信息,用于代码存在不合理或不符合规范但不影响系统运行的提示console.error:在控制台输出错误信息,用于代码错误和异常的提示console.time和console.timeEnd:配合使用,用于计算代码段的执行时间,有助于性能调试和判断
console.time();
let sum = 0;
for (let i = 0; i < 10000; i ++) {
sum += i;
}
console.timeEnd();
console.dir:对于DOM节点的打印输出,如果采用console.log会以标签的形式输出,和直接查看没有太大的差异,如果想要查看DOM相关事件和属性,可以采用console.dir输出DOM节点对应的js对象映射console.table:可以将数组(或者是类数组的对象,或者就是一个对象 )打印成一个表格
breakpoint 断点
- 手动在代码块中写入debugger,但是不需要断点的时候,需要删除掉对应的断点代码
- 普通断点:在想断住的那一行左侧单击一下就可以添加一个断点,运行到该处就会断住
- 条件断点:右键单击代码所在的行左侧,会出现一个下拉框,可以添加一个条件断点。输入条件表达式,当运行到这一行代码并且表达式的值为真时就会断住
- DOM 断点:在 Chrome Devtools 的 Elements 面板的对应元素上右键,选择 break on,可以添加一个 dom 断点,也就是当子树有变动、属性有变动、节点移除这三种情况的时候会断住。可以用来调试导致 dom 变化的代码
- Event Listeners 打断点:在 Chrome Devtools 的 Elements 面板上找到想排查的 dom 节点,右侧面板 Event Listeners 中会有当前阶节点,可以当前节点打断点调试
- 异常断点:在 Debugger 面板勾选 Uncaught Exceptions 和 Caught Exceptions 可以添加异常断点,在抛出异常未被捕获或者被捕获时断住,用来调试一些发生异常的代码时很有用
- Event Listener 断点:在 Chrome Devtools 的 Sources 面板还可以添加 Event Listener 的断点,指定当发生什么事件时断住,可以用来调试事件相关代码。比如拖拽事件、媒体事件断点
简单介绍一下断点调试操作,操作按钮从左到右依次是:
恢复执行、单步执行、进入函数调用、跳出函数调用、单步调试、让断点失效、在异常处断住

浏览器web项目的调试掌握上述已经可以通过调试解决大部分问题,接下来了解一下node项目的调试。
Node.JS调试
先准备一段简单的Node.JS代码
const fs = require('fs/promises');
(async function() {
const fileContent = await fs.readFile('./package.json', {
encoding: 'utf-8'
});
await fs.writeFile('./package2.json', fileContent);
})();
以调试模式启动需要加参数:–inspect 是以调试模式启动,–inspect-brk 是以调试模式启动并且在首行断住
node --inspect-brk ./index.js
它打印了 ws 的地址,这就是调试的服务端,接下来找个对接它的调试协议的客户端连上就行了

用 Chrome DevTools 调试 node 代码
打开 chrome://inspect/#devices,下面列出的是所有可以调试的目标,也就是 ws 服务端

可以看到已经这里列出了启动的 node 脚本,这是因为在网络端口里自动加上了 node 的 ws 调试服务的端口,node 调试服务默认是跑在 9229 端口,也可以自定义端口号 --inspect-brk=8888,然后手动把这个端口加到这个配置弹出框里面来就行了

点击 inspect 就可以调试我们刚刚写的 node 脚本了

但是在 Chrome DevTools 里调试,然后在 VSCode 里写代码,这俩是分离开的,切来切去不方便的,因此来试试用 VSCode Debugger 调试 node 代码
用 VSCode Debugger 调试 node 代码
首先创建 .vscode/launch.json 的调试配置文件,然后添加一个 node 类型的 attach 的调试配置,端口改成 ws 服务启动的端口 8888。点击 debug 启动,VSCode Debugger 就会连接上 8888 的调试端口开始调试,可以边调试边修改代码。
能调试还能修改代码,这是比 Chrome DevTools 更好用的地方,因此一般使用 VSCode Debugger 来调试 Node.js 代码
