mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-02-05 09:17:55 +08:00
42eb5464fd
This is an early release and there are several things that are known not to work if you're porting your iOS app to Android. See the Known Issues guide on the website. We will work with the community to reach platform parity with iOS.
47 lines
3.6 KiB
Markdown
47 lines
3.6 KiB
Markdown
---
|
|
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:
|
|
|
|
1. On iOS shake the device or press `control + ⌘ + z` in the simulator.
|
|
2. On Android shake the device or press hardware menu button (available on older devices and in most of the emulators, e.g. in [genymotion](https://www.genymotion.com) you can press `⌘ + m` to simulate hardware menu button click)
|
|
|
|
> Hint
|
|
|
|
> To disable the developer menu for production builds:
|
|
>
|
|
> 1. For iOS 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`.
|
|
> 2. For Android, by default, developer menu will be disabled in release builds done by gradle (e.g with gralde `assembleRelease` task). Although this behavior can be customized by passing proper value to `ReactInstanceManager#setUseDeveloperSupport`.
|
|
|
|
### Reload
|
|
Selecting `Reload` (or pressing `⌘ + r` in the iOS simulator) will reload the JavaScript that powers your application. If you have added new resources (such as an image to `Images.xcassets` on iOS or to `res/drawable` folder on Android) or modified any native code (Objective-C/Swift code on iOS or Java/C++ code on Android), you will need to re-build the app for the changes to take effect.
|
|
|
|
### 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).
|
|
|
|
In Chrome, 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:
|
|
|
|
1. On iOS - 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.
|
|
2. On Android, if you're running Android 5.0+ device connected via USB you can use `adb` command line tool to setup port forwarding from the device to your computer. For that run: `adb reverse 8081 8081` (see [this link](http://developer.android.com/tools/help/adb.html) for help on `adb` command). Alternatively, you can [open dev menu](#debugging-react-native-apps) on the device and select `Dev Settings`, then update `Debug server host for device` setting to the IP address of your computer.
|
|
|
|
#### 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
|
|
This option allows for your JS changes to trigger automatic reload on the connected device/emulator. To enable this option:
|
|
|
|
1. On iOS, select `Enable Live Reload` via the developer menu to have the application automatically reload when changes are made to the JavaScript.
|
|
2. On Android, [launch dev menu](#debugging-react-native-apps), go to `Dev Settings` and select `Auto reload on JS change` option
|
|
|
|
### 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.
|