一段时间以来,我一直在使用 Google Chrome 的开发工具包(元素检查、堆栈跟踪、javascript 调试等)并取得了巨大的成功。
然而,大约两周前,它突然变得非常缓慢。例如,当我在 UI 中右键单击一个元素,然后单击“检查元素”,或者当我只是按 F12 时,代码窗口需要 30-45 秒才能出现。它曾经在不到一秒钟的时间内发生。
有没有其他人遇到过这个问题?如果是这样,你能纠正它吗?如何?
提前致谢!
马特
一段时间以来,我一直在使用 Google Chrome 的开发工具包(元素检查、堆栈跟踪、javascript 调试等)并取得了巨大的成功。
然而,大约两周前,它突然变得非常缓慢。例如,当我在 UI 中右键单击一个元素,然后单击“检查元素”,或者当我只是按 F12 时,代码窗口需要 30-45 秒才能出现。它曾经在不到一秒钟的时间内发生。
有没有其他人遇到过这个问题?如果是这样,你能纠正它吗?如何?
提前致谢!
马特
我遇到了同样的问题,尝试了同样的解决方案但没有运气,直到我解雇了 procmon 并看到 Chrome 实际上正在读取我的整个 Projects 文件夹(价值数十万个文件)。
在开发工具设置应用程序的工作区/文件夹部分中有对该文件夹的引用。删除参考解决了这个问题。
这是通过在 Chrome 中清除我的缓存(临时文件、cookie 等)来解决的。不确定根本原因是什么,但这解决了问题。
我曾经也有过一样的问题。
我的问题是,我使用 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
。并显示他的答案以获取更多详细信息。
在 Linux (RHEL 7) 上使用 Chrome 46.x/47.x,建议的解决方案都不适合我。起作用的是在高级浏览器设置中禁用“可用时使用硬件加速”设置。
我在进程监视器/列表中注意到 Chrome 渲染器占用了大量 CPU,如上所述,即使在调试器中设置断点或单步执行语句也需要 10 多秒!
我已将其作为评论添加到marcel的答案中,但由于它对我产生了如此大的影响,我认为值得将其作为单独的答案:
我在一个文件中有一个内联 JS 源映射,总大小约为 2-3MB(未压缩,在开发过程中)。Chrome 的页面加载速度非常慢(打开开发者工具)。大约 20 秒后,当解析文件和内联源映射时,事情或多或少会正常。此外,Chrome 43(在 Ubuntu 上)的更新使情况变得更糟。
一旦我将源映射放在单独的文件中,一切都恢复正常。页面加载的减速消失了。资源立即可用。
因为我用browserify
, exorcist是我用的。更具体地说:with watchify
in the -o
parameter as described in this issue。
我有这样的问题;打开调试器窗口很慢(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>
不幸的是,如果您需要单步执行引用大数组的代码,那么我没有解决方法。
我的解决方案是删除一批在我的计算机上本地运行并连接到 IIS 的项目。刚刚删除了我不经常使用或不再使用的文件夹/项目。删除了 25GB 的数据,现在我的开发工具栏就像魅力一样工作!
清除缓存和所有隐私数据也解决了我的问题:-)
我的转译文件包括源地图大约 5MB。我已经尝试了这篇文章中的所有解决方案,但只看到了边际改进。我最终放弃并卸载并重新安装了 Chrome。希望我马上这样做,我在调试器中的源映射加载从大约 15 秒到 3 秒。