vue.js - 防止 Chrome 在开发工具打开时将注意力转移到 webpack devServer 重建上

Question

最近，我不得不从 Vue.js 2 和 Vuetify 迁移到 Vue.js 3 和 Quasar 2。我正在使用 PyCharm 开发 Python 后端和 JavaScript 前端。我正在使用 PyCharm 调用的 Google Chrome 实例来查看更改是否符合预期。

问题描述：

我使用了 Vue.js 2 和 Vuetify，npm run serve一切正常。这些更改是在后台重建的，每当我觉得一切正常时，我都可以手动聚焦 Chrome 窗口。

现在，使用 Vue.js 3 和 Quasar，我正在使用与 Quasar 一起打包的 Webpack devServer，我通过quasar dev命令运行它，但我遇到了 Chrome 的问题。如果我打开了 Chrome 开发工具，每当我保存带有更改的文件或转到另一个应用程序时，devServer 就会开始重建应用程序，并且 Chrome 窗口会立即获得焦点。这很烦人，因为它阻碍了我的工作流程，并且在重建过程中闪烁的所有东西都给我的眼睛带来了相当大的压力。

关闭开发工具时不会发生同样的情况。

问题：

有什么方法可以防止 Chrome 窃取焦点？我需要为开发工具禁用/启用一些设置吗？还是在 PyCharm 中？（我找不到任何东西。）

附加信息：

我在用着：

Kubuntu 20.04
PyCharm 2021.2.2 Professional Edition
Google Chrome 93.0.4577.82 (Official Build) (64-bit)

我的 webpack devServer 的 Quasar 配置：

devServer: {
  https: false,
  proxy: {
    '/api': {
      target: 'http://localhost:5000'
    }
  },
  port: 9999,
  open: false
},

我使用的唯一 Chrome 扩展是 Vue.js devtools (6.0.0 beta 15)。如果我禁用它并重新启动浏览器，问题仍然存在。

有一个类似的问题，不幸的是，没有答案。

如果解决此问题需要其他信息，我将很乐意提供。

编辑 2021-09-17：

问题似乎在于 PyCharm 如何与 PyCharm 调用的 Chrome 实例一起工作。如果我独立打开 Chrome 窗口，问题就消失了。

标签： vue.jsgoogle-chromewebpackpycharmquasar-framework