创建菜单切换开发人员工具如 vscode的问题

如何解决创建菜单切换开发人员工具如 vscode的问题

我想创建具有切换开发人员工具功能（如 vscode）的电子应用程序，您可以从 vscode 菜单中查看：help > toggle developer tools 我正在尝试创建可以从电子菜单栏/导航栏访问的相同工具，但程序显示以下错误：

TypeError: browserWindow is not a constructor
    at VueComponent.openDevtools (Navbar.vue?601a:37)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at invoker (vue.runtime.esm.js?2b0e:2179)
    at eval (link.js?aa59:216)
    at Array.forEach (<anonymous>)

以下是我到目前为止所尝试的。

<template>
    <div>
        <b-navbar toggleable="sm" type="dark" variant="info">
            <b-navbar-nav>
                <b-nav-item v-on:click="visitWiki">Wiki</b-nav-item>
                <b-nav-item-dropdown text="Help">
                    <b-dropdown-item v-on:click="visitIssues">Report Issue</b-dropdown-item>
                </b-nav-item-dropdown>
                <b-nav-item v-on:click="openDevtools">Tools</b-nav-item>
            </b-navbar-nav>
        </b-navbar>
    </div>
</template>

<script>
import Vue from 'vue'
import { BNavbar,BNavbarNav,BNavItem,BNavItemDropdown,BDropdownItem } from 'bootstrap-vue'

let shell = require('electron').shell

Vue.component('b-navbar',BNavbar)
Vue.component('b-navbar-nav',BNavbarNav)
Vue.component('b-nav-item',BNavItem)
Vue.component('b-nav-item-dropdown',BNavItemDropdown)
Vue.component('b-dropdown-item',BDropdownItem)
export default {
    name: 'Navbar',methods: {
        visitWiki() {
            shell.openExternal('https://github.com/dhanyn10/multiple-file-manager/wiki')
        },visitIssues() {
            shell.openExternal('https://github.com/dhanyn10/multiple-file-manager/issues')
        },openDevtools() {
            const { browserWindow } = require('electron')
            const win = new browserWindow({width: 1024,height: 400})
            win.webContents.openDevTools()
        }
    }
}
</script>

我用 vue-cli-plugin-electron-builder 构建我的程序我的 package.json

...
  "dependencies": {
    "bootstrap": "^4.4.1","bootstrap-vue": "^2.17.3","core-js": "^3.6.4","vue": "^2.6.12"
  },"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.4","@vue/cli-plugin-eslint": "~4.3.0","@vue/cli-service": "~4.3.0","babel-eslint": "^10.1.0","electron": "^12.0.2","electron-icon-builder": "^1.0.2","eslint": "^6.7.2","eslint-plugin-vue": "^6.2.2","vue-cli-plugin-electron-builder": "^1.4.6","vue-template-compiler": "^2.6.12"
  },...

您可以在此处访问有关我的计划的更多信息https://github.com/dhanyn10/multiple-file-manager

解决方法

解决了，我从其他论坛得到答案并找到解决方案。

//toggle devtools
let remote = require('electron').remote
remote.getCurrentWindow().toggleDevTools()

您可以在此处查看更多详细信息：https://github.com/dhanyn10/multiple-file-manager/pull/147