Débogage lisible dans Chrome devtool

Question

Existe-t-il un moyen de s'assurer, lors du débogage, que le code est lisible dans le navigateur Chrome (ou un autre navigateur comme Edge). Pour que le code apparaisse de la même manière qu'il est écrit.

Même lorsque j'utilise de jolis caractères, je les trouve toujours illisibles.

Par exemple, un bloc de code écrit comme suit dans l'IDE :

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

s'affiche comme suit dans le navigateur Chrome.

Est-il possible, via certains paramètres du navigateur ou certaines configurations du code, de faire en sorte que le code ait la même apparence que lorsqu'il est écrit dans un navigateur pendant le débogage ?

Edita:

La solution proposée utilise CRA, mais mon application n'a pas été développée avec CRA.

Je pense que la minification vient de ce qui suit dans mon fichier 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,
    }),
  ],

Answer 1

En mode devrait être sur le "développement".

Essayez ceci dans la configuration de webpack :

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

Essayez également de supprimer le fichier groupé.