Why is console.log() showing react_devtools_backend.js:4049 instead of the file and line number?
JavascriptReactjsGoogle ChromeReact DevtoolsJavascript Problem Overview
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()?
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
Disable the React Devtools extension in your browser.
It looks like that extension needs a fix.
Solution 3 - Javascript
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.
Solution 4 - Javascript
We can use
console.info(data)
instead of
console.log(data)
Solution 5 - Javascript
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.
Solution 6 - Javascript
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
Solution 7 - Javascript
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.
Solution 8 - Javascript
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.
Solution 9 - Javascript
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.