vscode本身不运行前端项目，真正运行的是node.js启动的开发服务器（如vite、webpack dev server）；配置核心是让vscode正确调用npm脚本、启用inspect调试并确保sourcemap映射准确，需先验证node/npm可用，再配launch.json以npm run dev方式启动并附加调试器。
VSCode 本身不运行前端项目，它只提供编辑、调试和任务集成能力；真正运行前端项目的，是 Node.js 启动的开发服务器（如 Vite、Webpack Dev Server 或 Express）。配置的核心是让 VSCode 正确调用 Node.js、识别入口脚本、并支持断点调试。
确认 Node.js 已安装且在 PATH 中
这是最常被跳过的一步，但所有后续配置都依赖它。打开 VSCode 内置终端（Ctrl + `），执行：
node -v<br>npm -v
如果报错 command not found 或 'node' is not recognized，说明系统没找到 Node.js —— 即使你本地装了，VSCode 的终端可能没继承正确的环境变量。
- Windows 用户检查安装时是否勾选了
Add Node.js to PATH；没勾选就手动把 Node.js 安装目录（如C:\Program Files\nodejs\）加到系统PATH - macOS/Linux 用户若用
nvm，需确保 VSCode 是从终端启动（code .），否则 shell 配置不会生效 - 别依赖双击打开的 VSCode：它可能绕过 shell 初始化，导致
nvm use不生效
用 npm 脚本启动开发服务器，而非直接 node main.js
现代前端项目几乎不用裸写 node app.js 启动服务。Vite、Create React App、Vue CLI 等都封装在 package.json 的 scripts 里，比如 "dev": "vite" 或 "start": "react-scripts start"。VSCode 调试必须适配这个模式。
使用一条命令部署ProbeChain Rydberg测试网代理节点。自动注册为Agent(NodeType=1)，免gas，支持macOS/Linux/Windows。触发词：/r
- 确保项目根目录有
package.json，且含有效启动脚本（如"scripts": { "dev": "vite" }） - 在 VSCode 终端中运行
npm run dev能成功启动服务，是调试前的必要验证 - 不要在
launch.json里硬编码program指向vite.js—— 它路径深、版本变动大；应使用runtimeExecutable+runtimeArgs调用npm
配置 launch.json 以调试启动脚本
VSCode 的 Node.js 调试器默认只懂“直接运行 JS 文件”，但前端框架启动逻辑复杂（要 spawn 子进程、监听文件变化），必须用 attach 模式或正确配置 npm 启动。
推荐配置（适用于 Vite / CRA / Vue CLI）：
{<br> "version": "0.2.0",<br> "configurations": [<br> {<br> "type": "node",<br> "request": "launch",<br> "name": "npm: dev",<br> "runtimeExecutable": "npm",<br> "runtimeArgs": ["run", "dev"],<br> "console": "integratedTerminal",<br> "skipFiles": ["<node_internals>/**"],<br> "env": { "NODE_OPTIONS": "--inspect-brk" }<br> }<br> ]<br>}</node_internals>
-
runtimeExecutable设为npm，不是node—— 这样才能走package.json的脚本逻辑 -
env.NODE_OPTIONS加--inspect-brk强制子进程也启用调试器，否则 Vite 启动的 server 进程无法被 VSCode 附加 -
console: "integratedTerminal"让输出可见，方便看端口、HMR 状态等 - 别用
program字段指向框架二进制（如node_modules/.bin/vite）—— 它在不同平台路径不同，且 Windows 下是批处理文件，VSCode 无法直接 debug
前端代码断点为何不触发？关键在 sourcemap 和工作区设置
即使后端服务能调试，你在 src/App.jsx 打的断点也可能不命中 —— 这不是 VSCode 问题，而是构建工具 sourcemap 未正确映射或 VSCode 没识别源码位置。
- 检查浏览器开发者工具 Sources 面板，能否展开
webpack://或vite://协议下的源码；不能则构建配置有问题（如 Vite 的build.sourcemap关闭了） - VSCode 需要正确解析
sourceRoot和sources字段，确保launch.json中webRoot指向项目根目录（对纯前端项目通常不用设，但若用 Express 托管静态资源，就得设为${workspaceFolder}/public） - 禁用插件干扰：某些 Live Server 或 Code Runner 插件会劫持
Ctrl+F5，导致非调试模式刷新，断点失效
真正的难点不在配置步骤，而在于理解「谁在运行代码」：是 VSCode 直接执行，还是 npm 调用脚本，脚本再 fork 出 Vite 进程，Vite 再加载你的源码？每层都可能断开调试链路。盯住终端输出里的 Debugger listening on ws:// 地址，才是判断调试是否真正 attach 成功的唯一依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
