如何在专注于 devtools 的同时在 Electron 应用程序中切换 devtools？答案

【问题标题】：How to toggle devtools in an Electron app while focused on devtools?如何在专注于 devtools 的同时在 Electron 应用程序中切换 devtools？
【发布时间】：2019-03-18 20:44:35
【问题描述】：

我想让我的 Electron 应用切换开发者工具以响应 F12。

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

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

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

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

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 处理程序在专注于开发工具时按下键时不会被触发。

有人知道这是为什么吗？

【问题讨论】：

标签： electron google-chrome-devtools

【解决方案1】：

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

根据this issue，您无法检测到来自 devtools 的输入。

一位 Electron 开发者发表了评论here：

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

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

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

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();
          });
      });
    }
  });

【讨论】：