Vue.js でデバッグ時に開発者ツールを非表示にする

※ これは 2020/01/07 時点の node.js v13.2.0 vue/cli v4.1.1 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

Blazor と Electron と Flutter をいろいろ触ってみた結果、一番しっくりきた Electron + Vue.js (TypeScript) を勉強することにしました

とりあえず今回は、デバッグ時に表示される下記開発者ツールが少し気になったのでこれを非表示にしたい

いろいろ調べたところ、background.ts の下記の箇所で開発者ツールの表示有無を決めていることがわかりました

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({ width: 800, height: 600, webPreferences: {
    nodeIntegration: true
  } })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools() // <---- ここで表示
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }

  win.on('closed', () => {
    win = null
  })
}

process.env.IS_TEST のフラグを落とす方法を探してもよさそうですが、とりあえず非表示に、という場合ならコメントアウトした方が手っ取り早そうです

というわけで下記のようにコメントアウト

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({ width: 800, height: 600, webPreferences: {
    nodeIntegration: true
  } })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    //if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }

  win.on('closed', () => {
    win = null
  })
}