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-8/

DOM Element Inspector Tool

Build a utility for Electron applications that enables developers to programmatically activate element inspection mode in their app windows.

Overview

Create a function that activates element inspection mode in an Electron BrowserWindow. When activated, the element inspector should allow developers to visually select and inspect DOM elements, similar to the "Inspect Element" feature in web browsers.

Study the electron-debug package to understand how it implements element inspection functionality. Your implementation should handle both scenarios: when developer tools are already open and when they need to be opened first.

Requirements

Element Inspector Activation

The tool must provide a way to activate the element inspector for a given browser window. When activated:

  • If developer tools are not yet open on the window, they should be opened first, then the inspector should be activated
  • If developer tools are already open, the inspector should be activated immediately
  • The element inspector should be ready to select elements in the window's web content

Test Cases

  • When element inspector is activated on a window without open developer tools, the developer tools open and inspector mode activates @test
  • When element inspector is activated on a window with already-open developer tools, inspector mode activates without reopening the tools @test
  • When element inspector is activated on a window, the DevTools inspector tool becomes active @test

Implementation

@generates

API

/**
 * Activates the element inspector on the given BrowserWindow.
 * Opens DevTools if not already open, then enters inspect element mode.
 *
 * @param {BrowserWindow} window - The Electron BrowserWindow to activate inspector on
 */
function activateInspector(window) {
  // IMPLEMENTATION HERE
}

module.exports = { activateInspector };

Dependencies { .dependencies }

electron-debug { .dependency }

Provides debugging utilities for Electron applications. Study how it implements element inspection to understand the best approach.

@satisfied-by

Install with Tessl CLI

npx tessl i tessl/npm-electron-debug

tile.json