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

Posted 2023-03-07

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

【英文标题】：React app slows to a crawl with chrome developer tools open. Works fine in incognito

【发布时间】：2020-06-19 17:44:47

【问题描述】：

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

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

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

【问题讨论】：

我有这个版本Version 80.0.3987.87，我的 react 应用运行得非常好。您是否尝试过其他浏览器？你试过什么浏览器？在断定 chrome 是问题之前，您是否在另一台计算机上尝试过 chrome？

您是否尝试过任何性能/内存分析？

你的 devtools 控制台打印什么吗？

开发控制台中无任何打印。我的同事在使用该应用程序的同一版本上没有问题。我在 Firefox 中尝试过，没有任何问题。真正奇怪的是，当我使用 chrome devtools 性能选项卡开始录制时，所有滞后停止，然后在结束录制后再次启动。也许这表明出了什么问题？

亲爱的@tgreen，将您的系统与其他同事进行比较并不是很有价值，因为也许你们所有人的 webpack watch 选项都有相同的问题，但您的系统在其 RAM 和 CPU 架构上存在一些关键问题，它们相互冲突。所以请编辑您的问题并留下您的整个 Webpack 配置。我在开发区优化方面有一些经验。

【参考方案1】：

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

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

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

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

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

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

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

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

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

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

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

【讨论】：

这个答案被低估了！！！我几个月来一直在遇到同样的问题，但不知道问题是什么。谢谢！

正因为如此，我已经在隐身模式下开发了好几天了，快把我逼疯了！我有一个条件断点，我认为这是导致问题的原因。

如果你有很多小的 Promise（或小的异步函数），那么异步堆栈跟踪的开销可能会变得巨大。尝试按照developer.chrome.com/blog/new-in-devtools-60/#async-stacks

中的说明禁用异步堆栈跟踪

我的应用程序性能很差，我终其一生都找不到罪魁祸首，我认为这是架构问题，所以我花了大约 2 个月的时间从头开始重建整个应用程序内部结构一种完全不同的方式，只是当我正在追踪另一个问题时，问题突然再次出现。这是整个时间的断点

【参考方案2】：

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

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

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

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

【参考方案3】：

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

【讨论】：

我在上面提到过，但自从在我的笔记本电脑上完全擦除 chrome 并重新安装后，我没有看到任何问题。如果问题再次出现，我会试试这个。