How do show the actual line in chrome console (Errors tab messages)?

Question

I saw two similar questions, which are still no one answer, I would want to raise this question again.

Minified component stack trace in create-react-app (dev mode)

Create-react-app console shows chunk files

May I know how can display the actual line which causes the issue in the console? I tried to click the chunk.js file, which only redirects to the first line of its file.

There is an option to pretty-print the JS code, in the bottom left `{}`, https://www.canidev.tools/pretty-print-js. — Pankaj Parashar, Jul 28 '22 at 08:21
@PankajParashar Do you mean the index.js? this file has already encoded like 'a, b, c,d'. — Martin TT, Jul 28 '22 at 08:25
Can you provide a mininum example? It could be a bug in DevTools — Jecfish, Jul 30 '22 at 03:36
@Jecfish You can refer the second link. https://stackoverflow.com/questions/65485396/create-react-app-console-shows-chunk-files — Martin TT, Aug 02 '22 at 07:39

score 0 · Answer 1 · answered Jul 28 '22 at 08:26

0

Try the pretty print option to beautify the chunk.js file, which would then jump to the line causing the error (see the GIF below). You might still see the uglified variable names, if no source map is available.

More info: https://www.canidev.tools/pretty-print-js

answered Jul 28 '22 at 08:26

Pankaj Parashar

9,762
6
35
48

I am fine in "info" Tab messages. I only get the problem in "errors" Tab messages. – Martin TT Jul 28 '22 at 08:38
It's the same step for any type of console message. What do you get when you prettify the code? – Pankaj Parashar Jul 28 '22 at 12:56

How do show the actual line in chrome console (Errors tab messages)?

1 Answers1