VSCode如何调试React应用_VSCode打通浏览器与编辑器断点【指南】-VSCode-PHP中文网

断点打不进app.jsx，首要确认chrome是否被vscode调试协议接管；若断点显示“unbound breakpoint”或浏览器复用标签页，则说明调试会话未建立或sourcemap路径映射失败，需严格校验launch.json中url、webroot和sourcemappathoverrides三者与实际运行环境一致。

vscode如何调试react应用_vscode打通浏览器与编辑器断点【指南】

断点打不进 App.jsx？不是插件没装好，而是 VSCode 和 Chrome 根本没对上号——调试器没接管浏览器，或者 sourcemap 路径映射错位了。

Chrome 调试器连上了吗？别猜，直接看

VSCode 不运行浏览器，只发指令；断点是否生效，取决于 Chrome 是否真被调试协议接管。常见表现是：断点显示空心圆、悬停提示 “Unbound breakpoint”，或 F5 后浏览器一闪而过。

先手动启动项目：npm start（CRA）、vite（Vite）或 next dev（Next.js），确保 http://localhost:3000 能正常打开
在 VSCode 中按 Ctrl+Shift+P → 输入 “Debug: Open launch.json” → 选 pwa-chrome（不是旧版 chrome 类型）
启动调试后，必须看到 Chrome 弹出**全新窗口**（不是复用已有标签页）——复用页不会加载 sourcemap
打开 Chrome DevTools → Sources 面板 → 展开左侧 localhost → 找有没有 webpack:// 或 app:// 前缀的源码树；没有就说明 sourcemap 根本没生成或没加载

`launch.json` 里这三项必须严丝合缝

配置不是复制粘贴就能用，url、webRoot、sourceMapPathOverrides 三者必须和你实际运行环境完全一致，差一个斜杠都可能断点失效。

Orderly Sdk React Hooks

Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。

下载

url 必须和你手动访问的地址完全一致（含协议、域名、端口），比如 "http://localhost:3000"，不能写成 "http://127.0.0.1:3000" 或漏掉 http://
webRoot 推荐用 "${workspaceFolder}"，不是 "${workspaceFolder}/src" —— CRA 中后者常导致路径错位；若入口 HTML 在 public/index.html，且开发服务器服务的是 public/ 目录，则 webRoot 应为 "${workspaceFolder}/public"
sourceMapPathOverrides 不是可选项，是救命项：在组件里加一行 debugger;，刷新页面，在 Chrome DevTools 的 Sources 面板右键文件 → “Reveal in Sidebar”，看路径显示的是 webpack:///./src/App.jsx 还是 webpack:///src/App.jsx，再对应写：
- 若显示 webpack:///./src/* → {"webpack:///./src/*": "${webRoot}/src/*"}
- 若显示 webpack:///src/* → {"webpack:///src/*": "${webRoot}/src/*"}

为什么断点总停在 `bundle.js` 里？

这不是断点位置问题，是 sourcemap 没被识别，调试器被迫退回到编译后代码。本质是构建层没输出可用映射，或 VSCode 找不到原始路径。

CRA：确认用的是 npm start（不是 npm run build），它默认启用 devtool: 'source-map'
Vite：检查 vite.config.ts 是否有 build: { sourcemap: true }；开发时必须用 vite 命令启动，不能用 vite build
Webpack 自定义项目：devtool 不能是 'eval' 或 false，推荐 'cheap-module-source-map'，且 mode 必须为 'development'
Chrome DevTools 设置里要勾选 “Enable JavaScript source maps”（Settings → Preferences → Sources）
如果 useEffect(() => {}, []) 第一行断点停在 React.createElement 调用栈里，说明 sourceMapPathOverrides 没生效，或 webRoot 指向错误目录