Electron-vue: How can I open chrome dev tool after build?

[deboyblog]

How could I config to make me can open the chrome dev tool in after-build-app like in dev mode?
I think it will make me find software bug more easy and easy to deal with it.

[SimulatedGREG]

@deboyblog

There are a couple ways to approach this, but a simple way would be is to add a globalShortcut to your app. Adding the following to app/src/renderer/main.js should do the trick...

import { remote } from 'electron'

remote.globalShortcut.register('CommandOrControl+Shift+K', () => {
  remote.BrowserWindow.getFocusedWindow().webContents.openDevTools()
})

window.addEventListener('beforeunload', () => {
  remote.globalShortcut.unregisterAll()
})

[deboyblog]

I used the dev branch template, and I tried it, but It dons't work for me .
So I move some dev code from src/main/index.dev.js to src/main/index.js ,

after modification (src/main/index.js)

import { app, BrowserWindow } from 'electron'
// Install `electron-debug` with `devtron`
require('electron-debug')({ showDevTools: process.env.NODE_ENV === 'development' })

// Install `vue-devtools`

let mainWindow
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:${require('../../.electron-vue/config').port}`
  : `file://${__dirname}/index.html`

function createWindow () {
  let installExtension = require('electron-devtools-installer')
  if (process.env.NODE_ENV === 'development') {
    installExtension.default(installExtension.VUEJS_DEVTOOLS)
      .then(() => {})
      .catch(err => {
        console.log('Unable to install `vue-devtools`: \n', err)
      })
  }
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 800,
    width: 1690
  })

  mainWindow.loadURL(winURL)

  mainWindow.on('closed', () => {
    mainWindow = null
  })
  mainWindow.on('ready-to-show', () => {
    mainWindow.show()
    mainWindow.focus()
  })

  // eslint-disable-next-line no-console
  console.log('mainWindow opened')
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

then comment out the code for disabale devtool in build/webpack.renderer.config.js

// ...
if (process.env.NODE_ENV === 'production') {
  // rendererConfig.devtool = ''

  rendererConfig.plugins.push(
    new BabiliWebpackPlugin({
      removeConsole: false,
      removeDebugger: false
    }),
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, '../static'),
        to: path.join(__dirname, '../dist/electron/static'),
        ignore: ['.*']
      }
    ]),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  )
}
// ...

It work.

[jeeftor]

@deboyblog I tried this and it loads devtools but I dont get it loading the vuejs extension

[deboyblog]

@jeeftor Because the Vue code is already packaged?

[jeeftor]

I don't know - ? Is that how its supposed to work?

[travis5491811]

@deboyblog

There are a couple ways to approach this, but a simple way would be is to add a globalShortcut to your app. Adding the following to app/src/renderer/main.js should do the trick...

import { remote } from 'electron'

remote.globalShortcut.register('CommandOrControl+Shift+K', () => {
  remote.BrowserWindow.getFocusedWindow().webContents.openDevTools()
})

window.addEventListener('beforeunload', () => {
  remote.globalShortcut.unregisterAll()
})

Thanks. This solution still works. I'm using vue-cli-plugin-electron-builder and have the code in /src/main.ts