in React, React Native

Debugging on an iOS Device

Debugging in simulator


Now we have developed the iOS application with react native, it’s time to know how to  debug iOS application application. Inside the project directory you will see

Screen Shot 2016-06-01 at 13.54.00.png

 

Open Xcode project, and  open AppDelegate.m file , there you will see jsCodeLocation pointing to localhost. Since here we are trying to run the project in iOS simulator localhost refers to same machine so no problem at all.

Screen Shot 2016-06-01 at 13.57.18

Now run the project by clicking the play button in Xcode .

Screen Shot 2016-06-01 at 14.00.37

To reload application , you can press command + R   and for advance option press command + D to popup following screen. Screen Shot 2016-06-01 at 14.02.35

We can choose select reload to reload the application or click on Enable Live reload for live reload. If you wish to debug remotely in chrome then click Debug JS Remotely that will open up chrome with following screen.

Screen Shot 2016-06-01 at 14.05.01

Press command + Alt + J  to start debugging.

Screen Shot 2016-06-01 at 14.06.21.png

Debugging in iOS Device


To start debugging react native application in real device you first need to have developer certificate and provisioning profile. Configure it as you do for iOS application.  Then in AppDelegate.m change the jsCodeLocation localhost reference  to your pc ip address and run the  project. For eg.

 jsCodeLocation = [NSURL URLWithString:@”http://192.168.2.4:8081/index.ios.bundle?platform=ios&dev=true”];

Now you will see same thing as in simulator.  If you wish to debug the application in iOS device in chrome, first shake the device then you will see the advance option menu as before then, we will follow the same step as we did earlier but you will get following error screen.

Screen Shot 2016-06-01 at 14.20.34.png

To resolve this problem you need to change the localhost to ip address of your pc in  RCTWebSocketExecutor.m file which is located in

node_module > react-native > Libraries > WebSocket > RCTWebSocketExecutor.m

and change the code in setup function  and run the project again.

  NSString *URLString = [NSString stringWithFormat:@”http://localhost:%zd/debugger-proxy?role=client”, port];

to

NSString *URLString = [NSString stringWithFormat:@”http://192.168.2.4:8081:%zd/debugger-proxy?role=client”, port];

 

React native for production


Till now node server must be running in your pc other you will get remote server connection failed.

Screen Shot 2016-06-01 at 14.58.26.png

To resolve this error, uncomment  this

//jsCodeLocation = [NSURL URLWithString:@”http://192.168.2.4:8081/index.ios.bundle?platform=ios&dev=true“];

and add

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@”main” withExtension:@”jsbundle”];

 

Preparing React Native application for production.


For this we first need to generate main.jsbundle, so that it will run without node server.   Run following command in terminal  and run the ios project again.

react-native bundle --dev false --entry-file index.ios.js --bundle-output ios/main.jsbundle --platform ios

 

ref: https://facebook.github.io/react-native/docs/debugging.html

Video: https://egghead.io/lessons/react-react-native-debugging-on-an-ios-device

Write a Comment

Comment