VSCode调试JavaScript断点失效或变量异常时，可依次尝试：一、启用Auto Attach自动附加调试；二、配置launch.json通过Chrome调试前端；三、修复sourcemap映射；四、向运行中Node进程发送SIGUSR1信号并手动附加。
如果您在使用 VSCode 调试 JavaScript 代码时无法命中断点或变量值显示异常，则可能是由于调试配置、运行环境或源码映射未正确设置。以下是多种可立即验证的调试操作方案：
本文运行环境：MacBook Air，macOS Sequoia。
一、启用自动附加模式（无需 launch.json）
此方法适用于直接在终端中运行 node 脚本或通过 npm script 启动的进程，VSCode 可在进程启动瞬间自动连接调试器，避免手动配置文件的依赖。
1、打开 VSCode 命令面板（Command + Shift + P）。
立即学习“Java免费学习笔记（深入）”；
2、输入并选择 Debug: Toggle Auto Attach，将其设为 on。
3、在终端中执行 node --inspect-brk script.js 或 npm run dev（若脚本含 --inspect 参数）。
4、VSCode 将自动附加调试会话，断点立即生效。
二、配置 launch.json 使用 Chrome 调试前端页面
当调试浏览器中运行的 HTML + JS 页面时，需通过 Chrome Debugging Protocol 建立连接，确保源码映射与实际加载路径一致。
1、在项目根目录创建 .vscode/launch.json 文件。
2、填入以下配置：
{ "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", "request": "launch", "name": "Launch Chrome against index.html", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}", "sourceMapPathOverrides": { "webpack:///./src/*": "${webRoot}/src/*" } } ] }
3、确保本地已启动 HTTP 服务（如 npx serve -s 或 python3 -m http.server 8080）。
4、按 F5 启动调试，Chrome 自动打开并加载页面，断点可被识别。
三、修复 sourcemap 不匹配导致断点失效
Webpack、Vite 或 TypeScript 编译后的代码若 sourcemap 未正确生成或路径映射错误，VSCode 将无法将断点定位到原始源文件。
1、检查构建工具输出目录中是否存在 .map 文件（如 main.js.map），且其内容包含有效的 sources 字段。
2、在 tsconfig.json 中确认已启用："sourceMap": true, "inlineSourceMap": false, "outDir": "./dist"。
3、在 launch.json 的对应配置中添加 "sourceMaps": true 和精确的 "sourceMapPathOverrides" 映射规则。
4、重启调试会话，重新加载页面后验证断点是否转为实心红点。
四、使用 debug 模式启动 Node.js 进程并手动附加
适用于已运行的长期服务（如 Express 应用），无需重启进程即可注入调试器，适合生产环境排查临时问题。
1、在终端中向正在运行的 Node 进程发送 SIGUSR1 信号：kill -SIGUSR1
2、打开 VSCode 命令面板，选择 Debug: Attach to Node Process。
3、从进程列表中选择目标进程（名称含 --inspect 或端口号如 9229）。
4、连接成功后，可在任意已加载模块中设置断点，包括动态 require 的文件。
