upgrade-support icon indicating copy to clipboard operation
upgrade-support copied to clipboard

Unable to see the network inspector in the React-native debugger tool

Open gkasireddy202 opened this issue 8 months ago • 1 comments

Environment

System: OS: macOS 15.3 CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz Memory: 35.26 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 21.7.3 path: /usr/local/bin/node Yarn: Not Found npm: version: 10.5.0 path: /usr/local/bin/npm Watchman: version: 2023.03.13.00 path: /usr/local/bin/watchman Managers: CocoaPods: version: 1.14.3 path: /Users/gopi/.rvm/gems/ruby-2.7.6/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 24.2 - iOS 18.2 - macOS 15.2 - tvOS 18.2 - visionOS 2.2 - watchOS 11.2 Android SDK: API Levels: - "23" - "27" - "32" - "33" - "34" - "35" Build Tools: - 29.0.2 - 30.0.3 - 33.0.1 - 34.0.0 - 35.0.0 System Images: - android-32 | Google APIs Intel x86 Atom_64 - android-32 | Google Play Intel x86 Atom_64 - android-33 | Google APIs Intel x86 Atom_64 - android-33 | Google Play Intel x86 Atom_64 Android NDK: Not Found IDEs: Android Studio: 2024.2 AI-242.23726.103.2422.13103373 Xcode: version: 16.2/16C5032a path: /usr/bin/xcodebuild Languages: Java: version: 18.0.2.1 path: /Library/Java/JavaVirtualMachines/jdk-18.0.2.1.jdk/Contents/Home/bin/javac Ruby: version: 2.7.6 path: /Users/gopi/.rvm/rubies/ruby-2.7.6/bin/ruby npmPackages: "@react-native-community/cli": installed: 15.0.1 wanted: 15.0.1 react: installed: 19.0.0 wanted: 19.0.0 react-native: installed: 0.78.0 wanted: 0.78.0 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: Not found newArchEnabled: Not found iOS: hermesEnabled: Not found newArchEnabled: false

Things I’ve done to figure out my issue

I recently upgraded my project from 0.73.11 to 0.78.0. I ran my app in debug mode in the iOS simulator(18.2). I see the metro bundle ran in my system. I pressed the j keyword to open the developer tools. The React-Native dev tools window is opened in my system but I cannot see the network inspector in the dev tool window. I used the flipper to debug and network inspector for my app in react-native:0.73.11

Upgrading version

0.78.0

Description

Image

Reproducible demo

react-native run-ios --simulator "iPhone 16 Pro"

gkasireddy202 avatar Mar 21 '25 07:03 gkasireddy202

There is currently no way to inspect network traffic from RN with the new architecture. The Expo DevTools can do the work, however if you're ejected from Expo then the best you can do is copy and paste the code below into your App.tsx file before the component function declaration

const originalFetch = global.fetch;
global.fetch = async (...args) => {
  console.log('Fetching:', args);
  return originalFetch(...args);
};
if (global.HermesInternal?.enablePromiseRejectionTracker) {
  HermesInternal.enablePromiseRejectionTracker();
}

This will console.log the outgoing network requests, it's abysmal to say the least but it beats nothing.

casellac1 avatar Jun 03 '25 15:06 casellac1