如何在VS Code中让Karma测试结果输出源文件而非bundle文件路径

要让Karma测试结果指向源文件（如base/src/circle.js 44:23）而非打包后的common.js，核心是配置source map并确保Karma能正确解析它，以下是具体步骤：

1. Webpack中启用正确的Source Map类型 #

在Webpack配置里，设置devtool为适合测试环境的类型，推荐使用inline-source-map或eval-source-map（前者更稳定，后者构建更快）：

// webpack.config.js
module.exports = {
  // ...其他配置
  devtool: 'inline-source-map', // 或 'eval-source-map'
};

注意：不要使用cheap-source-map或cheap-module-source-map，这类会丢失列信息，无法精确定位到代码行的具体位置。

2. 配置Karma加载Source Map #

步骤2.1 安装依赖 #

npm install karma-sourcemap-loader --save-dev

步骤2.2 修改Karma配置 #

在karma.conf.js中添加loader并启用source map支持：

// karma.conf.js
module.exports = function(config) {
  config.set({
    // ...其他配置
    preprocessors: {
      'path/to/your/test/bundle.js': ['sourcemap'] // 替换为你的测试bundle路径
    },
    plugins: [
      // ...其他已配置插件
      'karma-sourcemap-loader'
    ],
    // 建议使用ChromeHeadless作为测试浏览器，对source map支持更完善
    browsers: ['ChromeHeadless']
  });
};

3. 调整测试框架输出（可选） #

如果使用Mocha或Jasmine，确保测试报告插件能识别source map。以Mocha为例，可配置karma-mocha-reporter优化输出：

// karma.conf.js
module.exports = function(config) {
  config.set({
    reporters: ['mocha'],
    mochaReporter: {
      showDiff: true,
      output: 'autowatch'
    }
  });
};

4. VS Code调试配置验证 #

在.vscode/launch.json中添加Karma调试配置，确保source map映射生效：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Karma Tests",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

完成以上配置后，运行Karma测试时，错误信息会直接指向源文件的具体行号和列号，无需手动定位bundle文件中的位置。

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