============================================
商業轉載請聯繫獲得授權,非商業轉載請註明出處
作者:蘇南大叔 【京城,非著名互聯網從業人員】
來源: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
的quick-start
範例爲例,說明利用electron
的webContents
對象打開及關閉devtools
的方法。下面的例子中,我們都是基於main.js
中的createWindow
中的mainWindow.webContents.
進行操作的。
打開devtools
默認狀態下,開發者工具的位置是上一次工具打開的位置(左邊,右邊,下邊都有可能。取決於上一次的狀態,但不會是分離狀態,也沒有處於頂部的狀態)。
界面右側打開devtools
界面底部打開devtools
界面左側打開devtools
這個left
屬性在官方文檔裏面,並不存在,是蘇南大叔自己實驗出來的。當然top
屬性是絕對不支持的,大家不用實驗了。
分離狀態打開devtools
這兩種情況下,devtools都是不和electron的界面在一起的,都是分離狀態。但是 undocked
狀態下,這個開發者工具是可以合併到主界面中的。detach狀態下,是永久分離的。這個就是兩者的區別,注意看圖標箭頭所示位置。
關閉devtools
使用上述方法,就可以通過程序關閉devtools
。截圖中的代碼,作用是30秒後,主動關閉devtools
。
附加信息
這個開發者工具devtools
在正式打包過的release
中,也是可以打開的,只不過快捷鍵似乎是不生效的。如果您想在release
中使用開發者工具的話,想辦法執行mainWindow.webContents.openDevTools()
即可。
開發dev狀態的話,electron
的開發者工具,也是可以使用快捷鍵呼出的。win
下的快捷鍵是:ctrl+shift+i
,mac
下的快捷鍵是:alt+花+i
。這兩個快捷鍵和chrome
的定義,是有所區別的,這個請大家注意一下即可。
總結
本篇內容,是最基本的渲染進程調試的前提,大家可以根據自己的喜好,設置devtools
的位置,並選擇合適時機關閉devtools
。更多信息,可以點擊這裏查看相關中文文檔。
更多electron
的相關精彩文章,請點擊蘇南大叔的博客: