¿Hay alguna manera de asegurarse de que el código se pueda leer en el navegador Chrome (u otro navegador como Edge) durante la depuración? Para que el código aparezca de la misma manera que está escrito.

Incluso cuando uso letras bonitas, todavía las encuentro ilegibles.

Por ejemplo, un bloque de código escrito de la siguiente manera en IDE:

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

aparece de la siguiente manera en el navegador Chrome.

¿Es posible, ya sea a través de algunas configuraciones del navegador o configuraciones de código, lograr que el código tenga el mismo aspecto que estaba escrito en un navegador durante la depuración?

Editar:

La solución sugerida utiliza CRA, pero mi aplicación no se desarrolló con CRA.

Creo que la minificación proviene de lo siguiente dentro de mi archivo 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, }), ],