大源代码/缩小文件使 Chrome 开发者工具冻结

Posted 2023-03-10

【中文标题】大源代码/缩小文件使 Chrome 开发者工具冻结

【英文标题】：Big source / minified files make Chrome Developer Tools freeze

【发布时间】：2016-07-24 12:26:51

【问题描述】：

打开大型 javascript 文件，例如 Chrome 开发者工具中的缩小文件，选项卡 Sources，会使其冻结。在我的一个项目中，如果我单击jquery-1.11.1.min.js，它会挂起，除了关闭选项卡之外我什么也做不了。为了让事情变得更加困难，Chrome 会记住在 Source 选项卡上打开的最后一个文件，并记住最后打开的选项卡，因此我必须打开另一个网站，启动开发者工具并更改选项卡以使其在我的项目中运行。我不得不使用 Firefox 而不是 Chrome 进行调试。

【参考方案1】：

这是一个已知错误：Chromium Bug Tracker - Issue 593679 - [REGRESSION] DevTools: Big sources hang the Developer Tools，目前已修复，但在常规/稳定版 Google Chrome 或 Chromium 上不可用。

临时解决办法是使用Chrome Canary。

【讨论】：

如果您在 2018 年访问此问题，这是一个正在跟踪的新错误 here。

如果您在 2020 年访问，据说这个问题刚刚解决！它在 Chrome 84 中可用，这意味着您需要在 2020 年 5 月使用 Chrome Canary。

它在 84.0.4147.105 (Official Build) (64-bit) (cohort: Stable) 中仍然存在问题。

2021 年仍悬而未决

仍然挂在 90.0.4430.212（官方版本）（64 位）

【参考方案2】：

对我来说，黑盒也不起作用。仅帮助：

杀死占用 CPU 的 Chrome 进程（开发者工具将被关闭） 打开任何没有大量源文件的网站（例如 ya.ru） 将源标签切换到另一个标签 在目标网站上打开开发者工具（不要切换到源选项卡）

我在 Chrome Canary 上也没有这个问题

【讨论】：

是的，最近在 Chrome Canary 上解决了这个问题。我将编辑我的帖子以反映这一点。

感谢您的工作流程，让 Dev tools.to 解冻真是太痛苦了。

【参考方案3】：

Chrome 会记住在“源”选项卡上打开的最后一个文件

这就是我解决这个问题的方法，并恢复了我的来源标签：

在挂起它的站点以外的站点上打开 devtools Ctrl + Shift + I 检查开发工具本身 转到“应用程序”选项卡，然后转到“本地存储” 在devtools://devtools 下找到previouslyViewedFiles 键 按删除键删除条目

【讨论】：

哇。这真的很有用。从来没有意识到你可以为 devTools 打开 devTools。非常感谢。在尝试打开一个非常大的缩小 javascript 文件后，我很难让 devTools 备份。

同意，这不仅非常有帮助，而且从某种意义上说，您可以在 devTools 上运行 devTools，这让您大开眼界。太酷了！！！！

【参考方案4】：

2020 年 9 月更新：

刚刚回来注意到我测试了 Chrome 稳定版 85.0.4183.121，这有了很大的改进！ （我有一段时间没有测试了，所以我不确定它是什么时候改进的。但在 5 月 bug report 上出现了一些变化。）

2019 年 9 月：Chrome 77 仍然存在此问题。

这里是one way 它发生了：

打开页面，打开调试工具 打开你想要的压缩JS文件，点击漂亮的格式按钮。 在第 N 行和第 N+1 行设置两个断点 刷新您的浏览器。快速命中第一个断点。 按恢复/F8 需要 2 分钟才能到达下一个断点。

这里是another way 它发生了：

打开页面，刷新几次，一切正常 打开调试工具，查找文件，漂亮打印 刷新几次，还是不错的 尝试在格式漂亮的文件中添加断点... 冻结，cpu 固定，无法点击 140 秒后，工具再次响应

【参考方案5】：

漂亮地打印缩小文件（在调试器中，通过单击 按钮）似乎“解决”了这个问题（版本 51.0.2704.103 m）。 Chrome 最初会缓慢爬行，但单击并给它几秒钟的时间，它会在显示漂亮的打印源时立即平静下来。

【讨论】：

这并不是很有用，因为在加载文件时窗口仍然冻结。漂亮的打印文件需要一定要加载内容吗？

@JohanAspeling：对我来说，它的工作速度很慢（如前所述）。必须加载文件才能执行（并失败）代码，所以我认为需要时间的是漂亮的打印过程而不是（重新）加载已经在内存中的文件。

【参考方案6】：

对我来说，直到我尝试将更改保存到 sources 面板中的一个大的、缩小的 JS 文件之前，我的浏览器并没有死机。 Chrome Canary 并没有像其他人那样为我解决这个问题，但我能够通过使用 Chrome 开发工具中的“本地覆盖”功能找到一个可靠的解决方法。 https://developers.google.com/web/updates/2018/01/devtools#overrides

当我将开发工具中的更改保存到源选项卡中的 javjascript 文件时，Chrome 仍然崩溃，但它确实成功地将其保存到 overrides 文件夹，并且我能够在重新加载 Chrome 后在我​​的网站上看到此更改。