react-native/docs/Debugging.md

---
id: debugging
title: Debugging
layout: docs
category: Guides
permalink: docs/debugging.html
next: testing
---

## 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](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](http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511) 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](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) extension for Google Chrome. This will allow you to navigate the component hierarchy via the `React` in the developer tools (see [facebook/react-devtools](https://github.com/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.
Add basic documentation for debugging react native apps 2015-03-28 23:28:51 +00:00			`---`
			`id: debugging`
			`title: Debugging`
			`layout: docs`
			`category: Guides`
			`permalink: docs/debugging.html`
			`next: testing`
			`---`

			`## Debugging React Native Apps`
[Docs] Tweak debugging docs to be more concise 2015-05-29 20:00:27 +00:00			To access the in-app developer menu, shake the iOS device or press `control + ⌘ + z` in the simulator.
Add basic documentation for debugging react native apps 2015-03-28 23:28:51 +00:00
Debugging on real devices Added a hint about how to enable debugging on real devices. 2015-04-07 22:50:55 +00:00			`> Hint`
			`>`
[Docs] Tweak debugging docs to be more concise 2015-05-29 20:00:27 +00:00			> 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`.
[Docs] Clean up debugging docs 2015-04-29 23:59:50 +00:00
			`### Reload`
[Docs] Tweak debugging docs to be more concise 2015-05-29 20:00:27 +00:00			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).
[Docs] Clean up debugging docs 2015-04-29 23:59:50 +00:00
			`### Chrome Developer Tools`
[Docs] Tweak debugging docs to be more concise 2015-05-29 20:00:27 +00:00			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](http://localhost:8081/debugger-ui).
[Docs] Clean up debugging docs 2015-04-29 23:59:50 +00:00
[Docs] Tweak debugging docs to be more concise 2015-05-29 20:00:27 +00:00			Press `⌘ + option + i` or select `View` → `Developer` → `Developer Tools` to toggle the developer tools console. Enable [Pause On Caught Exceptions](http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511) for a better debugging experience.
Debugging on real devices Added a hint about how to enable debugging on real devices. 2015-04-07 22:50:55 +00:00
[Docs] Tweak debugging docs to be more concise 2015-05-29 20:00:27 +00:00			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.
Add a comment about Live Reload 2015-03-29 03:30:47 +00:00
[Docs] Clean up debugging docs 2015-04-29 23:59:50 +00:00			`#### React Developer Tools (optional)`
[Docs] Tweak debugging docs to be more concise 2015-05-29 20:00:27 +00:00			Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) extension for Google Chrome. This will allow you to navigate the component hierarchy via the `React` in the developer tools (see [facebook/react-devtools](https://github.com/facebook/react-devtools) for more information).
Add a comment about Live Reload 2015-03-29 03:30:47 +00:00
[Docs] Clean up debugging docs 2015-04-29 23:59:50 +00:00			`### Live Reload`
[Docs] Tweak debugging docs to be more concise 2015-05-29 20:00:27 +00:00			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.