skills.rest
astrum-forge
astrum-forgeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

devtools

Inspects and debugs running ignifx games through a DOM overlay with nine diagnostic panels.

Updated Sep 5, 2026
Search Tags:#debugging#devtools#diagnostics#game engine#webgpu#inspector#ignifx
One-click install
npx skills add https://github.com/astrum-forge/ignifx --skill devtools-astrum-forge
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: devtools
Source: https://github.com/astrum-forge/ignifx/tree/main/packages/devtools/skills/devtools
Command: npx skills add https://github.com/astrum-forge/ignifx --skill devtools-astrum-forge

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @ignifx/devtools, @ignifx/core.

What problem does it solve? When an ignifx game misbehaves, developers need to see what the engine is actually doing at runtime: frame timing, entity counts, component values, asset refcounts, and physics state. This Skill explains how to register and drive the @ignifx/devtools overlay to answer those questions without shipping debug code to production. ## Core Features & Use Cases - Stats and Timeline panels: Read frame time, fixed steps, scripts updated, and per-subsystem counters from app.diagnostics, with a per-phase timing graph. - Scene tree and Inspector: Browse the entity hierarchy and edit component properties live through schema-driven rows, with Transform handled as a special case. - Console, Assets, Input, Audio, and Physics panels: Capture log output via a dedicated sink, list manifest assets, and inspect optional subsystems that degrade gracefully when their packages are not registered. - Use Case: A developer notices frame drops in a 2D platformer, registers devtools() in the development build, opens the Timeline panel with the backtick key, and identifies which system phase is over budget. ## Quick Start Ask the assistant to show how to register @ignifx/devtools in an ignifx app and open the Inspector on a specific entity.

Frequently Asked Questions about devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a debug overlay to an ignifx game?▼

Register the devtools() extension in createApp({ extensions: [devtools()] }) and press the backtick key, or call app.devtools.open(). The overlay mounts as a sibling of the canvas and costs nothing while closed.

How do I read frame timing and diagnostics in ignifx?▼

Read app.diagnostics.frame for rawDeltaMs, fixedSteps, and scriptsUpdated, and query per-subsystem counters via app.diagnostics.group("render"). These are the same values the Stats panel displays, so no overlay is needed.

Does @ignifx/devtools work without @ignifx/ui or @ignifx/input?▼

Yes, all sibling packages are optional peers reached structurally. A game with only @ignifx/core gets the same overlay, with the input, audio, and physics panels reporting that their subsystem is not registered.

Can I use ignifx devtools in a headless app or test?▼

Yes, everything except the DOM works headlessly. On an app with no canvas, open() is a no-op with one debug line, while panel(), select(), and the signals behave normally.

Why is the ignifx devtools toggle key not working in a text field?▼

The toggle key is a raw keydown listener on the document, not an input action, and it deliberately ignores keystrokes typed into input, textarea, select, or contenteditable elements. Click outside the field or use app.devtools.toggle() instead.

Should ignifx devtools be included in a production build?▼

No, the package is a development tool that exposes engine internals and should be registered behind a development flag. It is roughly 36 KB gzipped and nothing in it is a stable runtime surface for game code.

Related Skills

Explore More Software Engineering Skills→
lukebazelukebaze

threejs

Create interactive 3D scenes and animations in the browser with Three.js.

Community
Advanced
SteveChandlerSteveChandler
1

optimize

Diagnose and fix web performance issues across loading, rendering, animations, and bundle size.

Community
Intermediate
dhntdhnt

write-test

Write regression-focused unit tests for uncovered code behaviors.

Official
Intermediate
curiositechcuriositech
181

performance-profiling

Analyze Node.js application performance via CPU profiling and database query analysis.

Official
Advanced