41

一段时间以来，我一直在使用 Google Chrome 的开发工具包（元素检查、堆栈跟踪、javascript 调试等）并取得了巨大的成功。

然而，大约两周前，它突然变得非常缓慢。例如，当我在 UI 中右键单击一个元素，然后单击“检查元素”，或者当我只是按 F12 时，代码窗口需要 30-45 秒才能出现。它曾经在不到一秒钟的时间内发生。

有没有其他人遇到过这个问题？如果是这样，你能纠正它吗？如何？

提前致谢！

马特

4

10 回答 10

37

我遇到了同样的问题，尝试了同样的解决方案但没有运气，直到我解雇了 procmon 并看到 Chrome 实际上正在读取我的整个 Projects 文件夹（价值数十万个文件）。

在开发工具设置应用程序的工作区/文件夹部分中有对该文件夹的引用。删除参考解决了这个问题。

于 2014-03-10T16:17:01.607 回答
10

这是通过在 Chrome 中清除我的缓存（临时文件、cookie 等）来解决的。不确定根本原因是什么，但这解决了问题。

于 2011-11-23T19:27:53.887 回答
4

我曾经也有过一样的问题。

我的问题是，我使用 browserify 创建了一个大包（~92k 行）宽度 SOURCEMAP。browserify app.js -d -o bundle.js.

我通过拆分我的bundle.js.

我通过添加将所有节点模块导出到一个单独的文件 ( modules.js) 中--require [module name]：

browserify -r react -r lodash -r three > build/modules.js

然后bundle.js通过添加创建没有外包模块的--external [module name].

browserify -t babelify -x react -x lodash -x three src/app.js > build/bundle.js

( -t babelify，因为我在我的项目中使用了react/ 。)JSX

注意：你必须包含module.js在你的 html 之前bundle.js。

我bundle.js的行数从 ~92000 缩减到 ~26000 行；-)

编辑：要创建没有外部模块 ( node_modules) 的包，您也可以--no-bundle-external使用[-x NODE_MODULE_NAME]*.

编辑#2：当您在项目中使用包含许多子模块的模块时，-r|-x [MAIN_MODULE_NAME]不需要|排除子模块。

示例react-bootstrap：

react-bootstrap包含许多子模块，react-bootstrap/lib/[submodule].

browserify -r react-bootstrap > build/modules.js不需要例如Button( react-bootstrap/lib/Button) 模块。所以...

...如果您正在使用

browserify --no-bundle-external src/app.js > build/bundle.js

...您将无法Button在您的应用程序中使用，因为--no-bundle-external不包括所有节点模块，包括子模块。所以不要忘记要求所有必要的子模块：

browserify -r react-bootstrap -r react-bootstrap/lib/Button > build/modules.js

注意：此外，为了提高性能，您可以使用exorcist将源映射放入单独的文件中。安装它：

npm install --save-dev exorcist

并更改您的browserify命令：

browserify --no-bundle-external src/app.js | exorcist build/bundle.js.map > build/bundle.js

感谢 smhg的提示excorcist。并显示他的答案以获取更多详细信息。

于 2015-05-22T13:44:48.917 回答
3

在 Linux (RHEL 7) 上使用 Chrome 46.x/47.x，建议的解决方案都不适合我。起作用的是在高级浏览器设置中禁用“可用时使用硬件加速”设置。

我在进程监视器/列表中注意到 Chrome 渲染器占用了大量 CPU，如上所述，即使在调试器中设置断点或单步执行语句也需要 10 多秒！

于 2015-12-08T13:45:07.063 回答
2

我已将其作为评论添加到marcel的答案中，但由于它对我产生了如此大的影响，我认为值得将其作为单独的答案：

我在一个文件中有一个内联 JS 源映射，总大小约为 2-3MB（未压缩，在开发过程中）。Chrome 的页面加载速度非常慢（打开开发者工具）。大约 20 秒后，当解析文件和内联源映射时，事情或多或少会正常。此外，Chrome 43（在 Ubuntu 上）的更新使情况变得更糟。

一旦我将源映射放在单独的文件中，一切都恢复正常。页面加载的减速消失了。资源立即可用。

因为我用browserify, exorcist是我用的。更具体地说：with watchifyin the -oparameter as described in this issue。

于 2015-05-24T11:21:13.950 回答
1

我有这样的问题；打开调试器窗口很慢（10-20 秒），而且每次我跳过代码时，无论多么简单，我都会经历很长的延迟（10-20 秒）。

对我来说，原因是我在范围内有一些大型数组（1000 个条目，10 个 MB 数据）。调试器预渲染所有范围内的数据（包括所有全局变量、挂在窗口外的所有内容以及调用堆栈上所有函数的所有参数）以显示在“范围变量”窗口中。如果该数据树很大，那么每一步调试器都将花费很长时间来重新计算变量检查树。

我能够通过 (a) 将大数组移动到非全局范围内，使其远离 Window，然后 (b) 将程序的其余部分移动到单独的范围内来解决这个问题。像这样：

<script>
(function() {
  // large variable in stack scope, stepping in any
  // code called from here will be slow
  var hugeArray = [...];
  calculateHugeArray(hugeArray);
})();

(function() {
  // large variable now out of scope, so Chrome won't
  // try to display it in the "Scope Variables"
  // window. This makes debugging and stepping faster.
  doMoreThings();
})();
</script>

不幸的是，如果您需要单步执行引用大数组的代码，那么我没有解决方法。

于 2013-11-08T20:56:40.417 回答
1

我的解决方案是删除一批在我的计算机上本地运行并连接到 IIS 的项目。刚刚删除了我不经常使用或不再使用的文件夹/项目。删除了 25GB 的数据，现在我的开发工具栏就像魅力一样工作！

于 2015-10-01T14:33:32.617 回答
0

清除缓存和所有隐私数据也解决了我的问题:-)

于 2012-11-22T04:50:08.487 回答
0

这在未来的版本中得到修复： https ://code.google.com/p/chromium/issues/detail?id=485052

于 2015-06-04T11:19:29.997 回答
0

我的转译文件包括源地图大约 5MB。我已经尝试了这篇文章中的所有解决方案，但只看到了边际改进。我最终放弃并卸载并重新安装了 Chrome。希望我马上这样做，我在调试器中的源映射加载从大约 15 秒到 3 秒。

于 2015-06-12T14:45:05.577 回答