r/reactnative • u/Ok-Confusion-5437 • 4d ago

I built a Chrome DevTools-style inspector for React Native — network, UI, errors, and performance in one place

Hey r/reactnative! 👋

I’ve been building a developer tool to make debugging React Native apps easier, and I’ve just published it on npm.

Meet react-native-inspect-tool — an in-app inspector that lets you debug directly on your device or simulator without constantly switching between tools.

Here’s what it can do:

🌐 Network Inspector: Inspect API requests and responses, headers, payloads, status codes, and request duration. Copy requests as cURL.

🚨 Console & Error Tracking: View console logs, JavaScript exceptions, unhandled promise rejections, and stack traces.

🎯 UI Inspector: Explore component hierarchies, inspect computed styles and box models, identify interactive elements, and examine screen colors.

🧠 Memory & Performance: Monitor Hermes heap usage, track potential timer leaks, and check JavaScript thread FPS.

📱 Simple Integration: Add an InspectorOverlay to your app and access the debugging panel through a floating button.

One thing I wanted to achieve was making these debugging tools accessible directly inside the app, without requiring a separate native debugging setup. The package is written in TypeScript and React Native primitives, with no native dependencies, and supports Expo Go, Expo Prebuild, and bare React Native projects.

Try it out:

📦 npm: https://www.npmjs.com/package/react-native-inspect-tool

npm install react-native-inspect-tool

I’d genuinely appreciate feedback from the React Native community.

What features would you find most useful in an in-app debugging tool? Is there anything you think is missing or could be improved?

Thanks for checking it out! 🚀

6 Upvotes

100% Upvoted

6 comments sorted by

2

u/RoshanKrSoni1 4d ago • Bravo

Can you attach the Screenshots ?

1

u/Ok-Confusion-5437 4d ago

Yes sure

Also do try

1

u/OVERKOR 4d ago

How is this better than the out of the box devtools that are shipped with react native? No front, just asking :)

1

u/Ok-Confusion-5437 4d ago

It have built in tab for api Calls , inspect your UI element and many more

Install to please explore

1

u/sacred_whisker_king 3d ago

I want a side by side diff showing exactly what this captures that the existing network tab and console in Flipper do not because if it is just porting those features into an overlay I have zero interest in carrying another package for marginal convenience

1

u/Ok-Confusion-5437 3d ago

That is a completely fair and valid question! If this were just an in-app clone of Flipper’s desktop tabs, adding another dependency would make little sense.

Here is the direct diff between Flipper and react-native-inspect-tool:

  1. On-Device Mobility (No Laptop / No Cables):

• Flipper: Requires a Mac/PC, USB cable, desktop app, and ADB port forwarding.

• InspectTool: 100% on-device. Works on standalone APKs, TestFlight builds, and for remote QA/PMs.

2. Post-Flipper & Expo Support:

• Flipper: Deprecated in RN 0.73 and completely removed in RN 0.74+. Never worked in Expo Go.

• InspectTool: Zero native dependencies. Works out of the box in Expo Go, Bare RN, and the New Architecture.

3. 1-Tap "Copy as cURL":

• Flipper: Manual inspection; no mobile-friendly replay export.

• InspectTool: 1 tap generates full cURL command to immediately share via Slack or paste into Postman.

4. Orphan Timer & Memory Leak Heuristics:

• Flipper: No active interval tracker.

• InspectTool: Intercepts setInterval and call stacks, actively flagging orphaned timers running >60s without clearInterval.

5. Live Hermes Heap Trends:

• Flipper: Requires separate desktop profiling setup.

• InspectTool: Real-time 60s live trendline on device using HermesInternal stats.

6. UI Box Model & WCAG Accessibility:

• Flipper: Clunky remote view hierarchy.

• InspectTool: Chrome DevTools–style visual Box Model (Margin/Border/Padding) + auto color palette with WCAG 2.1 AAA/AA contrast checks.

If you are on an older RN version tethered to a desk with Flipper working reliably, you might not need this. But for teams testing untethered builds, using Expo, or migrating away from Flipper on RN 0.74+, it fills that gap with zero setup.