8324e92f76
Summary: The Getting Started guide is one of the first documents a new user will encounter. This pull request aims to minimize the amount of time it takes to get a React Native app up and running. * The original section title, "Required prerequisites", is redundant. "Installing React Native" is a better description of what this section is about. * Detailed installation instructions for each of the required tools are delegated to the first party instructions where available. * If the installation instructions already take care of installing the latest version, there's no need to warn the user about the minimum required version. * Assume the user is familiar with Homebrew or Chocolatey, and defer installation instructions to the package manager's website. The installation and explanation of what a package manager is is out of scope within this document. * Link to Node.js package manager instructions and let savvy Linux users use the pack Closes https://github.com/facebook/react-native/pull/8010 Differential Revision: D3407029 Pulled By: JoelMarcey fbshipit-source-id: c8b25d5b176c40eb58e5d7d3c6f13d43cde65166
4.6 KiB
| id | title | layout | category | permalink | next |
|---|---|---|---|---|---|
| debugging | Debugging | docs | Guides | docs/debugging.html | testing |
In-app Errors and Warnings
Errors and warnings are displayed inside your app in development builds.
Errors
In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. You can use console.error() to manually trigger one.
Warnings
Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.
As with a RedBox, you can use console.warn() to trigger a YellowBox.
YellowBoxes can be disabled during development by using console.disableYellowBox = true;. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored: console.ignoredYellowBox = ['Warning: ...'];
RedBoxes and YellowBoxes are automatically disabled in release (production) builds.
Accessing the In-App Developer Menu
You can access the developer menu by shaking your device. You can also use the Command⌘ + D keyboard shortcut when your app is running in the iPhone Simulator, or Command⌘ + M when running in an Android emulator.
The Developer Menu is disabled in release (production) builds.
Reloading JavaScript
Selecting Reload from the Developer Menu will reload the JavaScript that powers your application. You can also press Command⌘ + R in the iOS Simulator, or press R twice on Android emulators.
You will need to rebuild your app for changes to take effect in certain situations:
- You have added new resources to your native app's bundle, such as an image in
Images.xcassetson iOS or inres/drawablefolder on Android. - You have modified native code (Objective-C/Swift on iOS or Java/C++ on Android).
Automatic reloading
You may enable Live Reload to automatically trigger a reload whenever your JavaScript code changes.
Live Reload is available on iOS via the Developer Menu. On Android, select "Dev Settings" from the Developer Menu and enable "Auto reload on JS change".
Accessing logs
To view detailed logs on iOS, open your app in Xcode, then Build and Run your app on a device or the iPhone Simulator. The console should appear automatically after the app launches.
Run adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to display the logs for an Android app running on a device or an emulator.
Chrome Developer Tools
To debug the JavaScript code in Chrome, select Debug JS Remotely from the Developer Menu. This will open a new tab at http://localhost:8081/debugger-ui.
In Chrome, press Command⌘ + Option⌥ + I or select View → Developer → Developer Tools to toggle the developer tools console. Enable Pause On Caught Exceptions for a better debugging experience.
Debugging on a device with Chrome Developer Tools
On iOS devices, open the file RCTWebSocketExecutor.m and change localhost to the IP address of your computer, then select Debug JS Remotely from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
adb reverse tcp:8081 tcp:8081
Alternatively, select Dev Settings from the Developer Menu, then update the Debug server host for device setting to match the IP address of your computer.
Debugging using a custom JavaScript debugger
To use a custom JavaScript debugger in place of Chrome Developer Tools, set the REACT_DEBUGGER environment variable to a command that will start your custom debugger. You can then select Debug JS Remotely from the Developer Menu to start debugging.
The debugger will receive a list of all project roots, separated by a space. For example, if you set
REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative", then the commandnode /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/appwill be used to start your debugger. Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.
FPS (Frames per Second) Monitor
You can enable a FPS graph overlay in the Developer Menu in order to help you debug performance problems.