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。