Chrome/Edge浏览器调试时如何让代码与IDE编写样式完全一致？

核心解决思路 #

你遇到的格式混乱是开发环境开启了代码压缩导致的，可通过以下webpack配置和浏览器设置解决：

1. 按环境区分压缩配置 #

不要在开发环境启用代码压缩规则，修改你的webpack配置：

• 开发环境下移除UglifyJsPlugin插件
• 将webpack.LoaderOptionsPlugin的参数调整为 { minimize: false, debug: true }
• 生产环境再保留现有压缩配置，不影响线上产物大小

2. 配置Source Map直接映射原始代码 #

这是还原度最高的方案，浏览器会直接加载你在IDE中编写的原始代码，不需要手动开启pretty print也能完全匹配格式。
在webpack配置中新增devtool字段，开发环境推荐使用平衡速度和还原度的配置：

module.exports = {
  // 其余配置不变
  devtool: 'eval-cheap-module-source-map'
}

同时检查Chrome/Edge开发者工具设置，确认「Enable JavaScript source maps」选项已勾选（默认开启）。

3. 特殊场景下调整压缩规则 #

如果开发环境必须保留压缩流程，可修改UglifyJsPlugin的配置项保留格式：

new UglifyJsPlugin({
  test: /\.jsx?$/i,
  uglifyOptions: {
    beautify: true, // 开启格式化
    mangle: false, // 关闭变量名混淆
    compress: {
      dead_code: false,
      drop_console: false,
      drop_debugger: false,
    },
    comments: true, // 保留注释
  },
})

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