Javascript 创建菜单切换开发人员工具（如vscode）时出现问题

我想创建具有切换开发人员工具功能（如vscode）的electron应用程序，您可以从以下菜单中选择vscode:

help>toggle developer tools

我正在尝试创建可以从electron菜单栏/导航栏访问的相同工具，但程序显示错误如下：

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>)

---

您可以在这里访问有关我的计划的更多信息

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

//切换devtools
let remote=require（'electron'）。remote
remote.getCurrentWindow（）.toggleDevTools（）

您可以在此处查看更多详细信息：

<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>

...
  "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"
  },
...