React Native complete debuggers

[sanjarcode]

React Native debug tooling

1. React Native Debugger desktop app

   1. Setup - android nothing. For IOS, then disable flipper default

      1. re-build ios app
      2. got to this file node_modules/react-native/React/CoreModules/RCTDevMenu.mm

      3. make this file

         diff --git a/node_modules/react-native/React/CoreModules/RCTDevMenu.mm b/node_modules/react-native/React/CoreModules/RCTDevMenu.mm
         index 881c3f2..1447e8f 100644
         --- a/node_modules/react-native/React/CoreModules/RCTDevMenu.mm
         +++ b/node_modules/react-native/React/CoreModules/RCTDevMenu.mm
         @@ -230,36 +230,7 @@ RCT_EXPORT_MODULE()
                                                         }]];
         
            if (!devSettings.isProfilingEnabled) {
         -#if RCT_ENABLE_INSPECTOR
         -    if (devSettings.isDeviceDebuggingAvailable) {
         -      // For on-device debugging we link out to Flipper.
         -      // Since we're assuming Flipper is available, also include the DevTools.
         -      // Note: For parity with the Android code.
         -      [items addObject:[RCTDevMenuItem
         -                           buttonItemWithTitleBlock:^NSString * {
         -                             return @"Open Debugger";
         -                           }
         -                           handler:^{
         -                             [RCTInspectorDevServerHelper
         -                                          openURL:@"flipper://null/Hermesdebuggerrn?device=React%20Native"
         -                                    withBundleURL:bundleManager.bundleURL
         -                                 withErrorMessage:@"Failed to open Flipper. Please check that Metro is runnning."];
         -                           }]];
         -
         -      [items addObject:[RCTDevMenuItem
         -                           buttonItemWithTitleBlock:^NSString * {
         -                             return @"Open React DevTools";
         -                           }
         -                           handler:^{
         -                             [RCTInspectorDevServerHelper
         -                                          openURL:@"flipper://null/React?device=React%20Native"
         -                                    withBundleURL:bundleManager.bundleURL
         -                                 withErrorMessage:@"Failed to open Flipper. Please check that Metro is runnning."];
         -                           }]];
         -    } else if (devSettings.isRemoteDebuggingAvailable) {
         -#else
              if (devSettings.isRemoteDebuggingAvailable) {
         -#endif
                // For remote debugging, we open up Chrome running the app in a web worker.
                // Note that this requires async communication, which will not work for Turbo Modules.
                [items addObject:[RCTDevMenuItem

   2. To use, turn on simulator, then turn on this desktop app.
   3. Open dev context menu in simulator and click 'Debug' as usual, now instead of opening Chrome tab, the desktop app will catch the running instance of the simulator
   4. To enable networking - click at the top of the element inspector (in desktop app), and select "Enable network inspect"
      • This is a complete solution, has
      • Redux tools
      • React Dev tools (web) like element inspector with props, styles
      • Network inspector
      • AsyncStorage clear, logger. Since Applications tab > cookies doesn not work.
      • Problems
      • When making API call with binary FormData, this tool affects RN in that it removes the binary attribute, and the server never gets it. Weird side effect, yes. So to test uploads, turn off debugger temporarily. Reason: The tool has to listen and forward network from RN, but it is unable to properly forward FormData binaries.
2. Flipper desktop app by facebook - prefer over React Native Debugger use if RN version is latest. Doesn't work well with older RN version apps.

[sanjarcode]

Add to notes