为什么 console.log() 显示 react_devtools_backend.js:4049 而不是文件和行号？
Why is console.log() showing react_devtools_backend.js:4049 instead of the file and line number?
当我 console.log() 时，Chrome 控制台给出了日志，但没有显示文件和行号，它只是显示 react_devtools_backend.js:4049。 console.log()?
如何让控制台显示文件和行号
这可能是由于 webpack 配置文件中禁用了源映射选项。您需要将 webpack 配置中的开发工具更改为
devtool: "source-map"
或者您可以根据需要控制source map的生成。查看 devtool webpack
的文档
从昨天开始我在 Edge 和 Chrome 中都遇到了同样的问题，不完全是一个解决方案只是一个临时的解决方法：只需从浏览器扩展中禁用 react-devtools 扩展。
在浏览器中禁用 React Devtools 扩展。
看起来该扩展程序需要修复。
添加更多上下文显然“它不需要修复”，因为它按照 2021 年 9 月 1 日的第 18 版按预期工作。请参阅 React comment of one of the developers GitHub问题。
如果您不想检查日志或它被删除，请在此处引用：
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.
所以我想在他们改变主意或浏览器提供更好的支持之前，是时候关闭扩展了。
我可以通过将文件添加到 Chrome 中的框架忽略列表来在我的控制台中修复它。
步骤：
Console -> Gear icon (top right) -> Settings -> Framework Ignone List.
将 react_devtools_backend.js 添加到列表中，console.log 应该会再次开始显示正确的映射。
我们可以使用
console.info(data)
而不是
console.log(data)
根据 comment on the GitHub issue page，自 2021 年 9 月 29 日 React DevTools 版本 19 起，此问题已得到解决。
因此，在我们将 React DevTools 扩展更新到 4.19.0.
版本后，它应该再次显示文件和行号
如果您在 chrome 中使用 React devtools 扩展，则可能会发生这种情况。只需转到 chrome://extensions/ 并检查，如果找到则将其删除。在我的例子中它起作用了。
实际上它可以在“组件选项卡”中禁用
在那里使用“齿轮”图标
image
并选中“调试”选项卡上的“在严格模式下第二次渲染期间隐藏日志”。
image
当我 console.log() 时，Chrome 控制台给出了日志，但没有显示文件和行号，它只是显示 react_devtools_backend.js:4049。 console.log()?
这可能是由于 webpack 配置文件中禁用了源映射选项。您需要将 webpack 配置中的开发工具更改为
devtool: "source-map"
或者您可以根据需要控制source map的生成。查看 devtool webpack
的文档从昨天开始我在 Edge 和 Chrome 中都遇到了同样的问题，不完全是一个解决方案只是一个临时的解决方法：只需从浏览器扩展中禁用 react-devtools 扩展。
在浏览器中禁用 React Devtools 扩展。
看起来该扩展程序需要修复。
添加更多上下文显然“它不需要修复”，因为它按照 2021 年 9 月 1 日的第 18 版按预期工作。请参阅 React comment of one of the developers GitHub问题。
如果您不想检查日志或它被删除，请在此处引用：
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.
所以我想在他们改变主意或浏览器提供更好的支持之前，是时候关闭扩展了。
我可以通过将文件添加到 Chrome 中的框架忽略列表来在我的控制台中修复它。 步骤：
Console -> Gear icon (top right) -> Settings -> Framework Ignone List.
将 react_devtools_backend.js 添加到列表中，console.log 应该会再次开始显示正确的映射。
我们可以使用
console.info(data)
而不是
console.log(data)
根据 comment on the GitHub issue page，自 2021 年 9 月 29 日 React DevTools 版本 19 起，此问题已得到解决。
因此，在我们将 React DevTools 扩展更新到 4.19.0.
如果您在 chrome 中使用 React devtools 扩展，则可能会发生这种情况。只需转到 chrome://extensions/ 并检查，如果找到则将其删除。在我的例子中它起作用了。
实际上它可以在“组件选项卡”中禁用 在那里使用“齿轮”图标 image
并选中“调试”选项卡上的“在严格模式下第二次渲染期间隐藏日志”。
image