VSCode无法直接调试Web Worker，必须通过Chrome DevTools Workers面板配合正确source map路径映射；需用new Worker()实例化、配置sourceMapPathOverrides精准匹配URL与本地路径，并手动打开Workers独立调试窗口。
VSCode 本身不直接调试 Web Worker，必须依赖 Chrome DevTools 的 Workers 面板 + 正确的 source map 路径映射，否则断点静默失效、console.log 不输出、debugger 被跳过。
Web Worker 必须用 new Worker() 加载，不能 import
常见错误是把 Worker 当普通模块引入：
-
import { doWork } from './worker.ts'—— 这只是静态导入，根本没创建 Worker 线程，自然无法调试 - 正确方式必须触发浏览器 Worker 实例化：在 Vite 项目中写
const worker = new Worker(new URL('./counter.worker.ts', import.meta.url), { type: 'module' }) - 若 Worker 是
.js文件且非 module，去掉{ type: 'module' }，否则报Failed to construct 'Worker' - 确保 Worker 内部有
self.onmessage或self.addEventListener('message', ...)，否则通信链路断开，调试面板无法激活
sourceMapPathOverrides 配置错，断点永远对不上
VSCode 断点生效的前提，是让调试器知道 Chrome DevTools 里显示的 source URL（比如 webpack:///src/workers/counter.worker.ts 或 http://localhost:5173/src/workers/counter.worker.ts）对应你本地哪个文件。
- Webpack 项目：在
.vscode/launch.json中配置"webpack:///./src/*": "${webRoot}/src/*"和"webpack:///./workers/*": "${webRoot}/workers/*" - Vite 项目：Worker 默认走 HTTP URL 加载，source URL 形如
http://localhost:5173/src/workers/counter.worker.ts，对应配置"http://localhost:5173/src/*": "${webRoot}/src/*" - 路径末尾的
/*不能漏，否则映射失败；webRoot必须指向项目根目录，不是src目录 - 检查 Chrome DevTools 的 Sources 面板 → 左侧树状结构里能否展开 Worker 文件，若显示为灰色或无内容，说明映射失败
调试入口必须是 Chrome 启动，且手动打开 Workers 面板
VSCode 的 type: "chrome" 配置只是桥梁，真正调试上下文在 Chrome 里。
- launch.json 中
"type": "chrome"、"url": "http://localhost:5173"、"webRoot"和"sourceMapPathOverrides"四者缺一不可 - 启动调试后，必须手动打开 Chrome DevTools → 右上三点菜单 → More tools → Workers，找到对应 Worker 并点击“inspect”打开独立调试窗口
- VSCode 中设置的断点，只有在这个独立 Worker DevTools 窗口中才会命中；主线程 DevTools 的 Console 不显示 Worker 的
console.log - 如果 Worker 报错（如
Uncaught ReferenceError），错误只出现在 Workers 面板的 Console 中，主线程看不到
真正麻烦的不是配置项数量，而是路径映射和加载方式必须完全匹配——Vite 的 new URL(..., import.meta.url)、Webpack 的 new Worker('/path/to/worker.js')、甚至 blob: URL 加载方式，对应的 source URL 格式完全不同，sourceMapPathOverrides 必须一一对应，差一个斜杠或协议头都会让断点失效。
