在打开 chrome 开发者工具的情况下，React 应用程序变慢了。在隐身模式下工作正常

Question

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

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

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

Answer 1

TL;DR：转到“源”选项卡并删除该站点的所有断点。

我遇到了类似的问题。我的网站加载速度很慢，但仅限于特定情况：

1. 开发工具已打开。
2. 选项卡位于正常窗口中。 （非隐身模式）
3. 分析未启用。

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

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

尝试 1：我尝试使用地址栏左侧的信息/锁定下拉菜单清除所有网站的 cookie 和本地存储。令人惊讶的是，这似乎已经解决了！ （编辑：这不是根本问题；见下文）

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

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

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

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

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

Answer 2

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

他们已经知道开发者工具速度变慢存在问题，他们试图通过阻止分析数据在不记录时通过桥发送到前端来防止它。

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

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

Answer 3

您可能应该尝试使用您正在使用的版本 80.0.3987.132 以外的版本。您尝试开发的应用程序可能不适合您使用的版本。删除您正在使用的扩展程序，清除并删除浏览器缓存的所有痕迹，然后重新下载扩展程序，就像 Daniele Molinari 所说的那样。它可能会有所帮助。如果它不让我知道。我会尝试不同的方法。