Depuración y pruebas de Electron

Las aplicaciones de Electron involucranProceso principal y proceso de renderizadoHay dos entornos de ejecución, por lo que las estrategias de depuración y pruebas deben diseñarse para los diferentes procesos.
Un buen flujo de depuración y pruebas puede mejorar la eficiencia del desarrollo y la estabilidad de la aplicación.

Depuración del proceso principal

Depuración con Chrome DevTools

El proceso principal de Electron se puede--inspecto--inspect-brkiniciar y depurar con Chrome DevTools.
Ejemplo de inicio:
```
electron --inspect=9222 .
```
Escriba en la barra de direcciones de Chromechrome://inspect, y podrá conectarse al proceso principal para depurar con puntos de interrupción, ver la pila de llamadas y ejecutar expresiones.

Depuración con puntos de interrupción en VS Code

Configure en VS Codelaunch.json：

{
  "type": "node",
  "request": "launch",
  "name": "Electron Main",
  "program": "${workspaceFolder}/node_modules/electron/cli.js",
  "args": ["."],
  "runtimeExecutable": null,
  "windows": { "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd" },
  "sourceMaps": true,
  "protocol": "inspector"
}

De esta manera, puede establecer puntos de interrupción directamente en los archivos del proceso principal para depurar la lógica y la comunicación IPC.

Registro de logs

Utiliceconsole.logo una biblioteca de logs de terceros (comowinston) para registrar la información de ejecución del proceso principal.
Se recomienda clasificar los logs: info, warn, error, para facilitar la localización de problemas.

Depuración del proceso de renderizado

Abrir las herramientas de desarrollador

Llamar en el proceso de renderizado:
```
mainWindow.webContents.openDevTools()
```
Puede ver directamente el DOM, la depuración de JS, las solicitudes de red y el panel de rendimiento.

Depuración remota

El proceso de renderizado también puede habilitar el puerto de depuración remota:
```
electron --remote-debugging-port=9223 .
```
Puede conectarse a la depuración remota en Chrome DevTools, adecuado para depuración con múltiples ventanas o entre dispositivos.

React / Vue DevTools

Para los procesos de renderizado que utilizan frameworks frontend, instale las DevTools correspondientes:
```
npm install --save-dev electron-devtools-installer
```

Ejemplo:

const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer')

app.whenReady().then(() => {
  installExtension(REACT_DEVELOPER_TOOLS)
    .then(name => console.log(`已安装: ${name}`))
    .catch(err => console.log('安装失败:', err))
})

Permite depurar el estado de los componentes, las props y los eventos, mejorando la eficiencia del desarrollo frontend.

Pruebas automatizadas

Framework de pruebas Spectron

Spectron es la herramienta de pruebas de extremo a extremo recomendada oficialmente por Electron, basada en WebDriver.
Puede probar el inicio de la aplicación, el comportamiento de las ventanas, los clics en botones y las llamadas IPC.
```
npm install --save-dev spectron mocha chai
```

Ejemplo:

const Application = require('spectron').Application
const assert = require('chai').assert
const path = require('path')

describe('应用启动测试', function () {
  this.timeout(10000)
  let app

  before(async () => {
    app = new Application({
      path: require('electron'), // Electron 可执行文件
      args: [path.join(__dirname, '..')]
    })
    await app.start()
  })

  after(async () => { if (app && app.isRunning()) await app.stop() })

  it('窗口数量应为 1', async () => {
    const count = await app.client.getWindowCount()
    assert.equal(count, 1)
  })
})

Pruebas unitarias

Se pueden escribir pruebas unitarias para la lógica del proceso principal y los módulos del proceso de renderizado.
Se recomienda usar Jest o Mocha + Chai:npm install --save-dev jest

Pruebas de extremo a extremo

Pruebe los flujos de operación del usuario, como hacer clic en botones, abrir nuevas ventanas y verificar que la interacción de datos sea correcta.
Se puede combinar con Spectron o Playwright + Electron.

Integración CI/CD

Configure las pruebas de Electron en plataformas de integración continua (GitHub Actions, GitLab CI):

Instalar Node.js + Electron
Ejecutar pruebas unitarias y pruebas de extremo a extremo
Generar informes de cobertura y subirlos

Resumen

Puntos clave de la depuración y las pruebas en Electron:

Proceso principal: Depuración con puntos de interrupción en Chrome DevTools o VS Code + logs
Proceso de renderizado: Herramientas de desarrollador + DevTools del framework frontend
Pruebas automatizadas: Spectron, pruebas unitarias, pruebas de extremo a extremo + CI/CD
Objetivo: Mejorar la eficiencia del desarrollo, descubrir problemas potenciales y garantizar la estabilidad de la aplicación

Otras extensiones