Why is console.log() showing react_devtools_backend.js:4049 instead of the file and line number?

Question

When I console.log(), the Chrome console gives the log but instead of showing the file and line number it just says react_devtools_backend.js:4049. How do I get the console to show the file and line number when I console.log()?

screenshot of console output showing "react_devtools_backend.js:4049" in place of a correct file and line number

Check the second answer to this question. Should be the accepted answer. — Robin Wieruch, Jun 13 '23 at 11:43

score 94 · Accepted Answer · edited Nov 29 '22 at 07:12

94

I was able to fix it in my console by adding the file to my Framework Ignore List in Chrome. Steps:

Console -> Gear icon (top right) -> Settings -> Framework Ignore List.

Add react_devtools_backend.js to the list and the console.log should start showing the correct mapping again.

edited Nov 29 '22 at 07:12

User

31,811
40
131
232

answered Sep 12 '21 at 17:55

Sean

2,412
3
25
31

2

Not sure if that's the best solution cause m.b. it will be needed in future? But at least it is working, thanks. – Artem Luzhanovskyi Sep 28 '21 at 11:33
So what are you saying is that my page does not render for the second time? – Farbod Shabani Dec 10 '22 at 07:42
I don't know why but doesn't work for me – Rudresh Oza Jun 12 '23 at 07:43

score 54 · Answer 2 · edited Nov 07 '22 at 08:20

54

It can be disabled in "Components tab". Click the "Gear" icon:

Then check "Hide logs during second render in Strict Mode" in the "Debugging" tab:

edited Nov 07 '22 at 08:20

zendka

1,074
12
11

answered May 24 '22 at 23:47

Dmitry

541
4
4

2

This is the way – BoxMan0617 Oct 26 '22 at 21:47
This doesn't seems to do anything in Firefox. – runcoderun Nov 24 '22 at 18:55
worked for me! Used chrome and react – Awshaf Ishtiaque Feb 10 '23 at 08:48
2

Disabling "show inline warnings and errors" works for me in Firefox. Would be helpful if this answer actually specifically mentions the relevant option and how to set it. right now it's not really a direct answer to the question. – ThaJay Apr 04 '23 at 08:20

score 36 · Answer 3 · edited Sep 23 '21 at 13:31

36

Disable the React Devtools extension in your browser.

It looks like that extension needs a fix.

edited Sep 23 '21 at 13:31

TylerH

20,799
66
75
101

answered Sep 07 '21 at 09:12

Ziarno

7,366
5
34
40

score 36 · Answer 4 · edited Sep 28 '21 at 11:12

To add a bit more context apparently "it doesn't need a fix" as it's working as intended as per version 18 of 1st of September 2021. See comment of one of the developers on the React GitHub issue.

Quoting here in case you don't want to check the log or it gets deleted:

As of the version 18 release, DevTools always overrides the native console to either dim or suppress StrictMode double logging. (Before it only did it if you enabled a feature like component stacks.)

The major unfortunate drawback of this overriding is that it changes the location shown by the browser's console as reported in this issue.

So I guess that until they change their minds or browsers provide better support, it's time to switch off the extension.

My goodness, it's not really workable, having to enable and disable the extension constantly... Thanks for the info mate! Welcome to Stack :) — Guido Visser, Sep 13 '21 at 10:08

score 21 · Answer 5 · edited Sep 28 '21 at 07:34

21

We can use

console.info(data)

instead of

console.log(data)

edited Sep 28 '21 at 07:34

nima

7,796
12
36
53

answered Sep 14 '21 at 09:15

Aleksandr Zelenskiy

379
2
4

3

The problem if when an error occurs and the code "breaks", so the developer wants to catch and debug, and if the extension is catching the error before the "real" code does, then the ability to know the exact line of failure is lost – vsync Jan 17 '22 at 17:41

score 5 · Answer 6 · answered Sep 07 '21 at 09:01

5

I have the same problem since yesterday in both Edge & Chrome, not exactly a solution just a temporary workaround: just disable the react-devtools extension from your browsers extensions.

answered Sep 07 '21 at 09:01

Userrrfriendly

59
2

score 3 · Answer 7 · answered Jun 08 '22 at 14:49

3

Render your App without the strict mode:

root.render(<App />)

Instead of:

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

answered Jun 08 '22 at 14:49

Alex

283
1
2
12

Never! Strict mode is life. – ThaJay Apr 04 '23 at 08:21

Sudip Thapa · Answer 8 · 2021-12-19T15:14:56.963

2

This may be due to the source map option disabled in webpack config file. You need to change your devtool in webpack config as

devtool: "source-map"

or you can control source map generation according to your need. check the documentation of devtool webpack

edited Dec 19 '21 at 15:14

answered Sep 06 '21 at 08:53

Sudip Thapa

193
1
1
8

1

Problematic when using `react-scripts` which handles all the *Webpack* for you as a "black-box" – vsync Jan 17 '22 at 17:43

Audwin Oyong · Answer 9 · 2021-09-30T14:25:32.680

1

As of React DevTools version 19 of 29 September 2021, this issue has been addressed, as per the comment on the GitHub issue page. So it should show the file and line number again after we update the React DevTools extension to version 4.19.0.

edited Sep 30 '21 at 14:25

answered Sep 30 '21 at 14:11

Audwin Oyong

2,247
3
15
32

1

I'm on version `4.22.0` and the line number is not visible in the log – vsync Jan 17 '22 at 17:45

score 1 · Answer 10 · answered Oct 06 '21 at 13:06

1

This may happen if you are using React devtools extension in chrome. simply just go to chrome://extensions/ and check, If found then remove it. In my case it worked.

answered Oct 06 '21 at 13:06

shrinath deshmukh

9
3

1

So for react developers you are suggesting removing react dev tools? – ZuzEL Jun 03 '23 at 07:25

Why is console.log() showing react_devtools_backend.js:4049 instead of the file and line number?

10 Answers10

Linked