devtron安装

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 :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 {}

还需要进行如下配置
进入node_modules/devtron/static，新增文件createDevtool.js

chrome.devtools.panels.create('Devtron', 'devtron.png', 'static/index.html')

更改devtron.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()