Chrome + 开发工具性能不佳答案

【问题标题】：Chrome + Dev Tools poor performanceChrome + 开发工具性能不佳
【发布时间】：2024-06-29 02:50:01
【问题描述】：

这是本期的测试页面：https://kasheftin.github.io/chrome-vue-draggable-performance/ 基本上就是10000个div+简单的拖拽插件。

我正在尝试找出拖拽性能非常差和滞后的原因。

仅当 Chrome 开发工具在任何开发工具选项卡上打开时才会出现此问题，但仅在默认情况下出现，而不是在移动模式下。当我打开设备工具栏（在移动设备上模拟）时，滞后消失了。它在 firefox 上也能正常工作（带检查器的 firefox 比不带开发工具的 chrome 工作得更快）。

在 Ubuntu 20.04 / Windows 10 上的 3 台 PC 上测试（全新安装，无浏览器插件，开发工具中无任何自定义设置，空缓存，历史记录，隐身模式，32GB 内存 / * cpu 硬件），Chrome 87.0。 4280.66.

还尝试了Google Chrome developer tools works very slow 的所有建议，但也没有帮助。

https://youtu.be/dOTmIG8MlbY

【问题讨论】：

对我来说，问题是我在源代码中的某个地方留下了一个条件断点......在我删除了条件断点之后，滞后就消失了。
@LuisLimas 这对我来说绝对是更安全的生活。这是我的确切情况，我花了几个小时来调试。这个问题在隐私浏览模式下没有发生，我无法解释。但看起来隐私浏览模式不共享断点配置。谢谢！！
这能回答你的问题吗？ React app slows to a crawl with chrome developer tools open. Works fine in incognito

标签： performance google-chrome google-chrome-devtools

【解决方案1】：

发生这种情况的原因有很多，我决定发布这个答案，因为它在 cmets 中很有用，每次我发现开发工具性能不佳的相关问题时，我都会尝试加班补充它：

1。源中留下的条件断点

它们可能会触发此问题，因为它们可能会不断被评估，将它们全部删除。就我而言，在那之后，滞后就消失了。

2。谷歌浏览器更新

大多数情况下，此问题是由 chrome 更新触发的，请尝试使用 Google Chrome Canary 或 Google Chrome Developer。该修复程序可能已经在这些版本上可用。

3。删除本地覆盖

拥有过多的local overrides 会降低性能，因为它会增加内存中加载的文件数量。当您覆盖大文件时尤其如此。

4。禁用 Chrome 扩展程序

一些扩展可能是问题的原因，人们至少有以下问题already reported：

1) React Developer Tools                4) Privacy Badger
2) Knockoutjs context debugger          5) uBlock Origin 
3) Brave Shields                        6) Augury

【讨论】：