Angular库+Storybook在VSCode中调试异常问题求助

针对你遇到的断点触发异常、无法找到TS文件、angular.json添加sourceMap报错的问题，按以下步骤排查修复：

1. 完善Storybook及库的TS配置 #

• 打开.storybook/tsconfig.json，确保compilerOptions中包含：

  "compilerOptions": {
    "sourceMap": true,
    "inlineSources": true,
    // 其他已有配置...
  }
  

  inlineSources会让sourcemap包含原始TS代码，帮助调试器精准映射文件。
• 检查库根目录（如projects/your-lib/tsconfig.json）的compilerOptions，同样确保sourceMap: true，且outDir指向正确的编译输出目录（比如"outDir": "../../dist/your-lib"）。

2. 调整VSCode的launch.json配置 #

修改webRoot为库的根路径，并添加sourceMapPathOverrides强制路径映射：

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome for Storybook",
  "url": "http://localhost:6006",
  "sourceMaps": true,
  "webRoot": "${workspaceFolder}/projects/your-lib",
  "sourceMapPathOverrides": {
    "webpack:///./projects/your-lib/*": "${webRoot}/*",
    "webpack:///./src/*": "${webRoot}/src/*"
  }
}

替换your-lib为你的实际库名称，这样调试器能正确将bundle中的路径映射到本地TS文件。

3. 配置Storybook生成正确的SourceMap #

在.storybook/main.ts中添加webpack配置，明确指定sourcemap类型：

module.exports = {
  // 其他已有配置（如stories、addons等）
  core: {
    builder: '@storybook/builder-webpack5', // 若使用Webpack 5，需确保已安装该依赖
  },
  webpackFinal: async (config) => {
    config.devtool = 'source-map'; // 强制生成完整的sourcemap
    return config;
  },
};

如果使用Webpack 4，无需指定builder，但同样要设置config.devtool = 'source-map'。

4. 关于angular.json的sourceMap选项报错 #

Angular库的编译配置中，sourceMap是通过库的tsconfig.json控制的，angular.json里的库配置项本身不支持sourceMap选项，所以你之前的报错是正常的，无需在angular.json中添加该配置。

5. 验证与缓存清理 #

• 启动Storybook后，打开Chrome开发者工具的Sources标签，在webpack://目录下应该能找到你的TS文件，此时可以直接在浏览器中调试，也能配合VSCode断点正常触发。
• 如果仍无法找到文件，运行npx storybook clean清理Storybook缓存，再重启服务尝试。

内容的提问来源于stack exchange，提问作者Ben Thomson