Question

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

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

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

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

我尝试通过在调用toggleDevTools()之后立即在devtools网站内容中添加一个侦听器来解决此问题：

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

来解决此问题。

但是，这样做之后，在专注于devtools的情况下按下键时，不会触发我的before-input-event处理程序。

有人知道为什么吗？

Answer 1

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

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

Electron 开发者发表了评论 here：

<块引用>

我认为这是因为 toggleDevTools 菜单角色没有正确检查 devtools 窗口的“父”窗口。可能有可能让 toggleDevTools 菜单角色检查当前聚焦的窗口是否是 devtools 窗口，如果是，则在打开 devtools 的网页内容上调用 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();
          });
      });
    }
  });

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

1 个答案: