problem creating menu toggle developer tools like vscode

Question

i want to create electron app that have toggle developer tools feature like vscode, from vscode you can check from menu: help > toggle developer tools i'm trying to create the same tools that can accessed from electron menubar/navbar but the program show error below:

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

below is what i've trying so far.

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

im build my program with vue-cli-plugin-electron-builder my 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"
  },
...

you can visit more about my program here https://github.com/dhanyn10/multiple-file-manager

Answer 1

solved, i get the answer from other forum and find the solution.

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

you can check more details here: https://github.com/dhanyn10/multiple-file-manager/pull/147