CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-electron-debug

Adds useful debug features to your Electron app

86

1.19x
Overview
Eval results
Files

task.mdevals/scenario-10/

Multi-Window Development Helper

Create a simple Electron application that automatically sets up development tools for newly created windows. The application should have a main window and should be able to spawn additional child windows. When any window is created, development features should be automatically initialized without manual setup for each window.

Requirements

Your application should:

  1. Create a main window that displays "Main Window" text
  2. Include a button in the main window that creates a new child window when clicked
  3. Automatically enable development tools (DevTools) on all windows as they are created
  4. Use event-driven initialization to set up the development features - the setup should happen automatically when windows are created, not manually called for each window
  5. The development tools should include keyboard shortcuts for toggling DevTools (F12) and reloading windows (Ctrl+R or Cmd+R)

Implementation Details

  • Create a main process file main.js that handles window creation
  • Create HTML files for the main window (index.html) and child window (child.html)
  • Child windows should display "Child Window" text
  • The main window should include a button labeled "Open Child Window"
  • Use the app.whenReady() pattern to start the application
  • Ensure proper window cleanup when windows are closed

Test Cases

  • Starting the application creates a main window with DevTools available @test
  • Pressing the "Open Child Window" button creates a new window with DevTools automatically available @test
  • DevTools can be toggled on the main window using F12 @test
  • Windows can be reloaded using the keyboard shortcut @test

@generates

API

// Main process entry point that:
// - Initializes the application
// - Sets up event-driven development tools initialization
// - Creates the main window
// - Handles window lifecycle

Dependencies { .dependencies }

electron-debug { .dependency }

Provides automatic development tools setup for Electron applications.

Install with Tessl CLI

npx tessl i tessl/npm-electron-debug

tile.json