为什么捐赠
API 浏览器
升级指南
NEW!
quasar.config 配置文件
迁移到 Webpack 版 CLI
浏览器兼容性
TypeScript 支持
目录结构
命令列表
CSS 预处理器
使用 Vue Router 进行页面路由
懒加载 - 代码分割
资源处理
Boot 文件
预取特性
API 代理
配置 Webpack
处理 process.env
使用 Pinia 管理状态
代码检查与格式化
测试与审计
开发移动应用
Ajax 请求
开放开发服务器到公网
联系站长
Quasar CLI with Webpack - @quasar/app-webpack
常见问题

浏览器调试工具

您可能希望应用程序只在开发模式下允许访问浏览器 devtools,而在生产版本(未启用调试)中禁用此行为。

既然如此,不如在开发模式下默认就打开 devtools 吧。

/src-electron/electron-main

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

  if (process.env.DEBUGGING) {
    // 开发模式,或者开启了 debug 的生产版本
    mainWindow.webContents.openDevTools()
  }
  else {
    // 生产环境下关闭浏览器调试工具
    mainWindow.webContents.on('devtools-opened', () => {
      mainWindow.webContents.closeDevTools()
    })
  }
}

调试主进程

在开发模式下运行应用时,您可能注意到主进程的消息中提到了一个远程调试器。自 electron@^1.7.2 起,Electron 引入了通过 Inspect API 进行远程调试的功能,您可以使用 Google Chrome 打开消息中提供的链接,或者使用其他支持远程连接的调试器(例如 Visual Studio Code)通过默认端口 5858 连接到主进程进行调试。

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

端口号可能会变化,取决于 quasar.config > electron > inspectPort 的设置。如果指定的端口已被占用,将自动使用最近的可用端口。