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

Abb*_*ang 113 javascript google-chrome reactjs react-devtools

当我输入日志时console.log(),Chrome 控制台会给出日志,但不会显示文件和行号,它只是显示react_devtools_backend.js:4049。当我这样做时,如何让控制台显示文件和行号console.log()

控制台输出的屏幕截图显示“react_devtools_backend.js:4049”代替正确的文件和行号

Sea*_*ean 96

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

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

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

Chrome 设置中的框架忽略列表的屏幕截图

  • 不确定这是否是最好的解决方案,因为 mb 将来会需要它吗?但至少它有效,谢谢。 (2认同)

小智 54

可以在“组件选项卡”中禁用它。单击“齿轮”图标:

1

然后在“调试”选项卡中选中“在严格模式下第二次渲染期间隐藏日志”:

2

  • 就是这样 (2认同)
  • 在 Firefox 中禁用“显示内联警告和错误”对我有用。如果这个答案实际上具体提到了相关选项以及如何设置它,将会很有帮助。现在这并不是问题的直接答案。 (2认同)

Zia*_*rno 36

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

看来该扩展需要修复。


小智 36

要添加更多上下文,显然“它不需要修复”,因为它按照 2021 年 9 月 1 日版本 18 的预期工作。请参阅其中一位开发人员对 React GitHub 问题的评论。

如果您不想检查日志或日志被删除,请引用此处:

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

此覆盖的主要不幸缺点是它更改了本期中报告的浏览器控制台显示的位置。

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

  • 天哪,这不太可行,必须不断启用和禁用扩展...感谢您的信息伙伴!欢迎来到堆栈:) (8认同)

小智 21

我们可以用

console.info(data)
Run Code Online (Sandbox Code Playgroud)

代替

console.log(data)
Run Code Online (Sandbox Code Playgroud)

  • 问题是,当发生错误并且代码“中断”时,开发人员想要捕获并调试,并且如果扩展在“真实”代码之前捕获错误,那么了解确切的失败行的能力是丢失的 (4认同)

小智 5

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