正如问题作者在评论中所指出的，这与可见的画布区域有关。打开控制台会降低视口的高度，这在正常大小的显示器上意味着要呈现的内容较少。60 FPS是由显示器刷新率给出的软限制;做更多的帧将没有意义，因为它不可能显示超过60帧每秒在一个正常的显示器。
我在我的机器上测试了这个，降低了CPU速度，所以我不总是得到60 FPS。在提供的Fiddle示例中，我通常有大约24 FPS。打开控制台将可见画布减少到原始大小的60%，平均FPS增加到30。调整控制台大小将相应地影响FPS：当只有10%的画布可见时，FPS在42左右波动;当控制台非常小且整个画布可见时，FPS略低于原始值，为23。无论控制台处于何种状态，提高CPU速度都会使FPS变为恒定值60。
现在，假设生成屏幕的JavaScript仍在运行，不管画布有多少部分可见，影响所需处理能力的是画布的实际渲染，以及画布图像与HTML的其余部分、浏览器窗口和最终屏幕的合成方式。越来越多的工作被转移到GPU上。所以当合成过程的每一个阶段都在OpenGL中完成时，FPS应该总是达到最大值。

我在我的macbook上使用chrome时也遇到了同样的问题。似乎是osx dock导致了帧速率变慢，当你打开控制台时，视口会被移到离dock足够远的地方，帧速率会回到60fps。如果你把窗口移离dock，帧速率会上升。如果你自动隐藏dock，你可以在没有打开控制台的情况下全屏显示60fps。

对我来说最好的方法就是使用这个函数

//Don't change these variable names
const times = [];
let fps;

//Replace refreshLoop with the name of your animation loop
function refreshLoop() {
  window.requestAnimationFrame(() => {
    const now = performance.now();
    while (times.length > 0 && times[0] <= now - 1000) {
      times.shift();
    }
    times.push(now);
    fps = times.length;
    //Replace refreshLoop with your animation loop here as well
    refreshLoop();
  });
}
//Don't forget to call it again here if you haven't!
refreshLoop();

注意：切换选项卡时，FPS会降低。当您切换回显示FPS的选项卡时，FPS会升高，直到实际的FPS匹配。这不会影响性能显示本身。

谷歌浏览器使用垂直同步意味着它将限制FPS到您的屏幕FPS限制，大多数屏幕是60 FPS，所以你的谷歌将匹配，如果可能的话，但不会超过它。可能有一个程序，以消除垂直同步，但我知道英伟达驱动程序可以控制这一点，但你需要一个GTX 610或高度来做到这一点