VS Code调试器对TypeScript代码显示错误的单步执行顺序，但实际执行逻辑正确

看起来你遇到了一个挺棘手的VS Code调试器视觉bug，而且已经做了相当全面的排查工作——能把问题精准缩小到TypeScript+Webpack项目环境，还排除了纯JS和V8 JIT的影响，这已经帮你锁定了核心方向！

这种“实际执行正确但调试器视觉步进错位”的问题，几乎100%是source map的映射精度不足导致的：调试器的UI完全依赖source map来对应编译后JS和源文件TS的行号/列号，当映射关系出现细微偏差时，就会出现高亮行和实际执行行不匹配的情况，但代码本身的执行逻辑不会受影响。结合你的排查结果，我给你几个针对性的排查和解决方向：

1. 调整Webpack的devtool选项类型 #

你当前用的是source-map，这是一种离线生成的source map，虽然适合生产环境，但调试时可以试试更精确的类型：

• 临时换成eval-source-map：它会把source map嵌入到每个模块的eval语句里，映射精度更高，能减少因Webpack模块合并导致的行号偏移
• 或者inline-source-map：把source map直接嵌入到输出的JS文件中，避免路径解析的问题
• 同时检查devtoolModuleFilenameTemplate配置，你现在用的../[resource-path]可能导致相对路径解析混乱，试试改成绝对路径模板：

  devtoolModuleFilenameTemplate: '[absolute-resource-path]'
  

2. 关闭Webpack的模块合并优化 #

Webpack在生产模式下默认会开启ModuleConcatenationPlugin，它会把多个模块合并到一个函数里，这很容易打乱source map的行号映射。调试时可以临时关闭：

// webpack.config.js
module.exports = {
  // ...其他配置
  optimization: {
    concatenateModules: false
  }
}

虽然这会增加打包体积，但能快速验证是否是模块合并导致的映射错位。

3. 检查ts-loader的配置细节 #

• 如果你开启了transpileOnly选项来加快编译速度，可能会导致source map生成不完整。试试关闭它，或者配合fork-ts-checker-webpack-plugin来分离类型检查和转译，保证source map的精度：

  // webpack.config.js module.rules里的ts-loader配置
  {
    test: /\.ts$/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          transpileOnly: false // 临时关闭试试
        }
      }
    ],
    exclude: /node_modules/
  }
  

• 确认ts-loader的compilerOptions和项目根目录的tsconfig.json完全一致，避免因配置冲突导致的source map偏差。

4. 禁用Webpack Terser的压缩优化（调试时） #

你已经配置Terser保留console调用，但其他压缩选项（比如变量合并、代码折叠）仍可能打乱source map映射。调试时可以完全禁用Terser的优化：

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ...其他配置
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: false, // 关闭所有压缩
          mangle: false,   // 关闭变量混淆
          format: {
            comments: true
          }
        }
      })
    ]
  }
}

如果禁用后问题消失，再逐步开启优化项，找到具体是哪个选项导致的错位。

5. 跳过Webpack，直接用tsc编译调试 #

为了彻底隔离Webpack的影响，试试直接用tsc编译你的TypeScript代码（基于你的tsconfig.json），然后调试编译后的out目录下的JS文件：

tsc --watch

如果这时候调试器的步进视觉完全正常，那问题就确定是Webpack构建链导致的；如果还是有问题，可能是TypeScript 5.8.3和VS Code 1.101.1的兼容性问题，可以尝试降级TypeScript到5.7.x版本。

6. 尝试回退/升级VS Code版本 #

你用的VS Code 1.101.1是比较新的版本，偶尔新版本的调试器会引入一些视觉映射的小bug。试试回退到前一个稳定版本（比如1.100.x），或者升级到最新的Insider版本，看看是否能解决这个UI问题。

最后再总结一下：这种问题本质上是调试器依赖的source map和实际编译代码的映射出现了“视觉错位”，核心解决思路就是提升source map的精度，减少构建链对代码结构的改动，从而让调试器的UI高亮能准确对应实际执行的代码行。

内容来源于stack exchange