前端调试入门

调试的定义

调试其实是非常重要的开发的通用型的能力，而这往往被大多数开发人员忽略。

首先看一下调试的定义：

代码在某个平台运行，把运行时的状态通过某种方式暴露出来，传递给开发工具做 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 代码