CODEWITHSUNDEEP
iosobjective-cxcodereactjsreact-native
douglaswissett
douglaswissett

Reputation: 241

React-Native Remote Debugger not working on iPhone

I'm running a React-Native app on my iPhone, the app seems to load fine but when I shake and enable Remote JS Debugging I get this error:

enter image description here

I've tried following React-Native's docs https://facebook.github.io/react-native/docs/running-on-device-ios.html however it seems outdated.

AppDelegate.m

#import "AppDelegate.h"
#import "RCTBundleURLProvider.h"
#import "RCTRootView.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application     didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  [[RCTBundleURLProvider sharedSettings] setDefaults];
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];


  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"abcrn123"
                                           initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f     green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen     mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

Any help would be greatly appreciated, I'm trying to run and debug a React-Native app on a real device.

Thanks, Doug.

Upvotes: 3

Views: 7733

Answers (3)

SudoPlz
SudoPlz

Reputation: 23313

I quit trying to get that to work, just

  1. npm install -g localtunnel
  2. lt --port 8081
  3. Copy the url that this command outputs, and place it to your AppDelegate.m like so return [NSURL URLWithString:@"https://blue-termites-13.localtunnel.me/index.bundle?platform=ios&dev=true"];

Upvotes: 0

Andrew
Andrew

Reputation: 1088

I fought through this a bit today. Here's a flow using the React Native Debugger:

  1. Clear all caches to start fresh via: watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache clean -force && npm install, as per: https://gist.github.com/jarretmoses/c2e4786fd342b3444f3bc6beff32098d
  2. $ REACT_DEBUGGER="open -g 'rndebugger://set-debugger-loc?port=8081' ||" react-native start
    (now packager running - switch terminal windows)
  3. $ react-native run-ios --device "iPad" (or whatever your device is named)
  4. Note down the ip address listed on iPad or whatever during loading time in green status bar
  5. shake the crap out of your device, and select "enable remote JS debugging" on popup
  6. $ open "rndebugger://set-debugger-loc?host=192.168.1.231&port=8081"
    ip address == address listed in green status bar (not address in iPad's wifi settings)...

Upvotes: 1

fozzarelo
fozzarelo

Reputation: 589

Sometimes is times out. I usually it with this steps. 1. Shake it, then stop remote debugging. 2. Let it run. 3. Shake it again and turn back remote debugging. 4. Should reload again. And you should be good to go.

It's annoying I know...

Upvotes: 1

Related Questions