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

Problem:

While working on a react project, I was trying to get the file and the line number but The Chrome console shows the log when I use console.log(), but instead of providing the file and line number, it just shows react devtools backend.js:4049. When I console.log(), how do I get the file and line number to appear in the console?

Solution 1:

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

Right click on browser -> Inspect -> Console -> Settings (Gear icon on top right) -> Framework Ignone List -> add pattern.

Then add

react_devtools_backend.js

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

Solution 2:

Disable the React Devtools extension in your browser.

It looks like that extension needs a fix.

Solution 3:

We can use

console.info(data)

instead of

console.log(data)

Thank you for reading the article. If you have any suggestions please comment below.