React 开发工具 - 停用 "break on warnings"

Question

在使用 create-react-app 进行开发时，我的浏览器在出现警告时进入调试器模式：

它破坏了 react-dev-tools 的源代码：

   // --- Welcome to debugging with React DevTools ---
   // This debugger statement means that you've enabled the "break on warnings" feature.
   // Use the browser's Call Stack panel to step out of this override function-
   // to where the original warning or error was logged.

我怎样才能停用此行为？

Answer 1

这是一个已知问题。 GitHub 上发布了解决方法：Bug: Unexpected debugger statement in DevTools (solved) #19308

Answer 2

转到“调试”选项卡中的 ReactDev 工具并禁用“警告中断”。

我认为这种新行为是从今天开始的新 PR：https://github.com/facebook/react/pull/19048

Answer 3

根据拉取请求 DevTools: Make break-on-warn off by default #19309 看来这是一个错误。

我没有选中 Break On Warnings 框，它仍然会中断。删除并读取扩展以强制更新为我修复它。

我不知道还有什么方法可以强制 Chrome 在正常计划之外更新扩展。

Answer 4

转到 Chrome Devtools → 在 Chrome 控制台中，转到 Component → 单击 Settings → 取消设置 警告时中断 。在 Profiler → 设置 → 取消设置 Break on warning.

@cadoman 指向选中然后取消选中以确保工作。

P.S：图片来自https://github.com/facebook/react/issues/19308#issuecomment-656669792

Answer 5

此问题是由于最近的版本所致。 React 团队提出的解决方法是：

转到 Chrome 开发人员工具
单击组件选项卡（React 开发人员工具扩展）
单击设置图标（位于组件搜索框旁边）
一旦模式打开 select 调试选项卡
最后，双击 Break on Warnings 复选框（选中和未选中）

确保最后 Break on Warnings 复选框未选中。

参考：Issue link

Answer 6

Chrome 有一个“BlackBox 脚本”功能，在这种情况下很有用。

转到 Chrome 开发人员工具 -> 源选项卡
Select 左窗格中的“react_developer_tools.js”
右键单击文件和select“黑盒脚本”

React 开发工具 - 停用 "break on warnings"

React dev tools - Deactivate "break on warnings"

reactjs

javascript-debugger