KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #ai-agent #developer-tools #claude-code #codex #deepseek-harness #ai-agents #cli #react #mcp

react-native-nativescope

★ 44 Open GitHub ↗

The all-in-one debugging toolkit for React Native.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# NativeScope

**A fully local debugging environment for React Native.**

NativeScope is being built as a plug-and-play debug environment for React Native teams: one local Studio, one simple install, and modules that help you understand what is happening inside your app without accounts, cloud sync, or heavy setup.

Three modules ship today:

- **Storage** discovers AsyncStorage, MMKV, expo-sqlite, and op-sqlite while the app is running, then gives you a professional interface to inspect, edit, diff, restore, and reason about real app data.
- **Network** captures HTTP and GraphQL operations in one timeline, with structured payload inspection, filters, capture sessions, replay, performance insights, and automatic links to the storage changed by each response.
- **Logs** captures JavaScript console output from boot, keeps structured values and stacks inspectable, protects the app from noisy bursts, and opens any useful moment in Timeline.

**Timeline** is the shared desktop lens across the modules: start from a log, error, failed request or
Mark, then see Logs, Network and Storage together around that moment.

No account. No cloud. No provider. No root wrapper. Your development data stays on your machine.

```bash
npm install --save-dev react-native-nativescope
npx nativescope
```

NativeScope composes your Metro config in development, opens the local Studio, and gets out of the way for release builds.

## Why NativeScope

- **One environment, growing by modules**: Storage, Network and Logs share the same local Studio, transport, and configuration; Timeline connects their context.
- **Zero-friction storage discovery** for AsyncStorage, MMKV, expo-sqlite, and op-sqlite.
- **Bidirectional editing** so Studio changes can update the running app.
- **Visual JSON navigation** for nested objects, arrays, inline edits, and TypeScript shape export.
- **SQLite table tooling** with tabs, sorting, selection, inline edits, inserts, bulk delete, and SQL execution.
- **SQL views as first-class objects**, listed with what they read and editable through their `INSTEAD OF` triggers — so a sync engine's local database reads as your app's tables, not as opaque JSON.
- **Snapshots and diff** to freeze storage, compare later, highlight changes, and restore safely.
- **HTTP and GraphQL inspection** with structured replay, session insights, sound rules, and storage impact.
- **JavaScript log inspection** with boot capture, namespaces, structured values, stacks, repeat grouping, burst limits, Marks, and Timeline.
- **Local-first by design** over `127.0.0.1`, with no login, telemetry, or hosted data path.

## Quickstart

Install it as a dev dependency and run it instead of Metro:

```bash
npm install --save-dev react-native-nativescope
npx nativescope
```

Then open your app. When it connects, the Storage module appears in the Studio with every detected provider.

Enable Network in the same optional root configuration file:

```ts
// nativescope.config.ts
import { defineNativeScopeConfig } from "react-native-nativescope/app";

export default defineNativeScopeConfig({
  modules: {
    network: true,
    logs: true,
  },
});
```

## Optional app reactivity

Storage discovery and editing work without app code. Add a root config file only when you want app screens to react immediately after Studio-originated edits, for example when a value is cached by React Query.

```ts
// nativescope.config.ts
import { defineNativeScopeConfig } from "react-native-nativescope/app";

export default defineNativeScopeConfig({
  modules: {
    network: true,
    storage: {
      reactQuery: true,
      indicator: true,
    },
  },
});
```

`network: true` enables HTTP and GraphQL capture. `logs: true` captures JavaScript console output and global errors in development. `reactQuery: true` discovers QueryClient instances automatically and invalidates them only for Studio-originated changes. `indicator: true` shows a small in-app confirmation when storage is updated from the Studio. Every option is development-only.

## Repository

| Path                | Purpose                                                     |
| ------------------- | ----------------------------------------------------------- |
| `apps/cli`          | Public npm package, local server, Metro resolver, and shims |
| `apps/desktop`      | Browser-based NativeScope Studio                            |
| `apps/playground`   | Expo integration and release-bundle fixture                 |
| `apps/site`         | Landing page, documentation, journal, and comparison pages  |
| `packages/protocol` | Versioned wire schemas and payload budgets                  |
| `packages/runtime`  | On-device registry, adapters, streams, and transport        |
| `packages/testkit`  | Contract, scale-budget, and adapter fixtures                |

## Development

```bash
pnpm install --frozen-lockfile
pnpm -r typecheck
pnpm -r test
pnpm --filter react-native-nativescope build
node apps/cli/dist/cli.mjs --fake --no-open
```

The public package embeds the compiled Studio in `apps/cli/dist/ui`. CI verifies the npm tarball, clean consumer install, CLI entrypoint, bundled Studio, package boundaries, and release-bundle safety.

## Documentation

Read the docs, engineering notes, and comparisons at [nativescope.dev](https://nativescope.dev).

## License

[MIT](LICENSE)

react-native-nativescope

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README