为啥 console.log() 显示 react_devtools_backend.js:4049 而不是文件和行号？

Posted 2023-02-22

【中文标题】为啥 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() 显示 react_devtools_backend.js:4049 而不是文件和行号？

【发布时间】：2021-11-03 08:14:38

【问题描述】：

当我console.log() 时，Chrome 控制台会提供日志，但不会显示文件和行号，而是显示react_devtools_backend.js:4049。我console.log()时如何让控制台显示文件和行号？

【参考方案1】：

这可能是由于 webpack 配置文件中禁用了源映射选项。您需要将 webpack 配置中的 devtool 更改为

devtool: "source-map"

或者您可以根据需要控制源映射生成。查看devtool webpack的文档

【讨论】：

使用react-scripts 时出现问题，它将所有 Webpack 作为“黑盒”为您处理

【参考方案2】：

如果您在 chrome 中使用 React devtools 扩展，则可能会发生这种情况。只需转到 chrome://extensions/ 并检查，如果找到，则将其删除。就我而言，它有效。

【参考方案3】：

截至 2021 年 9 月 29 日的 React DevTools 版本 19，此问题已根据 comment on the GitHub issue page 得到解决。 所以在我们将 React DevTools 扩展更新到版本 4.19.0 后，它应该再次显示文件和行号。

【讨论】：

我的版本是4.22.0，日志中看不到行号

【参考方案4】：

添加更多上下文显然“它不需要修复”，因为它按照 2021 年 9 月 1 日第 18 版的预期工作。请参阅 comment of one of the developers 上的 React GitHub 问题。

在这里引用以防您不想检查日志或它被删除：

从版本 18 开始，DevTools 始终会覆盖本机控制台以暗淡或抑制 StrictMode 双重日志记录。 （之前它只有在您启用组件堆栈等功能时才会这样做。）

此覆盖的主要不幸缺点是它会更改浏览器控制台显示的位置，如本期所述。

所以我想在他们改变主意或浏览器提供更好的支持之前，是时候关闭扩展了。

【讨论】：

我的天哪，这不是真的可行，必须不断启用和禁用扩展...感谢信息伙伴！欢迎来到 Stack :)

【参考方案5】：

我可以通过将文件添加到 Chrome 中的框架忽略列表来在控制台中修复它。 步骤：

控制台->齿轮图标（右上角）->设置->框架忽略列表。

将react_devtools_backend.js 添加到列表中，console.log 应该会再次开始显示正确的映射。

【讨论】：

不确定这是否是最佳解决方案，因为 m.b.将来会需要吗？但至少它是有效的，谢谢。

【参考方案6】：

我们可以使用

console.info(data)

而不是

console.log(data)

【讨论】：

如果发生错误并且代码“中断”的问题，因此开发人员想要捕获和调试，如果扩展程序在“真实”代码之前捕获错误，那么能力知道确切的故障线丢失了

【参考方案7】：

在浏览器中禁用 React Devtools 扩展。

看起来该扩展需要修复。

【参考方案8】：

从昨天开始，我在 Edge 和 Chrome 中都遇到了同样的问题，这并不完全是一个解决方案，只是一种临时解决方法：只需从浏览器扩展中禁用 react-devtools 扩展即可。