Readable debugging in Chrome devtool

Question

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

Your code is minified, so that's why it's like that. Use source maps for browser to know where this code was before — Justinas, Sep 04 '21 at 21:24
Does this answer your question? [How to generate sourcemaps in create react app?](https://stackoverflow.com/questions/55904292/how-to-generate-sourcemaps-in-create-react-app) — Justinas, Sep 04 '21 at 21:25
@DaveNewton Believe it is coming from UglifyJsPlugin. Updated question above to showcase that block within the webpack.config.js — Fllappy, Sep 04 '21 at 21:59

H3AR7B3A7 · Answer 1 · 2021-09-04T22:08:13.193

0

The mode should be on 'development'.

Try this in the webpack config:

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

Also try deleting the bundled file.

edited Sep 04 '21 at 22:08

answered Sep 04 '21 at 21:30

H3AR7B3A7

4,366
2
14
37

The application was not developed using CRA. Does it matter to use this solution. – Fllappy Sep 04 '21 at 21:32
Updated the answer for the newly provided information... – H3AR7B3A7 Sep 04 '21 at 22:07
How is slsw.lib.webpack.isLocal assigned? Where is this defined because in the documentation it says " is set to true, if any known mechanism is used in the current Serverless invocation that runs code locally." But how is this calculated and can it be manually changed by assigning the build stage? – qUB3r-001 Aug 22 '22 at 18:37

Readable debugging in Chrome devtool

1 Answers1