浏览器开发者工具(Browser Devtools)

¥Browser Devtools

你可能希望你的应用仅在开发模式下才允许访问浏览器的开发者工具。在正式版本（未启用调试）中，你需要禁用此行为。

¥You probably want your app to only give access to the browser devtools on dev mode only. On the production version (without debugging enabled) you’ll want to disable this behavior.

当我们处于开发模式时。

¥While we’re at it, why not also open devtools by default when we’re on dev mode.

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

  if (process.env.DEBUGGING) {
    // if on DEV or Production with debug enabled
    mainWindow.webContents.openDevTools()
  }
  else {
    // we're on production; no access to devtools pls
    mainWindow.webContents.on('devtools-opened', () => {
      mainWindow.webContents.closeDevTools()
    })
  }
}

调试主进程(Debugging Main Process)

¥Debugging Main Process

在开发环境中运行应用时，你可能注意到主进程中出现了一条消息，其中提到了远程调试器。自 electron@^1.7.2 发布以来，我们引入了通过 Inspect API 进行远程调试的功能，你可以通过 Google Chrome 打开提供的链接，或通过其他可以使用默认端口 5858 远程连接到进程的调试器（例如 Visual Studio Code）轻松访问。

¥When running your application in development you may have noticed a message from the main process mentioning a remote debugger. Ever since the release of electron@^1.7.2, remote debugging over the Inspect API was introduced and can be easily accessed by opening the provided link with Google Chrome or through another debugger that can remotely attach to the process using the default port of 5858, such as Visual Studio Code.

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

端口可以根据 quasar.config > electron > inspectPort 的设置而变化。如果指定的端口已被占用，则将使用下一个最近的可用端口。

¥The port can vary, based on the quasar.config > electron > inspectPort setting. If the specified port is already occupied, the next closest available port will be used.