diff --git a/docs/debugging.html b/docs/debugging.html index fda87bd89d5..281c1eec111 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.

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 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.

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

Getting Started

Requirements #

  1. OS X - This repo only contains the iOS implementation right now, and Xcode only runs on Mac.
  2. New to Xcode? Download it from the Mac App Store.
  3. Homebrew is the recommended way to install node, watchman, and flow.
  4. brew install node. New to node or npm?
  5. brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.
  6. brew install flow. If you want to use flow.

Quick start #

  • npm install -g react-native-cli
  • react-native init AwesomeProject

In the newly created folder AwesomeProject/

  • Open AwesomeProject.xcodeproj and hit run in Xcode
  • Open index.ios.js in your text editor of choice and edit some lines
  • Hit cmd+R (twice) in your iOS simulator to reload the app and see your change!

Congratulations! You've just successfully run and modified your first React Native app.

Next →
React Native

Quick Start

Guides

components

apis

Polyfills

Getting Started

Requirements #

  1. OS X - This repo only contains the iOS implementation right now, and Xcode only runs on Mac.
  2. New to Xcode? Download it from the Mac App Store.
  3. Homebrew is the recommended way to install node, watchman, and flow.
  4. brew install node. New to node or npm?
  5. brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.
  6. brew install flow. If you want to use flow.

Quick start #

  • npm install -g react-native-cli
  • react-native init AwesomeProject

In the newly created folder AwesomeProject/

  • Open AwesomeProject.xcodeproj and hit run in Xcode
  • Open index.ios.js in your text editor of choice and edit some lines
  • Hit cmd+R (twice) in your iOS simulator to reload the app and see your change!

Congratulations! You've just successfully run and modified your first React Native app.

If you run into any issues getting started, see the troubleshooting page.

Next →