Is there a way to ensure when debugging for the code to be readable in Chrome browser (or another browser like Edge). For the code to appear the same way as written.

Even when I use pretty print still find it unreadable.

For example a block of code written as follows in IDE:

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

comes up as follows in Chrome Browser.

Is it possible be it via some browser settings or code configurations to achieve the code to look the same was as it was written in a browser during debugging?

Edit:

The suggested solution uses CRA but my app was not developed using CRA.

Believe the minification is coming from the following within my webpack.config.js file.

  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,
    }),
  ],