Install chrome extension devtools to Electron projects

main.js

import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
...
app.on('ready', () => {
  const mainWindow = createWindow()
  if (process.env.mode === 'development') {
    installExtension(VUEJS_DEVTOOLS)
    .then((name) => console.log('installed ', name))
    .catch((err) => console.log('An error occurred: ', err));

    const ses = mainWindow.webContents.session
    console.log('renderer storage path: ', ses.getStoragePath())

    mainWindow.webContents.on('did-frame-finish-load', () => {
      mainWindow.webContents.once('devtools-opened', () => {
        mainWindow.focus()
      })
      mainWindow.webContents.openDevTools()
    })
  }
})

// in the renderer storage path, open the extension manifest.json, delete all the unrecognized fields.