electron 如何打開開發者工具 devtools ，如何進入開發者模式

============================================
商業轉載請聯繫獲得授權，非商業轉載請註明出處
作者：蘇南大叔 【京城，非著名互聯網從業人員】
來源：https://newsn.net/say/electron-devtools.html
打賞：https://newsn.net/shang.html
加羣：https://newsn.net/group.html
============================================
歡迎轉發/打賞/點贊/留言，感謝您的支持！

在electron開發的過程中，可以用代碼控制打開自帶chrome的devtools開發者工具，進而調試渲染教程頁面。平時，我們利用chrome要調試網頁的時候，按f12（mac下面是shift+花+i）打開的開發者工具，就是這個devtools，或者可以稱之爲“開發者模式”。

 

Electron小夥伴，都在這裏等你

electron 如何打開開發者工具 devtools ，如何進入開發者模式（圖8-1）

 

下面蘇南大叔，接着以electron的quick-start範例爲例，說明利用electron的webContents對象打開及關閉devtools的方法。下面的例子中，我們都是基於main.js中的createWindow中的mainWindow.webContents.進行操作的。

 

打開devtools

mainWindow.webContents.openDevTools()

JavaScript

默認狀態下，開發者工具的位置是上一次工具打開的位置（左邊，右邊，下邊都有可能。取決於上一次的狀態，但不會是分離狀態，也沒有處於頂部的狀態）。

 

Electron小夥伴，都在這裏等你

electron 如何打開開發者工具 devtools ，如何進入開發者模式（圖8-2）

 

 

界面右側打開devtools

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

JavaScript

 

electron 如何打開開發者工具 devtools ，如何進入開發者模式（圖8-3）

 

 

界面底部打開devtools

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

JavaScript

 

electron 如何打開開發者工具 devtools ，如何進入開發者模式（圖8-4）

 

 

界面左側打開devtools

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

JavaScript

這個left屬性在官方文檔裏面，並不存在，是蘇南大叔自己實驗出來的。當然top屬性是絕對不支持的，大家不用實驗了。

 

electron 如何打開開發者工具 devtools ，如何進入開發者模式（圖8-5）

 

 

分離狀態打開devtools

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

JavaScript

 

Electron小夥伴，都在這裏等你

electron 如何打開開發者工具 devtools ，如何進入開發者模式（圖8-6）

 

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

JavaScript

 

Electron小夥伴，都在這裏等你

electron 如何打開開發者工具 devtools ，如何進入開發者模式（圖8-7）

 

這兩種情況下，devtools都是不和electron的界面在一起的，都是分離狀態。但是 undocked 狀態下，這個開發者工具是可以合併到主界面中的。detach狀態下，是永久分離的。這個就是兩者的區別，注意看圖標箭頭所示位置。

 

關閉devtools

mainWindow.webContents.closeDevTools()

JavaScript

使用上述方法，就可以通過程序關閉devtools。截圖中的代碼，作用是30秒後，主動關閉devtools。

 

electron 如何打開開發者工具 devtools ，如何進入開發者模式（圖8-8）

 

 

附加信息

這個開發者工具devtools在正式打包過的release中，也是可以打開的，只不過快捷鍵似乎是不生效的。如果您想在release中使用開發者工具的話，想辦法執行mainWindow.webContents.openDevTools()即可。

開發dev狀態的話，electron的開發者工具，也是可以使用快捷鍵呼出的。win下的快捷鍵是：ctrl+shift+i，mac下的快捷鍵是：alt+花+i。這兩個快捷鍵和chrome的定義，是有所區別的，這個請大家注意一下即可。

 

總結

本篇內容，是最基本的渲染進程調試的前提，大家可以根據自己的喜好，設置devtools的位置，並選擇合適時機關閉devtools。更多信息，可以點擊這裏查看相關中文文檔。

• http://electron.org.cn/doc/api/web-contents.html

更多electron的相關精彩文章，請點擊蘇南大叔的博客：

• https://newsn.net/tag/electron/