Chrome升级至102版本后Vue项目DevTools无法设置断点如何解决

Chrome 102版本对Source Map的校验规则做了破坏性更新，移除了旧版本中对非标准Source Map路径的兼容逻辑。
多数Webpack项目在开发环境会默认使用eval-*系列的devtool配置（比如cheap-module-eval-source-map，构建速度快适配热更新），Webpack 4及更早版本生成这类Source Map时，源文件路径使用未做标准化的webpack://协议前缀，Chrome 86版本会自动兼容解析这类不规范路径，因此断点功能可正常使用；更新到102版本后，这类不符合规范的路径无法和实际运行的脚本资源建立有效映射，DevTools会判定源文件与运行时代码无关联，直接将所有行号置灰、禁止设置断点。

• 优先调整Webpack的devtool配置，开发环境替换为非eval类型的Source Map选项，比如cheap-module-source-map或者source-map，这类配置生成的Source Map路径符合标准规范，可被新版Chrome正确识别，基础配置示例：

// webpack.config.js 开发环境配置
module.exports = {
  // 其余业务配置保持不变
  devtool: 'cheap-module-source-map',
}

如果需要保留eval模式的构建速度优势，不需要替换devtool，可通过配置devtoolModuleFilenameTemplate手动标准化源文件路径：

// webpack.config.js
module.exports = {
  // 其余业务配置保持不变
  devtool: 'cheap-module-eval-source-map',
  output: {
    // 原有output配置保留
    devtoolModuleFilenameTemplate: (info) => {
      return `file:///${info.absoluteResourcePath.replace(/\\/g, '/')}`
    }
  }
}

• 如果是Vue CLI搭建的项目，不需要直接修改Webpack底层配置，在项目根目录的vue.config.js中覆盖devtool配置即可：

// vue.config.js
module.exports = {
  configureWebpack: {
    devtool: 'cheap-module-source-map'
  }
}

修改配置后重启开发服务，硬刷新浏览器页面（Ctrl+Shift+R / Cmd+Shift+R）即可恢复断点功能。

• 临时兜底方案：如果暂时无法修改构建配置，可以打开DevTools右上角的设置面板，在Sources分类下先关闭再重新开启Enable JavaScript source maps选项，硬刷新页面后可临时恢复断点能力，但该方案稳定性差，重启DevTools后问题大概率复现，仅适合紧急临时调试使用。

参考截图 #

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