Chrome DevTools与Webpack项目：控制台堆栈追踪跳转至原始源码

问题1：让控制台链接在DevTools Sources面板打开，而非新标签页 #

问题源于webpack-internal://协议的资源无法被Chrome DevTools识别为内部源码资源，只需修改Webpack的模块文件名映射配置，将路径统一转为webpack://格式即可：

在Webpack配置文件中添加以下配置：

module.exports = {
  // 其他配置项...
  output: {
    // 其他output配置...
    devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]',
    devtoolFallbackModuleFilenameTemplate: 'webpack:///[absolute-resource-path]?[hash]'
  }
};

该配置会把模块的Source Map路径映射为你在Sources面板看到的原始源码路径格式，Chrome点击控制台链接时就会直接在DevTools内打开，不再跳转新标签。

问题2：让控制台链接指向原始源码文件 #

需要确保Source Map正确关联TypeScript原始文件，从以下几个维度调整：

• 确认TypeScript配置开启Source Map
  在tsconfig.json中保证以下配置：

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSourceMap": false, // 避免与Webpack的Source Map冲突
    "inlineSources": false
  }
}

• 调整Webpack的devtool选项
  eval-source-map虽在开发环境速度快，但可能存在关联偏差。可以切换到更精准的选项，平衡速度与准确度：

module.exports = {
  devtool: 'cheap-module-source-map' // 或直接用'source-map'，精准度更高但编译稍慢
};

若不想放弃eval-source-map的速度，可结合上面的devtoolModuleFilenameTemplate配置，同时添加source-map-loader处理TypeScript的Source Map：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: 'pre',
        use: ['source-map-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

• 禁用DevServer缓存
  若缓存导致路径关联异常，可在Webpack配置中禁用缓存：

module.exports = {
  devServer: {
    cache: false,
    hot: true
  }
};

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