React 开发工具 - 停用“警告中断”答案

【问题标题】：React dev tools - Deactivate "break on warnings"React 开发工具 - 停用“警告中断”
【发布时间】：2020-10-31 06:50:18
【问题描述】：

在使用 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.

如何停用此行为？

【问题讨论】：

这种行为非常烦人。我真的很想知道如何禁用它
这里是 Dan github.com/facebook/react/issues/19308#issuecomment-656682924 的分步说明，现在可以删除此行为
我的解决方案是将该特定文件黑箱化，以便调试器完全跳过它。除非您正在开发该插件，否则您应该很好地做到这一点。

标签： reactjs javascript-debugger

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

基于拉取请求DevTools: Make break-on-warn off by default #19309，这似乎是一个错误。

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

我不知道有另一种方法可以强制 Chrome 在其常规计划之外更新扩展程序。

【讨论】：

【解决方案4】：

转到 Chrome Devtools → 在 Chrome 控制台中，转到 Component → 点击 Settings → 取消设置 Break on Warning。在 Profiler → 设置 → 取消设置 Break on warning 中执行相同操作。

@cadoman 指出检查，然后取消选中以确保正常工作。

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

【讨论】：

而且你需要勾选然后取消勾选是否还没有勾选
似乎还有一个错误，即复选框在 Profiler 和 Component 设置之间混淆。选中或取消选中一个，然后另一个显示最后一个值。正如 cadoman 所说，只需选中和取消选中即可。
哈哈，我找到你了 :)

【解决方案5】：

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

转到 Chrome 开发者工具
点击组件选项卡（React Developer Tools Extension）
点击设置图标（位于组件搜索框旁边）
一旦模式打开，选择调试选项卡
最后，双击Break on Warnings复选框（选中和取消选中）

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

参考：Issue link

【讨论】：

【解决方案6】：

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

转到 Chrome 开发者工具 -> 源选项卡
从左侧窗格中选择“react_developer_tools.js”
右键单击文件并选择“黑盒脚本”

【讨论】：