Chrome devtools 中的可读调试答案

【问题标题】：Readable debugging in Chrome devtoolChrome devtools 中的可读调试
【发布时间】：2021-09-04 21:21:38
【问题描述】：

有没有办法确保在调试代码时可以在 Chrome 浏览器（或其他浏览器，如 Edge）中读取代码。让代码看起来和写的一样。

即使我使用漂亮的印刷品仍然觉得它不可读。

例如在IDE中编写如下代码块：

{provideData() || (!moduleState.provideError && moduleState.provideData) ? (

在 Chrome 浏览器中如下所示。

是否有可能通过一些浏览器设置或代码配置来使代码看起来与调试期间在浏览器中编写的一样？

编辑：

建议的解决方案使用 CRA，但我的应用不是使用 CRA 开发的。

相信缩小来自我的 webpack.config.js 文件中的以下内容。

  plugins: [
    new CleanWebpackPlugin([paths.out]),
    new webpack.LoaderOptionsPlugin({ minimize: true, debug: false }),
    new UglifyJsPlugin({
      test: /\.jsx?$/i,
      uglifyOptions: {
        beautify: false,
        mangle: { keep_fnames: true },
        compress: {
          dead_code: true,
          drop_console: true,
          drop_debugger: true,
        },
        comments: false,
      },
    }),
    new CompressionPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.js/,
      threshold: 10240,
      minRatio: 0.8,
    }),
  ],

【问题讨论】：

你的代码被缩小了，所以就是这样。使用浏览器的源映射来了解这段代码之前的位置
这能回答你的问题吗？ How to generate sourcemaps in create react app?
@Justinas 这是一个反应应用，但不是使用 CRA 创建的。
什么是缩小你的代码？
@DaveNewton 相信它来自 UglifyJsPlugin。更新了上面的问题以在 webpack.config.js 中展示该块

标签： javascript reactjs webpack uglifyjs

【解决方案1】：

模式应该是“开发”。

在 webpack 配置中试试这个：

mode: slsw.lib.webpack.isLocal ? "development": "production",
optimization: {
    minimize: false
}

同时尝试删除捆绑的文件。

【讨论】：

应用程序不是使用 CRA 开发的。使用这个解决方案是否重要。
更新了新提供信息的答案...