Introduction to Electron Debug

Electron is a powerful framework that allows developers to build cross-platform desktop applications using web technologies like HTML, CSS, and JavaScript. When it comes to debugging these applications, electron-debug comes to the rescue. It is a module that adds powerful debugging and profiling capabilities to your Electron applications, making development and troubleshooting much easier!

Getting Started with electron-debug

First, you need to install the electron-debug module via npm:

  npm install electron-debug --save-dev

After installation, you can include it in your main process file — typically main.js:

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

  electronDebug(); // Initialize the electron-debug module

  app.on('ready', () => {
    const mainWindow = new BrowserWindow({ width: 800, height: 600 });
    mainWindow.loadURL('file://${__dirname}/index.html');
  });
  

Useful APIs in electron-debug

The electron-debug module provides several useful APIs to enhance the debugging experience. Here are some of them:

1. Enabling DevTools

Automatically open the DevTools when your app starts.

  electronDebug({ showDevTools: true });

2. Keyboard Shortcuts

Adds handy keyboard shortcuts:

• Cmd+R or Ctrl+R: Reload current page
• Cmd+Shift+R or Ctrl+Shift+R: Hard reset
• Cmd+Opt+I or Ctrl+Shift+I: Toggle DevTools

3. Logging

Log actions to the console for easier debugging.

  electronDebug({ enabled: true, showDevTools: true, logLevel: 'info' });

4. Remote Debugging

You can even enable remote debugging.

  electronDebug({ devToolsMode: 'detach' });

Example Application Using electron-debug

Below is an example of a basic Electron application using electron-debug for a better development experience:

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

  // Initialize electron-debug with all alerts enabled and DevTools open by default
  electronDebug({ showDevTools: true });

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

    mainWindow.loadFile('index.html');

    // Open the DevTools manually anytime if needed
    mainWindow.webContents.openDevTools();
  });

  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
      app.quit();
    }
  });

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
  

With electron-debug, managing your application becomes much easier. It enhances productivity by providing an intuitive set of debugging tools right at your fingertips.

Hash: aa39b0de25f3bd2b09a534438422157f4848800c8b204c2c001730f04aafe785