@gscodes/rntoolbox-helper

The companion helper library for standardizing RNToolBox debugging data.

This lightweight library patches React Native's fetch, XMLHttpRequest, and console to capture high-fidelity debugging data and stream it locally to the RNToolBox IntelliJ/WebStorm plugin.

Features

• 📡 High-Fidelity Network Capture: Captures headers, bodies (text/JSON/Blob), and timings for fetch and XMLHttpRequest.
• 🪵 Console Log Stream: Forwards console.log, warn, error, info, and debug to the IDE with advanced JSON expansion.
• 🌳 Component Tree: Captures the React Native component hierarchy for inspection in the IDE (Pro feature).
• ⚡ Zero-Config: Auto-discovers the plugin's local server. No complex setup required.

Installation

npm install @gscodes/rntoolbox-helper --save-dev
# or
yarn add @gscodes/rntoolbox-helper --dev

Usage

Import this package at the very top of your application's entry file (usually index.js or App.tsx), before any other imports.

// index.js
import '@gscodes/rntoolbox-helper'; // <--- Add this line first

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

That's it! The helper will automatically connect to the running RNToolBox plugin in your IDE.

Privacy & Security

Your data never leaves your machine. This package only communicates with 127.0.0.1 (localhost) or the Android emulator host loopback (10.0.2.2). No data is sent to any external server or cloud service. All processing happens locally within your IDE.

Troubleshooting

• Not connecting? Ensure your IDE is open and the RNToolBox tool window is active.
• Android Emulator? The helper automatically tries 10.0.2.2. Ensure adb reverse isn't needed (we use the loopback directly), but running adb reverse tcp:17361 tcp:17361 can sometimes help if you have a custom setup.
• iOS Device? Ensure your device is on the same Wi-Fi as your computer and can reach your computer's IP.

License

MIT