调试代码,是每个前端逃不过的必修课

当打开 DevTools 并切换到 Console 面板后，可以看到 JS 报错信息。

Uncaught TypeError: Cannot read property 'name' of undefined
    at main.js:24

比如上面这个例子表示尝试访问 undefined 的 name 属性导致错误。TypeError 是错误类型，说明操作的数据类型不符合预期。错误位置在 main.js 的第 24 行，点击文件名即可跳转到源码中对应位置，方便进一步调试。

为什么需要断点调试（Debugger）

使用 console.log 调试往往只能“看到结果，却看不到过程”——虽然能看到报错时的堆栈，但关键的中间态早已丢失，尤其在异步或事件驱动场景下尤为明显。

由于日志是静态的，Promise、定时器、事件回调等的执行顺序和竞态条件很难还原。频繁插入打印语句不仅需要修改和重构部署，还容易淹没关键信息，甚至因为“观察本身改变行为”引发所谓的海森堡式 Bug。

同时，日志对复杂对象结构的可观察性较差，像闭包、原型链、getter/setter 等都不直观。再加上线上代码经过压缩混淆，若缺少 SourceMap，更加难以准确定位和调试。

断点调试的最大优势在于能精确暂停，按需捕获可疑逻辑、异步调用和复杂时序问题，并实时查看变量、作用域与调用栈，无需改代码也不会污染日志。配合条件断点、Async Stack Trace 与 SourceMap 等功能，更能高效还原 Bug 发生的真实因果链。

如何使用 Chrome DevTools 调试 React 项目

接下来我们将使用 React 项目为例，我们使用 Vite 来创建一个 React 项目：

pnpm create vite

创建完成之后我们安装依赖启动项，它会运行在浏览器的 5173 端口：

打开 Chrome DevTools，在 Sources 面板找到 src/main.tsx，打上个断点，我们可以在想调试的代码里的前面红色框的位置点击一下然后刷新，就可以出现如下页面了：

只要刷新了，就会出现这样的效果了。

这里的 Breakpoints 表示是断点管理区，main.tsx 表示我们设置了一个断点在 React 组件 <App /> 所在行（第 8 行）

Scope（作用域）展示了当前断点下可访问的变量，包括模块级变量（如 App 组件函数、StrictMode、createRoot 等）以及由 Vite 和 React 开发环境注入的内部工具函数；同时还包含浏览器的全局对象（如 window），但默认折叠隐藏。

Call Stack（调用栈）用于展示当前代码的执行路径，显示函数是如何一步步被调用到当前位置的；当前命中的是 main.tsx:8 中的匿名函数，这有助于向上追踪调用来源，尤其在调试异常或定位复杂逻辑时非常关键。

其他 Breakpoints 区域提供了多种高级断点工具，尽管你当前未启用，但它们能用于拦截网络请求（XHR/Fetch）、监听 DOM 变动或事件触发（如点击、键盘操作），也可监控全局事件和 CSP 安全策略违规行为，非常适合调试异步交互和页面行为异常的问题。

这些显示的内容，会随着我们的代码不断执行，都是会不断改变的，那么我们如何执行代码的往下执行呢。

在这里有几个控制执行的按钮，从左往右它们分别是：

1. 恢复执行

2. 单步执行

3. 进入函数调用

4. 跳出函数调用

5. 让断点失效

通过控制代码执行流程，并实时查看调用栈和作用域内的变量，你可以清晰掌握每一步的运行逻辑，大大降低理解复杂逻辑和定位问题的难度。这样调试起来既高效又直观。

如何使用 Vscode 调试 React 项目

Chrome DevTools 在调试过程中存在编辑调试分离、断点不持久、类型信息缺失等局限，尤其在调试大型或框架项目时体验不佳。而 VSCode 提供了集成式调试方案，支持持久断点、类型补全与原生代码导航，让你在一个界面内高效完成问题排查。

首选我们要在项目的根目录中创建 .vscode/launch.json 文件：

在这里我们可以执行添加配置，选择我们需要的类型，这里我们选择 Chrome: 附加，这适用于通过 npm run start 启动的 React 应用，VSCode 可附加到已打开的 Chrome 页面，实现断点调试、变量查看与调用栈分析

但是用这种方式只是给我们创建了一个基础的模板，我们之后还可以修改的：

然后进入 Debug 窗口，点击启动，你会发现这里就有我们定义的调试选择了：

现在我们只需要在我们要执行的代码中添加 debugger 就可以开始调试了：

继续回到调试页面：

启动之后，你会发现它自动帮我们启动了项目并且也出现了控制执行的按钮：

打开浏览器就可以看到我们刚才一样的效果了：

这个跟我们之前执 Chrome DevTools 一样，同样我们也可以在浏览器中直接执行下一步之类的操作。

但是这种方式有一个弊端，只能在浏览器上添加，并且需要添加 debugger 代码才能执行，现在我们需要一种更简洁的方式：

launch 会由 VSCode 自动启动一个新的 Chrome 并打开指定页面，适合本地开发时快速调试；而 attach 需要你先手动启动并配置好 Chrome，VSCode 再连接到已有页面进行调试。

我们要添加这样的代码：

添加 skipFiles 后，使用 Step Into（F11） 调试时，调试器会自动跳过这些我们忽略的文件，直接跳到我们的业务代码。

在这里我们直接可以使用断点来进行启动了，当调试开启之后，你会发现它启动了一个新的浏览器进行调试：

你也可以看到，之前在浏览器上才有的信息，到现在也能直接在 vscode 上看见了：

这样就比浏览器上看代码方便多了。

当鼠标移动过去的时候，也能显示对应的值。

总结

在调试 React 项目时，VSCode 提供了两种方式：launch 可自动启动 Chrome 并打开页面，使用简单，适合本地开发调试；而 attach 则需手动启动带调试端口的 Chrome，适合更复杂的场景。通过配置 launch.json，你可以设置断点、跳过第三方库（如 node_modules），并在编辑器中查看变量与调用栈。

相比 Chrome DevTools，VSCode 调试集成度更高，避免频繁切换窗口，效率更优。注意使用 skipFiles 提升调试专注度，调试体验会更加流畅。

“

最近我刚把 React 源码专栏写完，如果你感兴趣，可以私聊我进行学习