React应用程序在chrome开发工具打开的情况下慢到爬行.隐姓埋名工作很好



在开发我的react应用程序时,由于开发工具在chrome中打开,该应用程序变得非常慢。它们关闭或处于隐身模式时工作迅速且良好。我试过禁用所有扩展,但遇到了同样的问题。这似乎是最近我更新chrome时开始发生的(现在版本80.0.3987.132(

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

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

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

我也有类似的问题。我的网站加载很慢,但只有在特定情况下:

  1. 开发工具已打开
  2. Tab在正常窗口中。(非隐身模式(
  3. 分析未启用

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

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

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

因此,问题一定是我的网站在本地存储或其他地方存储了太多数据,以至于开发工具被它卡住了(但只有在特定情况下,出于某种原因(。这也与隐姓埋名模式下解决的问题相匹配:;透明板岩";用于网站cookie/本地存储。

无论如何,这是一个奇怪的问题,但cookie/本地存储清理似乎对我的情况有效。(如果问题再次出现,而上面的解决方案无法解决,我会尽量记住提及它。(

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

尝试2:我相信我已经找到了根本问题和解决方案:我删除了网站的所有断点,速度减慢的问题完全解决了。所以问题似乎是,我在网站代码的各个地方设置了很多不需要的断点(有些启用了,有些禁用了(。其中一些一定是放置在";热点";他们经常接到电话。通过打开开发工具,Javascript引擎必须开始执行一些与断点相关的处理,从而降低速度。

我的猜测是,通过禁用";JavaScript源映射";设置(因为这是我唯一能想到的会导致如此大的减速的事情(,但我还没有证实这一点。

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

他们已经知道开发人员工具的速度减慢存在问题,他们试图通过阻止在不记录时通过桥接将分析数据发送到前端来防止这种情况。

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

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

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

最新更新