VSCode插件调试Esbuild加速技巧-VSCode-PHP中文网

必须配置sourcemappathoverrides映射路径，如{"webpack:///./src/": "${webroot}/src/"}，并确保esbuild启用--sourcemap、launch.json设sourcemaps: true且禁用resolvesourcemaplocations，才能使断点命中源码。

vscode插件调试esbuild加速技巧

不能直接用插件调试 esbuild 本身，但可以高效调试用 esbuild 打包的项目——关键在 launch.json 配置、sourceMap 路径映射、以及绕过 VSCode 对 stdin 和 PATH 的隐式限制。

launch.json 怎么配才能让断点打到源码上

esbuild 默认生成的 sourcemap 是内联或单独 .js.map 文件，但 VSCode 调试器找不到源码位置，是因为路径没对齐。不配 sourceMapPathOverrides，断点只会停在 dist/bundle.js 上，无法跳转回 src/index.ts。

在 .vscode/launch.json 的配置里必须加 "sourceMapPathOverrides" 字段
若 esbuild 输出时用了 --sourcemap=inline 或 --sourcemap=true，且入口是 src/index.ts，推荐映射写法：{"webpack:///./src/*": "${webRoot}/src/*"}
如果构建输出路径含 out 或 build，比如 out/main.js，对应改写为：{"webpack:///./src/*": "${webRoot}/src/*", "webpack:///./out/*": "${webRoot}/out/*"}
别依赖 outFiles 自动推导——esbuild 不写 sourcesContent 时，VSCode 会读不到原始代码

为什么 attach 模式下断点全灰、变量监视为空

现象是调试器连上了，但所有断点变空心、console.log 输出正常、变量面板显示 Unavailable。根本原因是 esbuild 没生成可用的 source map，或生成了但未被正确加载。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

确认 esbuild 命令中明确加了 --sourcemap（不是 --sourcemap=external 就够，还得确保没被其他参数覆盖）
检查输出目录是否真有 .js.map 文件；若用 --outdir，确保它和 .js 文件同级且命名一致（如 dist/index.js 对应 dist/index.js.map）
在 launch.json 中设 "sourceMaps": true，且不要同时开 "resolveSourceMapLocations"——它在 esbuild 场景下常导致路径解析失败
避免在 tsconfig.json 里设 "sourceMap": false，否则 esbuild 可能跳过生成（尽管它本可忽略 tsconfig）

tasks.json 构建 + launch.json 调试，怎么串成一键流程

VSCode 没有原生“构建完自动调试”链路，但可以用 dependsOn 和 group 把 tasks 组织起来，避免手动切窗口、等构建完成再按 F5。

先在 tasks.json 中定义一个构建任务，"label": "build:esbuild"，并设 "group": "build" 和 "isBackground": false
在 launch.json 的调试配置里加 "preLaunchTask": "build:esbuild"，这样按 F5 会先跑构建，成功后再启动调试
构建任务里必须用 "type": "shell"（不是 "process"），否则 Windows 下 && 连接符失效，npx esbuild ... && node dist/index.js 会卡在前半截
如果构建耗时较长，可在 task 中加 "problemMatcher": ["$esbuild"]，让错误实时出现在 PROBLEMS 面板，而不是等整个命令退出才报

调试时 import 报错或 React 开发警告消失

常见于用 --define 替换环境变量后，process.env.NODE_ENV 在运行时是 undefined，导致 React 进入生产模式、警告全无，或 ESM 动态 import 失败。

esbuild 的 --define 只做字面量替换，不会注入全局对象。若代码里写了 process.env.NODE_ENV，需同时定义 process 和 globalThis.process：
--define:process.env.NODE_ENV="development"
--define:globalThis.process.env.NODE_ENV="development"
若用 import 语法但目标是 CJS 模块，esbuild 默认不处理 interop，需加 --platform=node --format=cjs，否则调试时 require 可能返回 { default: module } 导致 default 访问出错
TSX 项目务必在 tsconfig.json 设 "jsx": "preserve"，否则 TS Server 和 esbuild 对 JSX 的理解错位，断点可能打在转换后的 JS 上，而非你写的 TSX 行