在 Chrome 开发人员工具打开的情况下，React 应用程序会变慢。在隐身模式下工作正常

Question

在开发我的 React 应用程序时，在 chrome 中打开 devtools 时，应用程序变得非常缓慢。关闭它们或在隐身模式下工作得又快又好。我尝试禁用所有扩展并遇到同样的问题。当我更新 chrome（现在版本 80.0.3987.132）时，这似乎是最近开始发生的。

我不确定从哪里开始调试这个问题，但在我的应用程序上开发变得非常令人沮丧。

任何建议或帮助调试将不胜感激。

Answer 1

TL;DR：转到 Sources 选项卡并删除站点的所有断点。

我有一个类似的问题。我的网站加载速度很慢，但仅限于特定情况：
1) 开发工具已打开。
2) Tab 在正常窗口中。（非隐身模式）
3)未启用分析。

如果（且仅当）所有三个条件都满足时，站点的加载速度会慢得难以忍受（15 秒以上；通常约为 3 秒），并且站点上的某些操作会出现性能问题（例如更改打开的子面板）。这很奇怪。

像您一样，我尝试禁用所有扩展程序，但问题仍然存在。

最后，我尝试使用地址栏左侧的信息/锁定下拉菜单清除网站的所有 cookie 和本地存储。令人惊讶的是，这似乎已经解决了它！（更新：仅主要解决它）

所以问题一定是我的网站在本地存储或其他东西中存储了太多数据，以至于开发工具在它上面窒息（但仅在特定情况下，出于某种原因）。这也与在隐身模式下解决的问题相匹配：隐身模式对站点 cookie/本地存储使用“清晰的石板”。

无论如何，这很奇怪，但 cookie/本地存储清理似乎对我的情况有效。（如果问题再次出现，并且上面的解决方案没有解决它，我会尽量记住提及它。）

更新：奇怪的是，即使在修复之后，打开分析器仍然会加快速度（即，满足这三个条件仍然会减慢页面加载和操作，只是比修复之前少得多）。很明显，修复只是“降低了问题的强度”，而不是完全修复它；就像，通过重置本地存储，它减少了数据的大小，这在某种程度上是影响核心问题的变量（尚未确定）。

更新 2：我相信我已经找到了根本问题和解决方案：我删除了站点的所有断点，并且完全解决了减速问题。所以问题似乎是我在我的网站代码的不同位置设置了很多不需要的断点（一些启用，一些禁用）。其中一些必须放置在经常被调用的“热点”中/附近。通过打开开发工具，Javascript 引擎必须开始执行一些与断点相关的处理，从而减慢速度。

我的猜测是该问题也可以通过禁用“JavaScript 源映射”设置来解决（因为这是我认为唯一会导致如此缓慢的事情），但我还没有证实这一点。

Answer 2

这很可能与此提交有关，标题为“录制关闭时停止发送配置文件数据”。

他们已经知道开发人员工具存在速度减慢的问题，并且他们试图通过在不记录时阻止分析数据通过网桥发送到前端来阻止该问题。

据报道，在最新版本中，该问题似乎不再发生。然而，原因仍然未知。

尝试卸载开发人员工具扩展，清除浏览器缓存，然后重新安装。