Herramientas de desarrollo de Electron

Para el desarrollo de Electron se recomienda usar VS Code. Si aún no estás familiarizado con VS Code, puedes consultar nuestroTutorial de VS Code。

Dirección de descarga de VS Code:https://code.visualstudio.com/。

VS Code en sí mismo está construido con Electron, por lo que tiene ventajas de soporte naturales para el desarrollo de Electron:

  • Terminal integrada
  • Potente funcionalidad de depuración
  • Amplio ecosistema de complementos
  • Integración con Git
  • Sugerencias inteligentes (IntelliSense)
  • Completamente gratuito y de código abierto

Recomendación de complementos imprescindibles para VS Code

Nombre del complemento Descripción de la función
Electron Snippets Proporciona fragmentos de código y autocompletado para la API de Electron
Prettier – Code Formatter Unifica el estilo del código y formatea automáticamente
ESLint Verifica errores de sintaxis y problemas de estilo
Debugger for Chrome Te permite depurar el proceso de renderizado del frontend en VS Code
Node.js Modules Intellisense Sugiere automáticamente funciones de módulos de Node.js
Path Intellisense Sugerencias inteligentes de rutas de archivo
npm Intellisense Sugiere automáticamente nombres de paquetes npm
Auto Rename Tag / Auto Close Tag Autocompletado inteligente de etiquetas HTML
GitLens Mejora la experiencia visual del versionado de código con Git

Depuración con Chrome DevTools (proceso de renderizado)

El proceso de renderizado de Electron es en realidad unapágina del navegador Chromium，
Por lo tanto, puedes depurar directamente con Chrome DevTools como lo harías con una página web.

Habilitar DevTools

Enmain.jsAl crear la ventana, agrega:

Ejemplo

const win = new BrowserWindow({
  width: 800,
  height: 600
});
win.loadFile('index.html');

// Abrir las herramientas de desarrollador
win.webContents.openDevTools();

Contenido que se puede depurar

  • Código HTML / CSS / JS
  • Solicitudes de red (Network)
  • Registros de la consola (Console)
  • Estructura del DOM
  • Análisis de rendimiento (Performance)
  • Fugas de memoria (Memory)

Consejo

La depuración del proceso de renderizado es casi igual que en Chrome, por lo tanto:

  • Puedes usarconsole.log()para enviar información de depuración
  • También puedes usar directamente los atajos de teclado de Chrome (Cmd + Option + I / Ctrl + Shift + I) para abrir DevTools

Técnicas de depuración del proceso principal de Electron

El proceso principal no es una página web, sino un entorno Node.js, por lo que el método de depuración es diferente al de una página web.

Método 1: Usar el depurador integrado de VS Code

En la raíz del proyecto, crea un.vscode/launch.jsonarchivo.

El contenido es el siguiente (se puede usar directamente):

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron 主进程调试",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/electron/dist/electron.js",
      "args": ["."],
      "outputCapture": "std",
      "runtimeExecutable": null,
      "cwd": "${workspaceFolder}"
    }
  ]
}

Luego, enmain.jsestablece un punto de interrupción y haz clic en Depurar ▶️. ¡Listo!

Método 2: Depuración remota por línea de comandos

Al iniciar, agrega el parámetro:

electron . --inspect=5858

Luego abre en la barra de direcciones de Chrome:

chrome://inspect

De este modo podrás conectarte remotamente al proceso principal y depurar con puntos de interrupción, igual que con Node.js.

Resumen de técnicas de depuración comunes

Objetivo de depuración Herramienta/Método Descripción
La interfaz de la ventana va lenta Chrome DevTools → Performance Analizar el tiempo de renderizado y los cuellos de botella en la ejecución de JS
La ventana se cierra de repente Agregar try/catch en el proceso principal o usarelectron-logregistro de logs Capturar excepciones del proceso principal
Errores de comunicación IPC EnipcMain / ipcRendererAgregar logs en Depurar la comunicación entre el proceso principal y el de renderizado
Errores de ruta de archivo Usarpath.join(__dirname, 'xxx') para evitar problemas de rutas relativas
Depuración del empaquetado Usarelectron-builder --direl modo de compilación de directorio primero para poder ejecutar y depurar directamente

Recomendación de herramientas avanzadas

Herramienta Uso
Electron Forge Herramienta de scaffolding recomendada oficialmente, para crear y empaquetar proyectos rápidamente
Electron Builder Potente herramienta de empaquetado y publicación
Electron Reload Actualiza la aplicación automáticamente al modificar archivos
Spectron Se utiliza para pruebas automatizadas de aplicaciones Electron
Devtron Extensión de depuración oficial de Electron para analizar el estado interno de la aplicación
React / Vue DevTools Si usas un framework de frontend, es muy conveniente depurar el estado de los componentes

Escribe con VS Code, observa con DevTools, depura con launch.json y empaqueta con Builder: esta es la cadena de herramientas completa para un desarrollador profesional de Electron.

Otras extensiones