Developer Tools
Glyx ships with a practical set of development tools today, with a more integrated DevTools panel on the roadmap.
What exists today
Dev overlay (Ctrl+Shift+D)
A lightweight heads-up display rendered directly onto the window in dev mode. Shows frame timing, memory, and reload status at a glance. Currently being slimmed down — the next version will show three concise lines (FPS, timing, memory) plus a minimal frame bar, with a second press toggling verbose GPU/cache detail.
Hot module replacement
Sub-100ms edit-to-screen. Bun rebuilds the JS bundle on every file save; the Glyx runtime re-evaluates in place without restarting the native window. See Hot Reload.
JS inspector (CDP)
glyx dev --inspect opens a Chrome DevTools Protocol endpoint on port 9229. Attach any CDP-compatible debugger — Chrome DevTools, VS Code, WebStorm — to set breakpoints, inspect the V8 heap, and profile JS execution. See Debugging.
Performance API
perf.snapshot() and perf.onBudgetExceeded() give you programmatic access to frame timing, JS time, layout time, GPU time, and memory usage from within your app. Works in both dev and production. See perf API.
Build check
glyx build --check-performance validates frame budget compliance as part of CI. See CLI reference.
@glyx-dev/testing
A test harness for unit-testing Glyx components and backend logic without a live window. Provides stubs for all native bindings so tests run in Bun's test runner with no native dependencies. See @glyx-dev/testing.
What's coming
DevTools panel
Status: Planned. Design phase.
A floating panel (toggled with Ctrl+Shift+D) that replaces the current overlay with a proper tabbed interface:
| Tab | Content |
|---|---|
| Performance | Frame timeline, JS/layout/GPU breakdown, budget violations |
| Memory | V8 heap, RSS, GPU buffers/textures — live graph |
| Elements | Live node tree with layout bounds inspection |
| Logs | Structured log viewer with level filtering |
| Network | Pending fetch/WebSocket calls |
The Elements tab requires a node-tree introspection bridge (exposing js_nodes from glyx-core to JS via a binding) — the groundwork is laid but not yet wired.
Error overlay improvements
Build errors currently show as a full-screen red overlay. The planned improvement shows the error inline with a file link that opens in your editor (via EDITOR env var or the VS Code extension).
If you have specific DevTools workflows you'd like supported, share them in GitHub Discussions (opens in a new tab).