mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
19 lines
21 KiB
HTML
19 lines
21 KiB
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Debugging – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Debugging – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li></ul></div><div class="nav-docs-section"><h3>Basics</h3><ul><li><a style="margin-left:0;" class="" href="docs/basics-components.html">Components</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-text.html">Text</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-image.html">Image</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-view.html">View</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-integration-with-existing-apps.html">Integration With Existing Apps</a></li></ul></div><div class="nav-docs-section"><h3>Sample Applications</h3><ul><li><a style="margin-left:0;" class="" href="docs/sample-application-movies.html">Movie Fetcher</a></li><li><a target="_blank" style="margin-left:0;" class="" href="http://makeitopen.com/">F8 2016 App</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:0;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:0;" class="active" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-ios.html">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-ios.html">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/linking-libraries-ios.html">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-device-ios.html">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-simulator-ios.html">Running On Simulator</a></li><li><a style="margin-left:0;" class="" href="docs/communication-ios.html">Communication between native and React Native</a></li></ul></div><div class="nav-docs-section"><h3>Guides (Android)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-android.html">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-android.html">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-device-android.html">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/signed-apk-android.html">Generating Signed APK</a></li><li><a style="margin-left:0;" class="" href="docs/android-ui-performance.html">Profiling Android UI Performance</a></li><li><a style="margin-left:0;" class="" href="docs/android-building-from-source.html">Building React Native from source</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="docs/activityindicator.html">ActivityIndicator</a></li><li><a style="margin-left:0;" class="" href="docs/datepickerios.html">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/drawerlayoutandroid.html">DrawerLayoutAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/image.html">Image</a></li><li><a style="margin-left:0;" class="" href="docs/listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/mapview.html">MapView</a></li><li><a style="margin-left:0;" class="" href="docs/modal.html">Modal</a></li><li><a style="margin-left:0;" class="" href="docs/navigator.html">Navigator</a></li><li><a style="margin-left:0;" class="" href="docs/navigatorios.html">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="docs/pickerios.html">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/picker.html">Picker</a></li><li><a style="margin-left:0;" class="" href="docs/progressbarandroid.html">ProgressBarAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/progressviewios.html">ProgressViewIOS</a></li><li><a style="margin-left:0;" class="" href="docs/refreshcontrol.html">RefreshControl</a></li><li><a style="margin-left:0;" class="" href="docs/scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/segmentedcontrolios.html">SegmentedControlIOS</a></li><li><a style="margin-left:0;" class="" href="docs/slider.html">Slider</a></li><li><a style="margin-left:0;" class="" href="docs/sliderios.html">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="docs/statusbar.html">StatusBar</a></li><li><a style="margin-left:0;" class="" href="docs/switch.html">Switch</a></li><li><a style="margin-left:0;" class="" href="docs/tabbarios.html">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="docs/tabbarios-item.html">TabBarIOS.Item</a></li><li><a style="margin-left:0;" class="" href="docs/text.html">Text</a></li><li><a style="margin-left:0;" class="" href="docs/textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/toolbarandroid.html">ToolbarAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/touchablehighlight.html">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="docs/touchablenativefeedback.html">TouchableNativeFeedback</a></li><li><a style="margin-left:0;" class="" href="docs/touchableopacity.html">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="docs/touchablewithoutfeedback.html">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="docs/view.html">View</a></li><li><a style="margin-left:0;" class="" href="docs/viewpagerandroid.html">ViewPagerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/webview.html">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="docs/actionsheetios.html">ActionSheetIOS</a></li><li><a style="margin-left:0;" class="" href="docs/alert.html">Alert</a></li><li><a style="margin-left:0;" class="" href="docs/alertios.html">AlertIOS</a></li><li><a style="margin-left:0;" class="" href="docs/animated.html">Animated</a></li><li><a style="margin-left:0;" class="" href="docs/appregistry.html">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="docs/appstate.html">AppState</a></li><li><a style="margin-left:0;" class="" href="docs/asyncstorage.html">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="docs/backandroid.html">BackAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/cameraroll.html">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="docs/clipboard.html">Clipboard</a></li><li><a style="margin-left:0;" class="" href="docs/datepickerandroid.html">DatePickerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/dimensions.html">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/intentandroid.html">IntentAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/interactionmanager.html">InteractionManager</a></li><li><a style="margin-left:0;" class="" href="docs/layoutanimation.html">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="docs/linking.html">Linking</a></li><li><a style="margin-left:0;" class="" href="docs/nativemethodsmixin.html">NativeMethodsMixin</a></li><li><a style="margin-left:0;" class="" href="docs/netinfo.html">NetInfo</a></li><li><a style="margin-left:0;" class="" href="docs/panresponder.html">PanResponder</a></li><li><a style="margin-left:0;" class="" href="docs/pixelratio.html">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="docs/pushnotificationios.html">PushNotificationIOS</a></li><li><a style="margin-left:0;" class="" href="docs/statusbarios.html">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="docs/stylesheet.html">StyleSheet</a></li><li><a style="margin-left:0;" class="" href="docs/timepickerandroid.html">TimePickerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/toastandroid.html">ToastAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/vibrationios.html">VibrationIOS</a></li><li><a style="margin-left:0;" class="" href="docs/vibration.html">Vibration</a></li></ul></div><div class="nav-docs-section"><h3>Polyfills</h3><ul><li><a style="margin-left:0;" class="" href="docs/flexbox.html">Flexbox</a></li><li><a style="margin-left:0;" class="" href="docs/shadowproptypesios.html">ShadowPropTypesIOS</a></li><li><a style="margin-left:0;" class="" href="docs/geolocation.html">Geolocation</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Network</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</a></li></ul></div></div></div><div class="inner-content"><a id="content"></a><table width="100%"><tbody><tr><td><h1><a class="anchor" name="debugging"></a>Debugging <a class="hash-link" href="docs/debugging.html#debugging">#</a></h1></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/Debugging.md">Edit on GitHub</a></td></tr></tbody></table><div><h2><a class="anchor" name="accessing-the-in-app-developer-menu"></a>Accessing the In-App Developer Menu <a class="hash-link" href="docs/debugging.html#accessing-the-in-app-developer-menu">#</a></h2><p>You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the <code>Command⌘ + D</code> keyboard shortcut when your app is running in the iPhone Simulator, or <code>Command⌘ + M</code> when running in an Android emulator.</p><p><img src="img/DeveloperMenu.png" alt=""></p><blockquote><p>The Developer Menu is disabled in release (production) builds.</p></blockquote><h2><a class="anchor" name="reloading-javascript"></a>Reloading JavaScript <a class="hash-link" href="docs/debugging.html#reloading-javascript">#</a></h2><p>Selecting <code>Reload</code> from the Developer Menu will reload the JavaScript that powers your application. You can also press <code>Command⌘ + R</code> in the iOS Simulator, or press <code>R</code> twice on Android emulators.</p><blockquote><p>If you are using a Dvorak/Colemak layout, use the <code>Command⌘ + P</code> keyboard shortcut to reload the simulator.</p></blockquote><p>You will need to rebuild your app for changes to take effect in certain situations:</p><ul><li>You have added new resources to your native app's bundle, such as an image in <code>Images.xcassets</code> on iOS or in <code>res/drawable</code> folder on Android.</li><li>You have modified native code (Objective-C/Swift on iOS or Java/C++ on Android).</li></ul><blockquote><p>If the <code>Command⌘ + R</code> keyboard shortcut does not seem to reload the iOS Simulator, go to the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.</p></blockquote><h3><a class="anchor" name="automatic-reloading"></a>Automatic reloading <a class="hash-link" href="docs/debugging.html#automatic-reloading">#</a></h3><p>You may enable Live Reload to automatically trigger a reload whenever your JavaScript code changes.</p><p>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".</p><h2><a class="anchor" name="in-app-errors-and-warnings"></a>In-app Errors and Warnings <a class="hash-link" href="docs/debugging.html#in-app-errors-and-warnings">#</a></h2><p>Errors and warnings are displayed inside your app in development builds.</p><h3><a class="anchor" name="errors"></a>Errors <a class="hash-link" href="docs/debugging.html#errors">#</a></h3><p>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 <code>console.error()</code> to manually trigger one.</p><h3><a class="anchor" name="warnings"></a>Warnings <a class="hash-link" href="docs/debugging.html#warnings">#</a></h3><p>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.</p><p>As with a RedBox, you can use <code>console.warn()</code> to trigger a YellowBox.</p><p>YellowBoxes can be disabled during development by using <code>console.disableYellowBox = true;</code>. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored: <code>console.ignoredYellowBox = ['Warning: ...'];</code></p><blockquote><p>RedBoxes and YellowBoxes are automatically disabled in release (production) builds.</p></blockquote><h2><a class="anchor" name="accessing-logs"></a>Accessing logs <a class="hash-link" href="docs/debugging.html#accessing-logs">#</a></h2><p>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. If your app is failing to build, check the Issues Navigator in Xcode.</p><p>Run <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal to display the logs for an Android app running on a device or an emulator.</p><h2><a class="anchor" name="chrome-developer-tools"></a>Chrome Developer Tools <a class="hash-link" href="docs/debugging.html#chrome-developer-tools">#</a></h2><p>To debug the JavaScript code in Chrome, select <code>Debug JS Remotely</code> from the Developer Menu. This will open a new tab at <a href="http://localhost:8081/debugger-ui" target="_blank"><a href="http://localhost:8081/debugger-ui">http://localhost:8081/debugger-ui</a></a>.</p><p>In Chrome, press <code>Command⌘ + Option⌥ + I</code> or select <code>View</code> → <code>Developer</code> → <code>Developer Tools</code> to toggle the developer tools console. Enable <a href="http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511" target="_blank">Pause On Caught Exceptions</a> for a better debugging experience.</p><h3><a class="anchor" name="debugging-on-a-device-with-chrome-developer-tools"></a>Debugging on a device with Chrome Developer Tools <a class="hash-link" href="docs/debugging.html#debugging-on-a-device-with-chrome-developer-tools">#</a></h3><p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m" target="_blank"><code>RCTWebSocketExecutor.m</code></a> and change <code>localhost</code> to the IP address of your computer, then select <code>Debug JS Remotely</code> from the Developer Menu.</p><p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html" target="_blank"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p><p><code>adb reverse tcp:8081 tcp:8081</code></p><p>Alternatively, select <code>Dev Settings</code> from the Developer Menu, then update the <code>Debug server host for device</code> setting to match the IP address of your computer.</p><blockquote><p>If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.</p></blockquote><h3><a class="anchor" name="debugging-using-a-custom-javascript-debugger"></a>Debugging using a custom JavaScript debugger <a class="hash-link" href="docs/debugging.html#debugging-using-a-custom-javascript-debugger">#</a></h3><p>To use a custom JavaScript debugger in place of Chrome Developer Tools, set the <code>REACT_DEBUGGER</code> environment variable to a command that will start your custom debugger. You can then select <code>Debug JS Remotely</code> from the Developer Menu to start debugging.</p><blockquote><p>The debugger will receive a list of all project roots, separated by a space. For example, if you set <code>REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative"</code>, then the command <code>node /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/app</code> will 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.</p></blockquote><h2><a class="anchor" name="fps-frames-per-second-monitor"></a>FPS (Frames per Second) Monitor <a class="hash-link" href="docs/debugging.html#fps-frames-per-second-monitor">#</a></h2><p>You can enable a FPS graph overlay in the Developer Menu in order to help you debug performance problems.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/testing.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||
ga('send', 'pageview');
|
||
|
||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||
|
||
docsearch({
|
||
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
||
indexName: 'react-native-versions',
|
||
inputSelector: '#algolia-doc-search',
|
||
algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 }
|
||
});
|
||
</script><script src="js/scripts.js"></script></body></html> |