打开 Chrome devtools 如何改变行为？答案

【问题标题】：How does having Chrome devtools open change behaviour?打开 Chrome devtools 如何改变行为？
【发布时间】：2019-12-07 07:54:39
【问题描述】：

在我的 JavaScript 中，我实现了一个隐藏标题栏的功能，它由滚动事件触发。所以当我向下滚动时，标题栏是隐藏的。当我开始向上滚动时，它就显露出来了。可以将其视为与大多数移动浏览器对搜索栏所做的类似效果。

事情是这样的……打开 devtools，它工作得很好。如果我关闭 devtools，效果将不再有效，即。当我向下滚动时，标题栏仍然可见。如果我重新打开 devtools (ctrl-shift-j)，效果会再次起作用。我在单独的窗口中运行 devtools，因此它的存在不会影响我的应用程序的窗口尺寸。

有人知道 Chrome 开发工具的存在对 Javascript 或渲染行为有什么影响吗？

注意，对于任何错过我问题要点的快速阅读者，我不要求解决我所看到的问题。我只是专门询问我的问题的答案。

编辑：我现在发现在前台和后台使用 devconsole 也很重要。在前台使用控制台时，它可以工作，在后台它会失败。在https://ibb.co/4M75sPQ查看动画 gif

【问题讨论】：

您可以将minimal reproducible example 放在一起，以便我们自己查看。在此过程中，您甚至可能会发现问题。
@DaveS 不幸的是，这是不可能的。该应用程序相当复杂，涉及 redux lit-element 和一些相当深入的嵌套组件。这就是为什么我特别将其表述为一个问题（“让 devtools 开放如何影响行为？”）而不是“嘿，有人可以解决我的问题”。我只是描述这个问题来为我的问题提供一些背景。
在 devtools 网络选项卡时检查禁用缓存是否打开，看看这是否导致情况有所不同？
这可能有利于该理论，如果选项卡在前台，chrome 必须提供更多资源。
不幸的是它很难调试和测试这个问题，祝你好运找到问题。如果我有其他想法，我会在这里发布答案。

标签： javascript google-chrome google-chrome-devtools

【解决方案1】：

很久以前我在堆栈中有一个类似的问题。我的影响了 JS 的执行方式和速度，特别是当我打开控制台时 JSPerf 变慢了，测试完全搞砸了you can take a look at my answer here

不过，有些问题可能与您的 devtools 配置有关，正如该用户在此问题中指出的那样 https://askubuntu.com/a/633838/742250

您是否尝试过在隐身窗口或其他浏览器中使用？ Mozilla 还是 Safari？

【讨论】：

【解决方案2】：

Chrome DevTools 会将焦点从您的应用移开，因此，如果您的应用在任何方面对焦点敏感，或者受到前台与后台窗口的相对执行优先级的影响，这可能是一个因素。

【讨论】：