调试时单步跳过async函数断点跳至函数声明行的解决求助

直接修改webpack配置的方案 #

你可以直接在现有webpack.config.js的babel-loader配置段新增参数，无需额外创建.babelrc文件，修改后的JS文件处理规则如下：

{
  test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [['@babel/preset-env', {useBuiltIns: 'usage', corejs: 3}]],
      // 新增以下2行配置
      sourceMaps: process.env.NODE_ENV === 'development',
      retainLines: process.env.NODE_ENV === 'development'
    }
  }
}

上述配置会自动根据环境判断是否启用相关参数：开发环境开启映射和行保留逻辑，生产环境自动关闭，不会影响打包产物的体积和性能。

更优的可选解决方案 #

你可以从根源上避免Babel转译async/await带来的调试问题，不需要依赖sourcemap映射修正：

• 开发环境配置低转译目标：现代浏览器本身原生支持async/await语法，你可以给@babel/preset-env设置针对开发环境的高版本浏览器目标，跳过异步语法的转译逻辑，配置示例如下：

presets: [
  ['@babel/preset-env', {
    targets: process.env.NODE_ENV === 'development' 
      ? {chrome: '100', firefox: '98'} // 仅兼容高版本现代浏览器
      : '> 0.25%, not dead', // 生产环境沿用原有兼容规则
    useBuiltIns: 'usage', 
    corejs: 3
  }]
]

• 调整devtool配置：如果修改babel配置后仍存在sourcemap映射不准的问题，可以尝试将devtool: 'eval-source-map'更换为devtool: 'inline-cheap-module-source-map'，对转译后代码的行映射准确度更高。

修改配置后重启webpack devServer，清空浏览器缓存的旧代码即可生效。

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