devtron
devtron是一個開源工具蔑舞，可以輔助檢查、檢測electron應(yīng)用娶聘，構(gòu)建在Chrome Developer Tools
官網(wǎng)
github
官網(wǎng)推薦使用
# Install Devtron
$ npm install --save-dev devtron
// Run the following from the Console tab of your app's DevTools
require('devtron').install()
// You should now see a Devtron tab added to the DevTools
按照官網(wǎng)這樣簡單安裝后超級多坑抑诸，以下是解決坑問題
- The 'manifest_version' key must be present and set to 2 (without quotes)
錯誤描述
electron/js2c/renderer_init.js:107 Uncaught (in promise) Error: Loading extension at /Users/nb-mac/Desktop/my-electron-app/node_modules/devtron failed with: The 'manifest_version' key must be present and set to 2 (without quotes). See developer.chrome.com/extensions/manifestVersion.html for details.
解決方案
進(jìn)入node_modules/devtron吹散，找到mainfest.json文件，添加
"manifest_version": 2,
- Cannot read property 'BrowserWindow' of undefined
錯誤描述
Uncaught TypeError: Cannot read property 'BrowserWindow' of undefined
at Object.exports.install (/Users/nb-mac/Desktop/my-electron-app/node_modules/devtron/api.js:6)
at <anonymous>:1:20
解決方案
在項目中找到main.js文件，增加enableRemoteModule: true
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, // 集成node環(huán)境
enableRemoteModule: true // 使用remote模塊
}
})
- Invalid value for 'content_scripts[0].matches[0]': Missing scheme separator
錯誤描述
electron/js2c/renderer_init.js:107 Uncaught (in promise) Error: Loading extension at /Users/nb-mac/Desktop/my-electron-app/node_modules/devtron failed with: Invalid value for 'content_scripts[0].matches[0]': Missing scheme separator.
解決方案
進(jìn)入node_modules/devtron譬挚，找到mainfest.json文件锅铅，更改
"matches": ["https://*/*"],
進(jìn)行如上所以配置之后，進(jìn)入控制臺輸入依然看到devtron面板
require('devtron').install()
/Users/nb-mac/Desktop/my-electron-app/node_modules/devtron/api.js:5 Installing Devtron from /Users/nb-mac/Desktop/my-electron-app/node_modules/devtron
Promise {<pending>}
還需要進(jìn)行如下配置
進(jìn)入node_modules/devtron/static减宣，新增文件createDevtool.js
chrome.devtools.panels.create('Devtron', 'devtron.png', 'static/index.html')
更改devtron.html文件如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>devtron</title>
<script src="./createDevtool.js"></script>
</head>
</html>
最后進(jìn)入main.js中增加setImmediate(() => { require('devtron').install() })盐须，就能看到devtron面板啦
function createWindow () {
setImmediate(() => { require('devtron').install() })
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, // 集成node環(huán)境
enableRemoteModule: true // 使用remote模塊
}
})
mainWindow.loadFile('index.html')
mainWindow.openDevTools()
}
進(jìn)入控制臺，不需要再執(zhí)行require('devtron').install()
