martes 31 diciembre 2024

Cómo ver la consola en Electron

Electron permite desarrollar aplicaciones de escritorio usando tecnologías web como HTML, CSS y JavaScript. Para depurar tu aplicación, la consola de desarrollador es una herramienta esencial. Aquí te mostramos cómo acceder a ella.

Acceso a la consola en Electron

Electron incluye herramientas de desarrollo integradas que puedes habilitar fácilmente. Para abrir la consola, sigue estos pasos:

1. En la ventana principal de tu aplicación:

Usa el método webContents.openDevTools() para abrir las herramientas de desarrollo. Este método es parte de la API de BrowserWindow.

const { app, BrowserWindow } = require('electron');

   let mainWindow;

   app.on('ready', () => {
       mainWindow = new BrowserWindow({
           width: 800,
           height: 600,
           webPreferences: {
               nodeIntegration: true,
           },
       });

       mainWindow.loadFile('index.html');

       // Abre la consola de desarrollador
       mainWindow.webContents.openDevTools();
   });

2. Acceso manual:

Una vez que la aplicación está corriendo, puedes abrir la consola utilizando las combinaciones de teclas típicas de los navegadores:

En Windows/Linux: Ctrl+Shift+I o F12.
En macOS: Cmd+Opt+I.

Algunos ejemplos de uso

Registrar mensajes en la consola

Utiliza console.log() en tu código para mostrar mensajes y depurar:

console.log('Esto es un mensaje de prueba');

Inspeccionar elementos

Haz clic derecho en un elemento de la ventana de tu aplicación y selecciona "Inspeccionar" para abrir la consola directamente enfocada en ese elemento.