參考資料
Electron官網 DevTools Extension
1、安裝瀏覽器擴展
建議無法訪問外網的讀者使用Edge瀏覽器安裝擴展，本文將以Edge瀏覽器為例
2、獲取擴展路徑
比如我的redux devtools的路徑為
C:\Users\lujunji\AppData\Local\Microsoft\Edge\User Data\Default\Extensions\nnkgneoiohoecpdiaponcejilbhhikei\2.17.0_0
3. 撰寫加載程式檔案
不要忘記將路徑分隔符 \ 替換為 /
installExtension.js
const { session } = require('electron')
// react-developer-tools 擴展的絕對路徑
const REACT_DEVELOPER_TOOLS = "C:/Users/lujunji/AppData/Local/Microsoft/Edge/User Data/Default/Extensions/gpphkfbcpidddadnkolkpfckpihlkkil/4.18.0_0"
// redux-devtools 擴展的絕對路徑
const REDUX_DEVTOOLS = "C:/Users/lujunji/AppData/Local/Microsoft/Edge/User Data/Default/Extensions/nnkgneoiohoecpdiaponcejilbhhikei/2.17.0_0"
// 向外暴露installExtension函式
exports.installExtension = function installExtension() {
session.defaultSession.loadExtension(REACT_DEVELOPER_TOOLS)
session.defaultSession.loadExtension(REDUX_DEVTOOLS)
}
4. 在main.js中執行installExtension函式，加載開發工具擴展
main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
const { installExtension } = require('./devtoolsInstaller')
function createWindow() {
let window = new BrowserWindow({
width: 1024,
height: 678,
webPreferences: {
preload: path.resolve(__dirname, 'preload.js')
}
})
window.openDevTools()
window.loadURL('http://localhost:3000')
window.on('closed', () => {
window = null
})
}
app.whenReady().then(() => {
installExtension() // 必須在ready事件后加載開發工具擴展
createWindow()
})
app.on("window-all-closed", () => {
if (process.platform !== 'darwin') app.quit()
})
除了手動加載devtools extension之外，還可以使用工具（不要問我為什么不使用工具）
5. 結果
雖然有報錯，但開發工具擴展仍然可以使用，報錯的原因應該與redux devtools本身有關
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/301491.html
標籤：其他
上一篇：4Http模塊、Url模塊
下一篇：【鴻蒙應用開發】-入門