Electron Debug

import debug from "electron-debug";

import { devTools, openDevTools, refresh } from "electron-debug";

const debug = require("electron-debug");
const { devTools, openDevTools, refresh } = require("electron-debug");

import { app, BrowserWindow } from "electron";
import debug from "electron-debug";

// Enable debug features (automatic keyboard shortcuts + DevTools)
debug();

let mainWindow;
(async () => {
  await app.whenReady();
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });
  // DevTools will automatically open if showDevTools: true (default)
  // Keyboard shortcuts are automatically registered
})();

/**
 * Install keyboard shortcuts and optionally activate DevTools on each created BrowserWindow
 * @param options - Configuration options for debug behavior
 */
function debug(options?: Options): void;

interface Options {
  /** Enable/disable debug features. Default: development mode detection */
  isEnabled?: boolean;
  /** Show DevTools on each created BrowserWindow. Default: true */
  showDevTools?: boolean;
  /** The dock state to open DevTools in. Default: 'previous' */
  devToolsMode?: 'undocked' | 'left' | 'right' | 'bottom' | 'previous' | 'detach';
  /** 
   * Customize options for each window. Allows per-window configuration.
   * @param window - The BrowserWindow instance to configure
   * @returns true (use global options), false (disable debug), or Partial<Options> (override specific options)
   */
  windowSelector?: (window: Readonly<BrowserWindow>) => boolean | Partial<Options>;
}

import debug from "electron-debug";

// Basic setup - enables all features in development
debug();

// Custom configuration
debug({
  isEnabled: true,  // Force enable even in production
  showDevTools: false,  // Don't auto-open DevTools
  devToolsMode: 'bottom',  // Dock DevTools at bottom
});

// Per-window configuration
debug({
  windowSelector: (window) => {
    // Disable debug for windows with specific titles
    if (window.getTitle() === 'Settings') {
      return false;  // Same as { isEnabled: false }
    }
    // Custom options for main window
    if (window.getTitle() === 'Main') {
      return { devToolsMode: 'right', showDevTools: true };
    }
    // Use different dock mode for secondary windows
    if (window.getTitle().startsWith('Secondary')) {
      return { devToolsMode: 'bottom', showDevTools: false };
    }
    return true;  // Use global options for other windows
  },
});

/**
 * Toggle DevTools for the specified BrowserWindow instance or the focused one
 * @param window - BrowserWindow to toggle DevTools for. Default: BrowserWindow.getFocusedWindow()
 */
function devTools(window?: BrowserWindow): void;

import { devTools } from "electron-debug";
import { BrowserWindow } from "electron";

// Toggle DevTools for focused window
devTools();

// Toggle DevTools for specific window
const myWindow = new BrowserWindow();
devTools(myWindow);

/**
 * Open DevTools for the specified BrowserWindow instance or the focused one
 * @param window - BrowserWindow to open DevTools for. Default: BrowserWindow.getFocusedWindow()
 */
function openDevTools(window?: BrowserWindow): void;

import { openDevTools } from "electron-debug";

// Open DevTools for focused window
openDevTools();

// Open DevTools for specific window with custom options
const debugWindow = new BrowserWindow();
openDevTools(debugWindow);

/**
 * Reload the specified BrowserWindow instance or the focused one
 * @param window - BrowserWindow to reload. Default: BrowserWindow.getFocusedWindow()
 */
function refresh(window?: BrowserWindow): void;

import { refresh } from "electron-debug";

// Refresh focused window
refresh();

// Refresh specific window
const targetWindow = BrowserWindow.getAllWindows()[0];
refresh(targetWindow);

interface Options {
  /** Enable/disable debug features. Default: development mode detection via electron-is-dev */
  isEnabled?: boolean;
  /** Show DevTools on each created BrowserWindow. Default: true */
  showDevTools?: boolean;
  /** 
   * The dock state to open DevTools in. Default: 'previous'
   * - 'undocked': DevTools in separate floating window
   * - 'left': Docked to left side of window (vertical split)
   * - 'right': Docked to right side of window (vertical split)
   * - 'bottom': Docked to bottom of window (horizontal split)
   * - 'previous': Use the previously used dock state
   * - 'detach': Detached in separate window (same as 'undocked')
   */
  devToolsMode?: 'undocked' | 'left' | 'right' | 'bottom' | 'previous' | 'detach';
  /**
   * Specify customized options for each window. Allows fine-grained control over debug behavior per window.
   * Called for each BrowserWindow when it's created. Enables different debug configurations for different windows.
   * @param window - The BrowserWindow instance to configure
   * @returns true (use global options), false (disable debug entirely), or Partial<Options> (override specific options)
   * @example
   * windowSelector: (window) => {
   *   if (window.getTitle() === 'Settings') return false;
   *   if (window.getTitle() === 'Main') return { devToolsMode: 'right' };
   *   return true;
   * }
   */
  windowSelector?: (window: Readonly<BrowserWindow>) => boolean | Partial<Options>;
}

// Only active in development (default behavior)
debug();

// Force enable in production
debug({ isEnabled: true });

// Explicitly disable
debug({ isEnabled: false });