Cuando desarrollamos aplicaciones con Electron.js, estamos esencialmente construyendo una aplicación de escritorio utilizando tecnologías web (HTML, CSS y JavaScript). Al igual que en el desarrollo web tradicional, una de las herramientas más poderosas a nuestra disposición son las Herramientas de Desarrollador (DevTools) del navegador. Electron, al estar basado en Chromium, nos permite utilizar las mismas DevTools de Google Chrome para depurar nuestras aplicaciones.
Anteriormente vimos como podemos usar plugins como Comunicación entre procesos en Electron.js.
Activando las DevTools
Activar las DevTools en Electron es un proceso sencillo. Se realiza en el proceso principal (generalmente el archivo main.js o index.js), justo después de crear la ventana de la aplicación con BrowserWindow.
El método clave es win.webContents.openDevTools(), donde win es la instancia de BrowserWindow.
// main.js
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
win.loadFile('index.html');
// Abrir las DevTools
win.webContents.openDevTools();
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
Y aquí un index.html de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Electron App</title>
</head>
<body>
<h1>¡Hola, Electron!</h1>
<script>
console.log('Esta es una prueba desde el proceso de renderizado.');
// Simulamos un error
console.error('Este es un error de ejemplo.');
</script>
</body>
</html>Al ejecutar la aplicación, la ventana se abrirá y, junto a ella, las DevTools, mostrando cualquier mensaje de la consola o error que ocurra en el proceso de renderizado.
Mejores prácticas: DevTools solo en desarrollo
No es una buena práctica mostrar las DevTools a los usuarios finales en producción. Podemos condicionar su apertura a una variable de entorno, como NODE_ENV.
// main.js
// ... (código anterior)
function createWindow() {
// ... (creación de la ventana)
win.loadFile('index.html');
// Abrir DevTools solo si estamos en modo de desarrollo
if (process.env.NODE_ENV === 'development') {
win.webContents.openDevTools();
}
}
// Para ejecutar en modo desarrollo:
// NODE_ENV=development electron .
Atajo de teclado para abrir/cerrar las DevTools
Otra opción muy útil es permitir abrir y cerrar las DevTools con un atajo de teclado, como F12. Esto se puede lograr escuchando el evento 'before-input-event' en webContents.
// main.js
// ...
function createWindow() {
const win = new BrowserWindow({
// ...
});
win.loadFile('index.html');
win.webContents.on('before-input-event', (event, input) => {
if (input.key === 'F12') {
win.webContents.toggleDevTools();
event.preventDefault();
}
});
}
// ...
¿Qué podemos hacer con las DevTools?
- Inspeccionar Elementos: Analizar y modificar el DOM y los estilos CSS en tiempo real.
- Consola: Ver logs, errores y ejecutar código JavaScript en el contexto de la página.
- Sources (Fuentes): Depurar el código JavaScript paso a paso, establecer breakpoints y analizar el call stack.
- Network (Red): Aunque en Electron cargamos archivos locales, es útil para depurar peticiones a APIs externas.
- Application (Aplicación): Inspeccionar el almacenamiento local (LocalStorage, SessionStorage, etc.).
Conclusión
Las DevTools son una herramienta indispensable para el desarrollo y depuración de aplicaciones Electron. Nos proporcionan una visión profunda de lo que está sucediendo en el proceso de renderizado, permitiéndonos encontrar y solucionar problemas de manera eficiente.
El siguiente paso lógico en el desarrollo con Electron es entender cómo habilitar la integración con Node.js en el proceso de renderizado para poder usar módulos de Node directamente en nuestros archivos de frontend.