也许我误解了，但是你可以用ctrl + shift + I来调出开发工具。
或者，如果你想通过编程来完成它，我的方法是在main.js文件中包含下面几行代码，然后传递给electron。

var app = require('app');
var BrowserWindows = require('browser-window');
    
app.on('ready', function(){
    mainWindow = new BrowserWindow({width:800, height:600});
    mainWindow.webContents.openDevTools();
}

我相信你的部分问题可能是你没有等待应用程序准备好，然后才尝试用它做一些事情。

因此，在您完成以下要求之后：

var app = require('app');

您可以使用以下代码（我在我的应用程序中使用它）：

app.commandLine.appendSwitch('remote-debugging-port', '8315');
app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1');

访问以下地址允许我在Chrome中调试应用程序：

http://127.0.0.1:8315

我希望这对你有帮助。我也是新来的电子！
如果您还需要对底层浏览器引擎进行一些配置，请参阅the docs。

你可以像这样打开开发工具：

mainWindow = new BrowserWindow({ width: 1024, height: 768 });
mainWindow.loadURL('your url');
mainWindow.webContents.openDevTools();
mainWindow.webContents.on('devtools-opened', () => {
    setImmediate(() => {
        // do whatever you want to do after dev tool completely opened here
        mainWindow.focus();
    });
});

为了能够通过击键打开开发工具，我在index.html中添加了以下代码：

<script>
    // for electron
    if (typeof require !== 'undefined') {
        const currentWebContents = require('electron').remote.getCurrentWebContents();
        document.addEventListener('keyup', ({ key, ctrlKey, shiftKey, metaKey, altKey }) => {
            if (
                key === 'F12' ||
                (ctrlKey && shiftKey && key === 'I') ||
                (metaKey && altKey && key === 'i')
            ) {
                currentWebContents.openDevTools();
            }
        });
    }
</script>

请注意，这允许生产电子应用程序的任何用户使用常用键盘快捷键访问开发工具（功能：F12或ctrl + shift + i（在PC上），cmd + option + i（在Mac上））。
有一件事对我来说不起作用，那就是把它传递给BrowserWindow构造函数：

webPreferences: {
    devTools: true
}

很有可能，Electron无法理解您提供的应用程序文件夹的路径。您必须提供包含package.json的应用程序目录的相对或绝对路径。例如，如果应用程序的package.json文件位于/home/user/my_awesome_app/package.json，则为了启动应用程序，您必须发出以下命令：

electron /home/user/my_awesome_app

还要注意package.json文件中的main属性指示应用程序的入口点。在您的情况下，它必须如下所示：

"main": "src/main.js"

应用程序的名称是包含所有应用程序树的文件夹的名称。因此，要执行，你必须写，例如，如果你的文件夹名为Electron;

electron Electron

总是在提示路径，你的文件夹所在.希望这有帮助.
（抱歉，我的英语有点生疏）

以下是适用于Electron〉= 1.2.1版本的解决方案
1-在应用程序文件夹中

npm install --save-dev electron-react-devtools

2-打开你的电子应用程序，点击（查看/切换开发者工具）。在控制台选项卡中插入以下代码并按回车键：

require('electron-react-devtools').install()

3-重新加载/刷新你的电子应用页面，你会看到react dev工具出现。
4-成交！

请参见下面的屏幕截图

我知道这可能不是如何安装devtools，但我发现alert是重新布线的electron的webviews。这意味着，任何时候你都可以拍摄这个看到简单的风格。

alert('123')

对于复杂的东西，我相信webview也有一个executeJavascript函数，也许你可以在那里运行console.log。

使用mainWindow.removeMenu()时，按F12打开DevTools

ctrl + shift + i仅在未删除电子菜单时有效。当您使用mainWindow.removeMenu()删除菜单时，您可以将其添加到主进程代码中，以便仍然能够使用F12打开devtools。要使用F12关闭devTools，您必须首先单击电子应用程序，以便devtools窗口失去焦点。

myBrowserWindow.webContents.on('before-input-event', (_, input) => {
    if (input.type === 'keyDown' && input.key === 'F12') {
      myBrowserWindow.webContents.isDevToolsOpened()
        ? myBrowserWindow.webContents.closeDevTools()
        : myBrowserWindow.webContents.openDevTools({ mode: 'left' });
    }
  });

如果您不需要更改devTools open mode，您可以通过将其替换为以下内容来简化if的内部部分：

myBrowserWindow.webContents.toggleDevTools();

对于mode: 'detach'，再次按f12将不会关闭分离的窗口，因此您可以将if的内部替换为：

myBrowserWindow.webContents.openDevTools({ mode: 'detach' });

资料来源https://www.electronjs.org/docs/latest/tutorial/keyboard-shortcuts#intercepting-events-in-the-main-process