在VSCode中调试React应用需配置launch.json并使用Chrome扩展。先安装Node.js、VSCode及Debugger for Chrome插件，创建React项目后，在运行视图新建launch.json，配置type为chrome、url为http://localhost:3000、webRoot指向src目录。保存后启动npm start，再在VSCode中选择配置并启动调试，即可在代码中设置断点进行调试。
在VSCode中调试React应用，最常用的方式是结合Chrome浏览器和Debugger for Chrome扩展。以下是具体操作步骤，帮你快速配置并启动调试。
安装必要的工具
确保你已准备好以下环境：
- Node.js 和 npm：React项目依赖它们运行
- VSCode：推荐使用最新版本
- Debugger for Chrome 扩展：在VSCode扩展市场中搜索并安装
- React应用：通常通过 create-react-app 创建
配置 launch.json 文件
这是调试的核心配置文件。在VSCode中按以下步骤创建：
- 打开你的React项目
- 点击左侧的“运行”图标（或按 Ctrl+Shift+D）
- 点击“创建 launch.json 文件”
- 选择“Chrome”环境
然后将内容替换为以下配置：
{ "version": "0.2.0", "configurations": [ { "name": "调试React应用", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } ] }说明：url 是你React应用运行的地址，webRoot 指向源码目录，确保断点能正确映射。
Vuex参考手册 中文CHM版
下载
Vuex是一个专门为Vue.js应用设计的状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更。它可以与 Vue 官方开发工具扩展(devtools extension) 集成，提供高级特征，比如 零配置时空旅行般（基于时间轴）调试，以及状态快照 导出/导入。本文给大家带来Vuex参考手册，需要的朋友们可以过来看看！
开始调试
按照以下流程启动调试会话：
- 在终端运行 npm start 启动React应用
- 等待浏览器自动打开（通常是 http://localhost:3000）
- 回到VSCode，进入“运行”视图
- 选择“调试React应用”，点击绿色三角按钮启动调试器
此时Chrome会被新实例启动，并连接到VSCode。你可以在 .js 或 .tsx 文件中设置断点，执行到断点时代码会暂停，方便查看变量、调用栈等信息。
常见问题处理
如果断点显示为灰色或无法命中，检查以下几点：
- 确认 webRoot 路径是否正确指向 src 目录
- 确保没有多个Chrome实例占用调试端口
- 尝试在 launch.json 中添加 "runtimeExecutable": "google-chrome"（Linux/Mac）
- 关闭其他Chrome窗口，避免端口冲突
基本上就这些。只要配置好 launch.json 并正确启动，VSCode调试React应用就很顺畅。不复杂但容易忽略细节。
