Question

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

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

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

提前致谢！

马特

Answer 1

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

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

Answer 2

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

Answer 3

我遇到了同样的问题。

我的问题是，我使用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。并详细说明他的答案。

Answer 4

在Linux上使用Chrome 46.x / 47.x（RHEL 7），所提出的解决方案都不适用于我。的工作原理是在高级浏览器设置中禁用“在可用时使用硬件加速”设置。

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

Answer 5

我已将其添加为对 marcel 的答案的评论，但由于它对我有很大的影响，我认为值得将其作为一个单独的回答：

我在文件中有一个内联JS源映射，总大小约为2-3MB（在开发期间未压缩）。 Chrome的页面加载速度令人难以忍受（打开Developer Tools）。大约20秒后，当解析文件和内联源映射时，事情或多或少是正常的。此外，Chrome 43（在Ubuntu上）更新后情况更糟。

只要我将源地图放在一个单独的文件中，一切都恢复正常。页面加载速度减慢了。来源可立即获得。

由于我使用browserify构建，exorcist是我使用的。更具体地说：watchify参数中的-o，如this issue中所述。

Answer 6

我有这样的问题;打开调试器窗口是缓慢的（10-20秒），每次我跨过代码，无论多么简单，我都经历了很长的延迟（10-20秒）。

我的原因是我在范围内有一些大型数组（1000个条目，10个MB数据）。调试器预先渲染所有范围内的数据（包括所有全局变量，所有悬挂在Window上的所有参数以及调用堆栈上所有函数的所有参数），以显示在＆＃34;范围变量＆＃34;窗口。如果该数据树很大，那么每一步都需要调试器很长时间才能重新计算变量检查树。

我能够解决这个问题（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>

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

Answer 7

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

Answer 8

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

Answer 9

这在以后的版本中已修复： https://code.google.com/p/chromium/issues/detail?id=485052

Answer 10

我的包含源地图的文件大约是5MB。我已经尝试过这篇文章中的所有解决方案，并且只看到了微小的改进。我最终放弃并重新安装并重新安装了Chrome。希望我马上做到这一点，我在调试器中的源映射加载从大约15秒变为3.

谷歌Chrome开发者工具包很慢

10 个答案: