devtron
devtron是一个开源工具，可以辅助检查、检测electron应用，构建在Chrome Developer Tools
官网
github
官网推荐使用
# 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
按照官网这样简单安装后超级多坑，以下是解决坑问题
- 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.
解决方案
进入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环境
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.
解决方案
进入node_modules/devtron，找到mainfest.json文件，更改
"matches": ["https://*/*"],
进行如上所以配置之后，进入控制台输入依然看到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>}
还需要进行如下配置
进入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>
最后进入main.js中增加setImmediate(() => { require('devtron').install() })，就能看到devtron面板啦
function createWindow () {
setImmediate(() => { require('devtron').install() })
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, // 集成node环境
enableRemoteModule: true // 使用remote模块
}
})
mainWindow.loadFile('index.html')
mainWindow.openDevTools()
}
进入控制台，不需要再执行require('devtron').install()
