diff --git a/docs/debugging.html b/docs/debugging.html index 29d71942322..c471a568f02 100644 --- a/docs/debugging.html +++ b/docs/debugging.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Debugging

Debugging React Native Apps #

To debug the javascript code of your react app do the following:

  1. Run your application in the iOS simulator.
  2. Press Command + D and a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now)
  3. Enable Pause On Caught Exceptions for a better debugging experience.
  4. Press Command + Option + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.
  5. You should now be able to debug as you normally would.

Hint

To debug on a real device: Open the file RCTWebSocketExecutor.m and change localhost to the IP address of your computer. Shake the device to open the development menu with the option to start debugging.

Optional #

Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the view hierarchy if you select the React tab when the developer tools are open.

Live Reload #

To activate Live Reload do the following:

  1. Run your application in the iOS simulator.
  2. Press Control + Command + Z.
  3. You will now see the Enable/Disable Live Reload, Reload and Enable/Disable Debugging options.
Next →
React Native

Quick Start

Guides

components

apis

Polyfills

Debugging

Debugging React Native Apps #

To access the in-app developer menu, shake the iOS device or press control + ⌘ + z in the simulator.

Hint

To disable the developer menu for production builds, open your project in Xcode and select Product → Scheme → Edit Scheme... (or press ⌘ + <). Next, select Run from the menu on the left and change the Build Configuration to Release.

Reload #

Selecting Reload or pressing ⌘ + r in the simulator will reload the JavaScript that powers your application. If you have added new resources (such as an image to Images.xcassets) or modified any Objective-C/Swift code, you will need to re-build from Xcode for the changes to take effect (you can do this with ⌘ + r in Xcode).

Chrome Developer Tools #

To debug the JavaScript code in Chrome, select Debug in Chrome from the developer menu. This will open a new tab at http://localhost:8081/debugger-ui.

Press ⌘ + option + i or select View → Developer → Developer Tools to toggle the developer tools console. Enable Pause On Caught Exceptions for a better debugging experience.

To debug on a real device: Open the file RCTWebSocketExecutor.m and change localhost to the IP address of your computer. Shake the device to open the development menu with the option to start debugging.

React Developer Tools (optional) #

Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the component hierarchy via the React in the developer tools (see facebook/react-devtools for more information).

Live Reload #

Select Enable Live Reload via the developer menu to have the application automatically reload when changes are made to the JavaScript.

FPS (Frames per Second) Monitor #

On 0.5.0-rc and higher versions, you can enable a FPS graph overlay in the developers menu in order to help you debug performance problems.

Next →
React Native

Quick Start

Guides

components

apis

Polyfills

Running On Device

Note that running on device requires Apple Developer account and provisioning your iPhone. This guide covers only React Native specific topic.

Accessing development server from device #

You can iterate quickly on device using development server. To do that, your laptop and your phone have to be on the same wifi network.

  1. Open iOS/AppDelegate.m
  2. Change the IP in the URL from localhost to your laptop's IP
  3. In Xcode select your phone as build target and press "Build and run"

Hint

Shake the device to open development menu (reload, debug, etc.)

Using offline bundle #

You can also pack all the JavaScript code within the app itself. This way you can test it without development server running and submit the app to the AppStore.

  1. Open iOS/AppDelegate.m
  2. Follow the instructions for "OPTION 2":
    • Uncomment jsCodeLocation = [[NSBundle mainBundle] ...
    • Run the react-native bundle command in terminal from the root directory of your app

The bundle script supports a couple of flags:

  • --dev - sets the value of __DEV__ variable to true. When true it turns on a bunch of useful development warnings. For production it is recommended to set __DEV__=false.
  • --minify - pipe the JS code through UglifyJS.

Troubleshooting #

If curl command fails make sure the packager is running. Also try adding --ipv4 flag to the end of it.

If you started your project a while ago, main.jsbundle might not be included into Xcode project. To add it, right click on your project directory and click "Add Files to ..." - choose the main.jsbundle file that you generated.

Next →
React Native

Quick Start

Guides

components

apis

Polyfills

Running On Device

Note that running on device requires Apple Developer account and provisioning your iPhone. This guide covers only React Native specific topic.

Accessing development server from device #

You can iterate quickly on device using development server. To do that, your laptop and your phone have to be on the same wifi network.

  1. Open iOS/AppDelegate.m
  2. Change the IP in the URL from localhost to your laptop's IP
  3. In Xcode select your phone as build target and press "Build and run"

Hint

Shake the device to open development menu (reload, debug, etc.)

Using offline bundle #

You can also pack all the JavaScript code within the app itself. This way you can test it without development server running and submit the app to the AppStore.

  1. Open iOS/AppDelegate.m
  2. Follow the instructions for "OPTION 2":
    • Uncomment jsCodeLocation = [[NSBundle mainBundle] ...
    • Run the react-native bundle command in terminal from the root directory of your app

The bundle script supports a couple of flags:

  • --dev - sets the value of __DEV__ variable to true. When true it turns on a bunch of useful development warnings. For production it is recommended to set __DEV__=false.
  • --minify - pipe the JS code through UglifyJS.

Disabling in-app developer menu #

When building your app for production, your app's scheme should be set to Release as detailed in the debugging documentation in order to disable the in-app developer menu.

Troubleshooting #

If curl command fails make sure the packager is running. Also try adding --ipv4 flag to the end of it.

If you started your project a while ago, main.jsbundle might not be included into Xcode project. To add it, right click on your project directory and click "Add Files to ..." - choose the main.jsbundle file that you generated.

Next →