Electron：如何重新聚焦/恢复最小化的 DevTools 窗口

Question

我创建了一个全局快捷方式，Ctrl+Shift+I 在其中打开一个分离的 DevTools 窗口。但是，当 DevTools 窗口最小化时，按 Ctrl+Shift+I 不会执行任何操作。

我希望能够使用Ctrl+Shift+I 快​​捷方式恢复/取消最小化最小化的 DevTools 窗口。 .focus 方法通常适用于这样的事情，但在这种情况下不起作用。我也尝试过对窗口使用“未停靠”模式。

我必须实现当前行为的代码是这样的：

if (focussedWindow.webContents.isDevToolsOpened()) {
      if (focussedWindow.webContents.devToolsWebContents !== null) {                            
              focussedWindow.webContents.devToolsWebContents.focus();
       }
}

我还应该补充一点，如果 DevTools 窗口位于其他窗口之后，它会重新聚焦，而不是在最小化时。

我在 Windows 10 Pro 上使用 Electron 9.3.0。

Answer 1

情况

在 Linux 上，BrowserWindow.webContents.devToolsWebContents.focus() 会根据需要恢复最小化的分离 DevTools 窗口。

在 Windows 上，这不起作用（在 Win 7 上使用 Electron 9.3.0 和 10.1.1 进行了测试）。最小化的分离 DevTools 窗口保持最小化。

解决方法

在尝试了 许多 在 Windows 上都不起作用的变通方法后，我发现了以下技巧：为 DevTools 创建一个新的 BrowserWindow 来占用。有了这个参考，您现在可以简单地调用BrowserWindow.restore()。

const {app, BrowserWindow} = require("electron");
const url = require("url");
const path = require("path");

let mainWindow, newDevToolsWindow;

app.on("ready", function() {
    mainWindow = new BrowserWindow();

    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, "index.html"),
        protocol: "file:",
        slashes: true
    }));

    console.log("create new window for devtools")
    newDevToolsWindow = new BrowserWindow();
    mainWindow.webContents.setDevToolsWebContents(newDevToolsWindow.webContents);
    mainWindow.webContents.openDevTools({mode: "detach"});

    // Simulate OP's keypress
    setInterval(() => {
        console.log("restore the new window")
        newDevToolsWindow.restore();
    }, 4000);

});

注意事项：

• 该解决方法已在 Win 7 上使用 Electron 9.3.0 和 10.1.1 进行了测试。
• 如果您想在分离模式下复制标准 DevTools 窗口行为，您可能需要稍微调整 BrowserWindow。
• 另请注意，isDevToolsOpened 将返回 false，因此您还需要调整检查。