谷歌浏览器开发者工具运行速度很慢

Posted 2023-02-25

【中文标题】谷歌浏览器开发者工具运行速度很慢

【英文标题】：Google Chrome developer tools works very slow

【发布时间】：2016-08-23 03:53:36

【问题描述】：

自从 Google Chrome 更新到 50.x 版本后，就无法使用 DevTools。此问题主要在“网络”选项卡中重现。每次单击“请求”大约需要 30-40 秒。之后 chrome 可能会崩溃。尝试删除所有扩展，清除缓存并重新安装，但没有帮助。有人知道如何解决这个问题吗？

我正在运行 Chrome 50.0.2661.87 m

UPD：问题可能是由于标题过长。尝试关闭响应和请求标头。

【问题讨论】：

当您说单击“请求”时，您的意思是单击任何请求或标有“请求”的 UI 的特定部分吗？您可以链接到您遇到问题的示例网站吗？我尝试在 *** 网站上重现，但没有遇到问题。

@MattZeunert 可能你可以在任何网站上找到它，但试试这个en.wikipedia.org/wiki/Main_Page 或在有很多脚本和 XMLHttpRequests 的网站上。打开 devtools -> Network -> 单击列表中的一些请求或脚本 -> 转到 headers/preview。导航花费了太多时间（至少对我来说） - 30 秒

昨天我也开始出现这个问题。除了重命名“默认”配置文件以防配置文件损坏之外，还尝试了许多相同的步骤。今晚将在家里尝试另一台机器。

我在 50.0.2661.102 OSX 上，当我尝试编辑 CSS 属性时遇到了同样的问题。实际更新该值需要花费大量时间，而且大多数情况下它甚至会删除我输入的最新字符。真烦人。

在大型 Angular 应用程序上工作，在控制台和元素查看器之间切换确实很麻烦。在控制台中执行任何操作时，GUI 会变得非常慢。在屏幕上选择元素时通常会有 2 秒的延迟。

【参考方案1】：

转到网络工具并更改它，没有任何限制。如果您更改移动设置，有时会发生这种情况。谷歌浏览器更改此设置以在互联网连接较低的情况下测试移动设备并保持这种状态。

【参考方案2】：

我通过执行以下操作再次加速了 Chrome：

打开 DevTools -> 选择 Elements 选项卡 -> 选择嵌套的Computed选项卡->在Filter下，确保Show all没有被选中。 选择嵌套的 Event Listeners 选项卡 -> 确保未选中 Ancestors 和 Framework listeners。

【参考方案3】：

对我来说，在 Ubuntu 18 上运行 Chrome 版本 81.0.4044.138（官方构建）（64 位），问题似乎是移动视图。 当我禁用移动视图检查时，再次变得非常快。我认为这是由触摸仿真和其他移动设备引起的。

为了获得类似于移动视图的内容，我将 DevTools 扩展坞移到一边并调整其大小，直到获得所需的宽度。它并不完美，但大多数时候都很有用。

除了 Chrome，Firefox 在检查网站时要快得多，尽管我没有使用 FF，因为我习惯了 Chrome 上的特定内容。此外，我使用的大多数网站都不会在 Chrome 上触发这些问题，事实上，只有一个网站会发生这种情况。

PD：在 Chrome 开发工具上触发问题的网站有很多 CSS 变量。不确定这是否相关。

1 周前更新 通过禁用“显示媒体查询”选项，即使在移动视图中，我也能够毫无问题地使用 Chrome

【参考方案4】：

终于找到了一个解决方案，经过这么长时间和这么多失败的尝试修复它后对我有帮助：Solution on Google Chrome Forums

转到chrome://flags/#force-color-profile

将其更改为 sRGB

由于 Google 不允许直接链接到 chrome://，因此您必须自己插入冒号，或者将整个链接手动输入到您的工具栏中。

【讨论】：

我不相信你，因为这似乎完全无关。但它确实有帮助！太感谢了！ ?‍♂️

由于 Windows 10 上的 KB5001330，这在我的机器上是一个严重的问题。无论谁应用了此更新但没有收到适当的补丁，这有助于继续工作，直到补丁到达。

这是修复方法，但如果单击链接 chrome://flags/#force-color-profile 可能无法正常工作。这是一个真实的链接。如果它像我一样给您带来麻烦，您必须将该链接复制并粘贴到地址栏中。

我还以为我缺少内存！非常感谢

还在 Edge 上帮助了我。显然，链接将改为 edge://flags/#force-color-profile

【参考方案5】：

就我而言，我在“下载”文件夹中设置了本地覆盖设置 (https://developers.google.com/web/updates/2018/01/devtools#overrides)，其中包含大量文件，这降低了开发工具的速度。

在其自己的单独目录中设置覆盖解决了缓慢问题。

【参考方案6】：

将resource 的大小减小为overridden

只有代码行数较少的 overriding 文件对我来说效果很好。我登陆这里是因为我是 overriding 一个文件，其中包含 35,000 + 行 javascript。

此外，如果您的resource 是新的 - 即它不包含在script 标签或link 标签中，您可以override main html document 并添加标签：<script src="/my-new-script.js"></script>。在Chrome 上的Overrides folder 中将文件添加到您的域根目录：

overridingHTML

然后overriding自定义脚本：

祝你好运……

【参考方案7】：

我也面临同样的问题。

我尝试了未经检查的切换截屏视频。现在它工作正常。

【讨论】：

如果其他人也在努力寻找“切换截屏”：这是 DevTools 左上角的图标

【参考方案8】：

通过停用所有断点让 devtools 再次变得敏捷：

转到Sources 标签，显示调试器（可能被隐藏）并点击Deactivate breakpoints。

（Windows 10 上的 Chrome v62.0）

【讨论】：

就是这样！尝试了此线程中的所有内容，但这终于奏效了。我猜对于大型 js 项目，它似乎会导致问题。

【参考方案9】：

我使用的是版本 61.0.3163.79，我遇到了与这篇文章中提到的相同的问题。

通过一些搜索，我发现问题出在我使用的用户身上。我尝试的是以访客身份输入 int google chrome，并且 devtools 再次变得更快。

所以我做的是：

检查使用来宾用户进行调试是否更快。 Logout from the account。 Clean all cache associated to google chrome. 重启电脑（但我觉得关闭浏览器就够了） Login again in your account。

我希望这可以帮助其他有同样问题的人。

[编辑：]

我发现一段时间（几周）后，谷歌浏览器开发工具会再次变慢。所以我尝试了以下解决方案，它奏效了：

打开dev tools 转到Sources 选项卡。 清除了所有监视的变量、断点、DOM 断点和事件监听器断点。

[第二次编辑：]

几周后，问题又来了。我所做的是安装google canary Version 64.0.3249.2 canary (64-bit)，我的问题就消失了。

谁不知道什么是金丝雀，请查看this链接。

【讨论】：

删除不必要的断点立即解决了我的问题。

【参考方案10】：

我的情况也类似，在开发者工具响应极其缓慢的情况下挣扎了一段时间后，我发现问题是由我为 knockoutJs 安装的 Chrome 扩展程序引起的。 因此，对于遇到这些问题的人，作为初始故障排除的一部分，请尝试禁用 Chrome 扩展程序。

【讨论】：

不错的一个。对我来说，它是Knockoutjs context debugger 扩展名。干杯！

对我来说是React Developer Tools！只发生在 Mac 上，不会发生在 Windows 上。

禁用Augury 扩展对我有帮助。谢谢！

可以确认React Developer Tools也会影响windows

可以确认：Brave Shields，Privacy Badger，uBlock Origin

【参考方案11】：

如果其他人来到这里遇到与我相同的问题，请尝试将您正在查看的开发工具选项卡更改为 元素。

我打开了“源”选项卡，Chrome 正试图为该选项卡加载大量资源，这在我创建的 console.log() 事件与显示这些记录的消息之间造成了数秒的延迟。

【参考方案12】：

我在 54.0.2840.99 m 版本的 Google Chrome 上遇到了同样的时间问题。

但是切换到 Chrome Canary 成功了！

【讨论】：

Google Canary 一直为我工作到最后一次更新，59.0.3054.1 版本也很慢:(

【参考方案13】：

Google 意识到了这个问题 - https://bugs.chromium.org/p/chromium/issues/detail?id=624097

这个问题似乎在 v.53 中消失了——他们目前正试图找出是什么解决了这个问题。如果可能，该修复将合并回 v.52。但至少他们正在努力。

【讨论】：

我现在正在开发 v53.0.2785.101，但仍有问题。太没用了，我安装了firefox，好多年没用了……

这里几乎一样 - 想在 div 中编辑一些文本以显示客户端，在我单击更改为可编辑文本后花了 30 秒。

当我发现这个线程时，我正在使用 v53。所以这似乎不正确？然而，53.0.2785.143 m 似乎更好。虽然不确定是否只是重新启动才能解决问题。

Chrome 54.0.2840.71 m（64 位）中的相同问题

任何解决方法？我试过金丝雀，对我来说也是一样。我现在必须切换到 Firefox...

【参考方案14】：

我在 Mac OS X 10.11.3 上的 Chrome 版本 50+ 中调试时遇到了类似问题。到目前为止，我发现的唯一解决方案是将开发工具停靠在右侧，并且它似乎和以前一样高效。不是最佳解决方案，但它适用于我的情况。

【讨论】：

完全奇怪，但绝对是救命稻草。我喜欢认为这种解决方法不需要太长时间，但它使开发工具对我再次可用。谢谢！

即使是未固定的屏幕宽度工具也存在与报告相同的问题。当变窄时，它会正常工作。这绝对是奇怪的:) 是在某处报道的吗？编辑：它基于源窗口的宽度！越窄，反应越快。谢谢@Chris！

似乎又回到了 60.0.3112.113。此修复程序再次有效。

刚刚在 Chrome 61.0.3163.100 中遇到了这个问题。再一次，更窄的窗口完全修复了它！

@Rebar 如果您还没有修复它，那么几周前发现了另一个修复程序link