最近在出一个前端的体系课程,里面的内容非常详细,如果你感兴趣,可以加我 v 进行联系 yunmz777
:

浪费你几秒钟时间,内容正式开始
当打开 DevTools 并切换到 Console 面板后,可以看到 JS 报错信息。
bash
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 项目:
bash
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 安全策略违规行为,非常适合调试异步交互和页面行为异常的问题。
这些显示的内容,会随着我们的代码不断执行,都是会不断改变的,那么我们如何执行代码的往下执行呢。

在这里有几个控制执行的按钮,从左往右它们分别是:
-
恢复执行
-
单步执行
-
进入函数调用
-
跳出函数调用
-
让断点失效
通过控制代码执行流程,并实时查看调用栈和作用域内的变量,你可以清晰掌握每一步的运行逻辑,大大降低理解复杂逻辑和定位问题的难度。这样调试起来既高效又直观。
如何使用 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
提升调试专注度,调试体验会更加流畅。