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()?

Answer 1

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.

Answer 2

Disable the React Devtools extension in your browser.

It looks like that extension needs a fix.

Answer 3

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.

Answer 4

We can use

console.info(data)

instead of

console.log(data)

Answer 5

actually it can be disabled in "Components tab" use "Gear" icon there image

and check "Hide logs during second render in Strict Mode" on the "debugging" tab.

image

Answer 6

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.

Answer 7

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

Answer 8

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.