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

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


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 Ignone List.

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

screenshot of Framework Ignore List in Chrome Settings


Disable the React Devtools extension in your browser.

It looks like that extension needs a fix.


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.