reactjs - 打开 Chrome 开发者工具后，React 应用程序速度会慢得像爬行一样。在隐身模式下工作正常

Question

当开发我的 React 应用程序时，在 Chrome 中打开开发工具时，应用程序变得非常慢。在关闭或隐身模式下工作快速且良好。我尝试禁用所有扩展并遇到同样的问题。最近当我更新 chrome 时(现在版本为 80.0.3987.132)，这种情况似乎开始发生。

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

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

Answer 1

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

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

1. 开发工具已开放。
2. 选项卡位于普通窗口中。 (不是隐身模式)
3. 分析未启用。

如果(且仅当)这三个条件全部满足，网站加载速度会慢得难以忍受(15 秒以上；通常约为 3 秒)，并且网站上的某些操作会出现性能问题 (就像更改打开的子面板一样)。这很奇怪。

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

尝试 1:我尝试使用地址栏左侧的信息/锁定下拉菜单清除网站的所有 Cookie 和本地存储。令人惊讶的是，这似乎已经解决了它! (编辑:这不是根本问题；请参阅下文)

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

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

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

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

我的猜测是，通过禁用“JavaScript 源映射”设置也可以解决该问题(因为这是我认为唯一会导致速度大幅下降的事情)，但我尚未证实这一点。