React、Vue、Ember 及其他前端开发者，请暂缓更新到 Chrome 59 浏览器

昨天下午休息的时候，发现我工作用的 Mac Mini 在疯狂地散热中，打开 Activity Manger 发现是 Chrome 浏览器导致的，再打开 Chrome 的 Task Manager 发现是 Developer Tools，如下图所示：

Chrome Task Manager

内存正常，但是这个 CPU，有点夸张。

于是，我：

• 新起了一个用户进程，发现没有这个问题
• 把自用的浏览器插件都禁掉，发现正常
• 关了 Developer Tool，也发现不会出现这个情况

便怀疑是插件的问题，然后就手动地一个个开启，发现是 React Dev Tools 的问题。整理了一下触发这个问题的条件：

1. Chrome 浏览器里安装了 React Dev Tool 插件
2. 在 Tab 1 中打开了 Chrome 的 Developer tool
3. 切换到 Tab 2，让 Tab 1 与 Dev Tool 在后台运行

随后，在 React Dev Tool 的 GitHub 上发现了相应的 issue：High CPU when tab is in background #739

而触发 Issue 的代码则是：

var loadCheckInterval = setInterval(function() {  createPanelIfReactLoaded();}, 1000);

但是，这个文件从 2015 年后，就没有修改过了：

React DevTool main.js 修改时间

那么，问题就出现在 setInterva 方法里。

于是，自己我便提取了相关的插件：chrome-59-show-setinterval-issue-code

而在这个方法里，关键点是：

chrome.devtools.inspectedWindow.eval(`jQuery.fn.jquery`, function(pageHasReact, err) {});

后来，发现有相当多的插件会使用这样的方式，来对检测是否含相应的环境，如：

• Vue DevTools
• React Dev Tools
• Ember Inspector
• 等等

因为我没有 Windows 电脑，所以没有试过。在他们的代码里都有相似的 setInterval，如 const checkVueInterval =setInterval(createPanelIfHasVue, 1000)

然后 CPU 就~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

已向 Chrome 报 Bug 了。

因此

如果你最近用的 Chrome 59 也异常，请禁用 React、Vue、Ember 等开发者工具。

如果你最近用的 Chrome 59 也异常，请禁用 React、Vue、Ember 等开发者工具。

你呢，中招没？