@web-engine-dev/devtools

Inspector, profiler, and debug tools for web-engine.

Features

• Entity Inspector: View/edit entity components
• World Inspector: Browse all entities
• Profiler: Frame time breakdown
• Asset Browser: View loaded assets
• Scene Hierarchy: Visual entity tree

Installation

npm install @web-engine-dev/devtools
# or
pnpm add @web-engine-dev/devtools

Quick Start

import { DevTools } from '@web-engine-dev/devtools';

// Initialize devtools
const devtools = new DevTools({
  world: ecsWorld,
  renderer: gameRenderer,
});

// Enable in development
if (import.meta.env.DEV) {
  devtools.enable();
}

// Toggle with F12
devtools.setHotkey('F12');

API Overview

Entity Inspector

// Select entity for inspection
devtools.inspect(entity);

// The inspector shows:
// - Entity ID
// - Component list
// - Editable component values
// - Add/remove components

World Inspector

devtools.showWorldInspector();

// Features:
// - Entity list with search
// - Filter by components
// - Sort by ID, name, etc.
// - Bulk operations

Profiler

devtools.showProfiler();

// Shows:
// - Frame time graph
// - System execution times
// - Draw call count
// - Memory usage
// - GPU timing (if available)

Asset Browser

devtools.showAssetBrowser();

// Features:
// - View loaded assets
// - Preview textures
// - Check asset sizes
// - Hot reload assets

Scene Hierarchy

devtools.showHierarchy();

// Features:
// - Tree view of entities
// - Drag and drop reparenting
// - Visibility toggles
// - Lock/unlock entities

Custom Panels

devtools.addPanel('Game State', (ctx) => {
  ctx.text(`Score: ${game.score}`);
  ctx.text(`Level: ${game.level}`);

  if (ctx.button('Reset')) {
    game.reset();
  }
});