npm package: @nodomx/devtools
Description: Browser devtools bridge and overlay for NodomX applications.
Latest version: 0.2.6

# `@nodomx/devtools`

`@nodomx/devtools` is the official runtime debugging panel for NodomX.

## Features

- Discover mounted NodomX apps automatically
- Browse the module tree and inspect the selected module
- Auto-scroll the tree to the selected module and jump back from picked DOM nodes
- Inspect `setup`, `state`, `props`, `route`, `exposed`, and official store state
- Record runtime timeline events including `Transition`, `KeepAlive`, and `Suspense`
- Group timeline events by reason or module and drill into event details
- Copy the visible timeline, copy grouped event summaries, and export grouped events
- Persist panel filters, active tab, and timeline grouping between close/open cycles
- Highlight the selected module's real DOM
- Pick a live DOM element and jump back to the owning module
- Jump from grouped timeline events directly to the owning module or highlighted DOM node
- Patch module `setup` / `state` directly from the panel
- Patch official store state directly from the panel
- Edit route path, query rows, query JSON, and hash directly from the panel
- Load query JSON back into query rows and sort query keys before navigation
- Reset route editors, copy the current route, and copy or inspect event payloads
- Export snapshots and inspect data in the browser console
- Open or close the panel with `Ctrl + Shift + D`

## Install

```bash
npm install -D @nodomx/devtools
```

## Usage

```js
import { createDevtools } from "@nodomx/devtools";
import { Nodom } from "nodomx";
import App from "./App.nd";

const app = Nodom.createApp(App, "#app");
app.use(createDevtools());
app.mount("#app");
```

## Panel areas

- `App tabs`: switch between mounted apps
- `Module tree`: browse modules, search by name or hot id, and change selection
- `Timeline`: review lifecycle, render, and suspense-related events, then group them by reason or module
- `Timeline exports`: copy the currently visible timeline or the active group summary/events
- `Events`: inspect the selected timeline event payload in detail, copy it, or send it to the console
- `Timeline groups`: inspect the active group summary and recent events inside that group
- `Inspector`: inspect and patch the selected module or store, edit route path/query/hash, and view the selected module path
- `Pick element`: hover the page and click a real DOM element to focus its owning module
- `Route editor`: edit query rows visually, round-trip them through JSON, reset drafts, or copy the current route

## Runtime API

```js
import {
  createDevtools,
  getDevtoolsHook,
  installDevtoolsHook,
  notifyDevtoolsUpdate
} from "@nodomx/devtools";
```

Common hook methods:

- `installDevtoolsHook(options?)`
- `getDevtoolsHook()`
- `notifyDevtoolsUpdate(app, reason, details?)`
- `hook.getSnapshot(appId?)`
- `hook.getTimeline(appId?)`
- `hook.exportSnapshot(appId?)`
- `hook.inspectSelection(appId?, moduleId?)`
- `hook.highlightSelection(appId?, moduleId?)`
- `hook.pickElement(target, appId?)`
- `hook.navigateRoute(pathOrLocation, options?)`
- `hook.applyModulePatch(appId?, moduleId?, "setup" | "state", payload)`
- `hook.applyStorePatch(appId?, storeId, payload)`

## Notes

This is an embedded runtime panel, so it works without a separate browser extension. It can later evolve into a dedicated standalone DevTools experience.