如何在专注于开发工具的同时在 Electron 应用程序中切换开发工具？

Question

我想让我的 Electron 应用程序切换开发人员工具以响应 F12。

在渲染器页面中，我添加了：

const currentWebContents = require("electron").remote.getCurrentWebContents();
window.addEventListener("keydown", (e: KeyboardEvent) => {
    if (e.keyCode === 123) { // F12
        currentWebContents.toggleDevTools();
    }
});

当我专注于主页时，这会起作用。但是，开发工具打开后，焦点立即转到开发工具，因此F12不再检测到。

我尝试通过在调用后立即向 devtools webcontents 添加侦听器来解决此问题，toggleDevTools()如下所示：

if (currentWebContents.devToolsWebContents) {
    currentWebContents.devToolsWebContents.on("before-input-event", (event: Electron.Event, input: Electron.Input) => {
        if (input.type === "keyDown" && input.key === "F12") {
            currentWebContents.toggleDevTools();
        }
    });
}

然而，打开后currentWebContents.devToolsWebContents就是这样。null我的第一个问题是如何确保它不是null- 有没有办法等到它完全打开？

我通过将if (currentWebContents.devToolsWebContents)代码放入setTimeout(..., 1000);

然而，这样做后，当我before-input-event专注于开发工具时按下按键时，我的处理程序不会被触发。

有人知道这是为什么吗？

Answer 1

没有简单的方法可以做到这一点。

根据此问题，您无法检测来自开发工具的输入。

一位 Electron 开发人员在这里发表了评论：

我认为这是因为toggleDevTools 菜单角色没有正确检查devtools 窗口的“父”窗口。可能可以使用toggleDevTools菜单角色检查当前聚焦的窗口是否是devtools窗口，如果是，则在打开devtools的webcontents上调用toggleDevTools，而不是在devtools窗口本身。

无论如何，这都需要Electron开发来解决。

更新：这里有人建议了这个解决方法 - 我自己还没有尝试过：

mainWindow.webContents.on("before-input-event", (e, input) => {
    if (input.type === "keyDown" && input.key === "F12") {
      mainWindow.webContents.toggleDevTools();

      mainWindow.webContents.on('devtools-opened', () => {
        // Can't use mainWindow.webContents.devToolsWebContents.on("before-input-event") - it just doesn't intercept any events.
        mainWindow.webContents.devToolsWebContents.executeJavaScript(`
            new Promise((resolve)=> {
              addEventListener("keydown", (event) => {
                if (event.key === "F12") {
                  resolve();
                }
              }, { once: true });
            })
          `)
          .then(() => {
            mainWindow.webContents.toggleDevTools();
          });
      });
    }
  });