昨天下午休息的时候，发现我工作用的 Mac Mini 在疯狂地散热中，打开 Activity Monitor 发现是 Chrome 浏览器导致的，再打开 Chrome 的 Task Manager 发现是 Developer Tools，如下图所示：
<img src="https://pic1.zhimg.com/v2-efa70052d894edcd2a92f9bf377ce16c_b.png" data-rawwidth="1408" data-rawheight="394" class="origin_image zh-lightbox-thumb" width="1408" data-original="https://pic1.zhimg.com/v2-efa70052d894edcd2a92f9bf377ce16c_r.png">
内存正常，但是这个 CPU，有点夸张。
于是，我：
- 新起了一个用户进程，发现没有这个问题
- 把自用的浏览器插件都禁掉，发现正常
- 关了 Developer Tool，也发现不会出现这个情况
便怀疑是插件的问题，然后就手动地一个个开启，发现是 React Dev Tools 的问题。整理了一下触发这个问题的条件：
- Chrome 浏览器里安装了 React Dev Tool 插件
- 在 Tab 1 中打开了 Chrome 的 Developer tool
- 切换到 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 年后，就没有修改过了：
<img src="https://pic3.zhimg.com/v2-229a6276fa65f65deda5656e7c7567e6_b.png" data-rawwidth="852" data-rawheight="444" class="origin_image zh-lightbox-thumb" width="852" data-original="https://pic3.zhimg.com/v2-229a6276fa65f65deda5656e7c7567e6_r.png">
那么，问题就出现在 setInterva 方法里。
于是，自己我便提取了相关的插件：chrome-59-show-setinterval-issue-code
而在这个方法里，关键点是：
chrome.devtools.inspectedWindow.eval(`jQuery.fn.jquery`, function(pageHasReact, err) {});
后来，发现有相当多的插件会使用这样的方式，来对检测是否含相应的环境，如：
- Vue DevTools
- React Dev Tools
- Ember Inspector
- 等等
在他们的代码里都有相似的 setInterval，如 const checkVueInterval =setInterval(createPanelIfHasVue, 1000)
然后 CPU 就~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
已向 Chrome 报 Bug 了：bugs.chromium.org/p/chromium/…
你呢，遇到同样的问题吗？
