下面的例子中，都是基於 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。