Google chrome GoogleChromeDeveloperToolkit很慢

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

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

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

提前谢谢

---

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

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

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

对我来说，原因是我在范围内有一些大型数组（1000个条目，10 MB的数据）。调试器预先呈现所有作用域内的数据（包括所有全局变量、挂起窗口的所有数据以及调用堆栈上所有函数的所有参数），以显示在“作用域变量”窗口中。如果该数据树很大，则调试器每执行一步都需要很长时间才能重新计算变量检查树

我可以通过以下方式解决这个问题： （a） 将大型数组移动到非全局范围，使其远离窗口，然后 （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>

（功能（）{
//堆栈范围内的大变量，在任何
//从这里调用的代码将很慢
var Hugarray=[…]；
计算Hugarray（Hugarray）；
})();
（功能（）{
//大变量现在超出范围，所以Chrome不会
//尝试在“范围变量”中显示它
//这使得调试和步进更快。
domoreights（）；
})();

---

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

我也遇到过同样的问题，尝试过同样的解决方案，但没有成功，直到我启动procmon，发现Chrome实际上正在读取我的整个项目文件夹（价值几十万个文件）

---

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

我也遇到了同样的问题

我的问题是，我使用browserify创建了一个大的bundle（~92k行）宽度的SOURCEMAP

browserify app.js-d-o bundle.js

我通过拆分我的

bundle.js

解决了这个问题

我通过添加

--require[module name]

将所有节点模块导出到一个单独的文件（

modules.js

）中：

然后通过添加

--external[module name]

来创建没有外包模块的

bundle.js

（

-t babelify

，因为我在项目中使用了

react

/

JSX

）

注意：在

bundle.js

之前，您必须在html中包含

module.js

My

bundle.js

从约92000行缩减到约26000行；-）

编辑：要创建不带外部模块的捆绑包（

node\u modules

），也可以使用

--无捆绑包外部

，而不是

[-x node\u MODULE\u NAME]*

编辑#2：在项目中使用包含多个子模块的模块时，

-r |-x[MAIN_module_NAME]

不需要排除子模块

react引导的示例

：

react bootstrap

包含许多子模块，

react bootstrap/lib/[submodule]

browserify-r react bootstrap>build/modules.js不需要
按钮（
react bootstrap/lib/Button
）模块。所以

…如果您正在使用

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

…您将无法在应用程序中使用
按钮
，因为
--无捆绑外部
排除所有节点模块，包括子模块。因此，不要忘记要求所有必要的子模块：

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

注意：此外，为了提高性能，您可以使用
驱魔者
将源地图放入一个单独的文件中。安装时请使用：

并更改
browserify
命令：

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

感谢smhg提供了
excorcist
的提示。并显示他的答案以了解更多细节

我把它作为对marcel的回答的一个评论，但由于它对我产生了巨大的影响，我认为值得把它作为一个单独的回答：

我在一个文件中有一个内联JS源代码映射，总大小约为2-3MB（开发期间未压缩）。Chrome的页面加载速度慢得让人无法忍受（开发工具处于打开状态）。大约20秒后，当解析文件和内联源代码映射时，事情将或多或少正常。此外，随着Chrome43（在Ubuntu上）的更新，情况变得更糟

当我把源映射放到一个单独的文件中时，一切都恢复了正常。页面加载速度变慢了。消息来源立即可用

因为我是用
browserify
构建的，所以我使用了。更具体地说：在
-o
参数中使用
watchify
，如所述。
这在将来的版本中是固定的：
我的传输文件（包括源地图）大约为5MB。我在这篇文章中尝试了所有的解决方案，只看到了微小的改进。我最终放弃了，卸载并重新安装了Chrome。但愿我能马上这么做，我在调试器中的源映射加载时间从大约15秒增加到了3秒
 我的解决方案是只删除一批在我的计算机上本地运行并连接到IIS的项目。刚刚删除的文件夹
browserify -r react-bootstrap -r react-bootstrap/lib/Button > build/modules.js

npm install --save-dev exorcist

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