Electron 打开开发者工具 devtools

下面的例子中，都是基于 main.js 中的 createWindow 中的 mainWindow.webContents. 进行操作的。

1、打开 devtools

mainWindow.webContents.openDevTools()

2、界面右侧打开 devtools

mainWindow.webContents.openDevTools({mode:'right'})

3、界面底部打开 devtools

mainWindow.webContents.openDevTools({mode:'bottom'})

4、界面左侧打开 devtools

mainWindow.webContents.openDevTools({mode:'left'})

5、分离状态打开 devtools

mainWindow.webContents.openDevTools({mode:'detach'})
mainWindow.webContents.openDevTools({mode:'undocked'})

这两种情况下，devtools 都是不和 Electron 的界面在一起的，都是分离状态。但是 undocked 状态下，这个开发者工具是可以合并到主界面中的。detach 状态下是永久分离的。这个就是两者的区别，注意看图标箭头所示位置。

6、关闭 devtools

mainWindow.webContents.closeDevTools()

这个开发者工具 devtools 在正式打包过的 release 中，也是可以打开的，只不过快捷键似乎是不生效的。如果想在 release 中使用开发者工具的话，想办法执行 mainWindow.webContents.openDevTools() 即可。

开发 dev 状态的话，Electron 的开发者工具，也是可以使用快捷键呼出的。win 下的快捷键是：ctrl+shift+i。