浏览器开发工具

你可能希望你的应用程序只在开发模式下才允许访问浏览器的开发工具。在生产版本中(没有启用调试功能)，你会希望禁用这一行为。

既然如此，为什么不在开发模式时默认打开devtools呢。

// electron-main.[js|ts]

function createWindow () {
  mainWindow = new BrowserWindow({ ... })

  if (process.env.DEBUGGING) {
    // 如果在DEV或Production上，并启用了调试功能
    mainWindow.webContents.openDevTools()
  }
  else {
    // 我们在生产中，无法访问devtools。
    mainWindow.webContents.on('devtools-opened', () => {
      mainWindow.webContents.closeDevTools()
    })
  }
}

调试主流程

在开发中运行应用时，您可能已经注意到主进程中提及远程调试器的消息。 自从发布electron@^1.7.2版本以来，electro引入了对Inspect API的远程调试，并且可以通过打开Google Chrome提供的链接, 或通过另一个使用缺省的5858端口远程连接到该进程的调试器轻松访问 ，比如Visual Studio Code。

Debugger listening on ws://127.0.0.1:5858/b285586a-6091-4c41-b6ea-0d389e6f9c93
For help, see: https://nodejs.org/en/docs/inspector

应用程序无法在具有暗色主题的Windows上打开

某些Chrome DevTools扩展程序不适用于electron 6+上的Windows暗色主题。 Quasar在默认的electron-main.js中提供了一种变通方法，该方法可在启动应用程序之前删除DevTools Extensions。

import { app, BrowserWindow, nativeTheme } from 'electron'

try {
  if (process.platform === 'win32' && nativeTheme.shouldUseDarkColors === true) {
    require('fs').unlinkSync(require('path').join(app.getPath('userData'), 'DevTools Extensions'))
  }
} catch (_) { }

请关注electron错误报告以获取更多详细信息。