@zearaez/devtool

@zearaez/devtool

Development-only React Native network + console logger with a floating bubble UI.

Installation

npm install @zearaez/devtool

OR

yarn add @zearaez/devtool

Works with Expo and bare React Native. This is a pure‑JavaScript package — it ships no native code, so there's nothing to link and no native rebuild. It runs identically in Expo Go, Expo dev builds / prebuild, and bare React Native.

Runnable examples

• example/ — bare React Native app.
• example-expo/ — managed Expo (SDK 54) app you can open in Expo Go. See its README.

Basic setup

DevLogger auto-initializes in React Native __DEV__ builds and patches fetch/XMLHttpRequest (and console logging). In production builds it’s a no-op.

1) Mount the UI

import { DevLogger } from '@zearaez/devtool';

export default function App() {
  return (
    <>
      {/* ... */}
      <DevLogger.UI />
    </>
  );
}

2) Enable copy‑to‑clipboard (optional)

The panel's “copy” buttons need a clipboard. DevLogger auto‑detects one if it's installed — no configuration required:

• Expo: npx expo install expo-clipboard
• Bare React Native: npm install @react-native-clipboard/clipboard (then pod install for iOS)

Prefer to wire it yourself (or use a clipboard the auto‑detection can't find)? Pass a clipboard function to init:

import * as Clipboard from 'expo-clipboard';
import { DevLogger } from '@zearaez/devtool';

DevLogger.init({
  clipboard: (text) => Clipboard.setStringAsync(text),
});

If no clipboard is available, the copy buttons are a harmless no‑op (with a one‑time hint logged in dev). Everything else — network/console capture and the UI — works with zero setup.

3) Configure (optional)

Call DevLogger.init(options?) to override defaults (safe to call unconditionally).

import { DevLogger } from '@zearaez/devtool';

DevLogger.init({
  maxLogs: 200,
  maxBodyBytes: 20_000,

  // Optional: enable Axios interception
  // interceptAxios: true,
  // axios,
});

---

Configuration reference

Defaults

• Limits
  • maxLogs: 200
  • maxBodyBytes: 20000
  • maxHeaders: 50
• Interceptors
  • interceptFetch: true
  • interceptXhr: true
  • interceptAxios: false (if true, also provide axios)
• Capture
  • captureRequestHeaders: true
  • captureResponseHeaders: true
  • captureRequestBody: true
  • captureResponseBody: true
• Redaction (recommended)
  • redactHeaders: ['authorization','cookie','set-cookie','x-api-key']
  • redactQueryParams: ['access_token','token','auth','api_key','apikey']
  • redactBodyPatterns: []
• Persistence (optional)
  • persistence: undefined
  • persistenceDebounceMs: 500
• Clipboard (optional)
  • clipboard: undefined (auto-detects expo-clipboard or @react-native-clipboard/clipboard)

Common recipes

Disable redaction (allow everything)

DevLogger.init({
  redactHeaders: [],
  redactQueryParams: [],
  redactBodyPatterns: [],
});

Reduce captured data (safer)

DevLogger.init({
  captureRequestHeaders: false,
  captureResponseHeaders: false,
  captureRequestBody: false,
  captureResponseBody: false,
});

---

Security note

Even in dev, logs can include sensitive data (tokens/cookies/PII). Keep redaction enabled and disable body/header capture when needed—especially if you enable persistence.

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

---

Made with create-react-native-library