当Chrome开发者工具打开时，Reaction应用程序变得非常缓慢。隐姓埋名很管用 [英] React app slows to a crawl with chrome developer tools open. Works fine in incognito
问题描述
在开发我的Reaction应用程序时，当DevTools在Chrome中打开时，应用程序变得异常缓慢。在关闭或隐姓埋名模式下快速、良好地工作。我已经尝试禁用所有扩展，但遇到了同样的问题。这似乎是最近我更新Chrome(现在的版本是80.0.3987.132)时开始发生的。
我不确定从哪里开始调试此问题，但在我的应用上进行开发变得非常令人沮丧。
如有任何调试建议或帮助，我们将不胜感激。
推荐答案
tl；dr：转到"源"选项卡并删除该网站的所有断点。
我也有过类似的问题。我的站点加载非常慢，但仅在特定情况下：
- 开发工具已打开。
- Tab位于普通窗口中。(非隐身模式)
- 分析未启用。
如果(且仅当)所有这三个条件都满足，则站点加载将慢得令人无法忍受(15秒以上；通常为~3秒)，而且站点上的某些操作会出现性能问题(如更改打开的子面板)。非常奇怪。
和您一样，我尝试禁用所有扩展，但问题仍然存在。
尝试1：我尝试使用地址栏左侧的INFO/LOCK下拉菜单清除站点的所有cookie和本地存储。令人惊讶的是，这似乎解决了它！(编辑：这不是根本问题；请参阅下面的内容)
所以问题一定是我的站点在本地存储中存储了太多数据，以至于dev-tools对此感到窒息(但由于某些原因，仅在特定情况下)。这也与隐姓埋名模式中的问题解决相匹配：隐姓埋名模式对站点Cookie/本地存储使用清除石板(&Q；Clear Slate&Q；)。
无论如何，这是一个奇怪的问题，但是cookie/本地存储清除似乎对我的情况有效。(如果问题再次出现，而上面的解决方案无法解决它，我将尽量记住提及。)
更新：奇怪的是，即使在修复之后(即。满足这三个条件仍然会降低页面加载和操作的速度，只是比修复前要慢得多)。因此，显然，修复只是降低了问题的强度，而不是完全修复问题；例如，通过重置本地存储，它会减小数据的大小，而数据大小不知何故是影响核心问题(尚未确定)的变量。
尝试2：我相信我已经找到了根本问题和解决方案：我删除了站点的所有断点，减慢问题完全解决了。所以问题似乎是我在网站代码中的不同位置设置了许多不需要的断点(一些启用，一些禁用)。其中一些肯定被放置在经常被调用的热点区域/附近。通过打开dev-tools，Javascript引擎必须开始执行一些与断点相关的处理，从而减慢速度。
我的猜测是，通过禁用"；JavaScript源映射"；设置也可以修复该问题(因为这是我认为会导致如此大的减速的唯一原因)，但我还没有确认这一点。
这篇关于当Chrome开发者工具打开时，Reaction应用程序变得非常缓慢。隐姓埋名很管用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
