mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
6 lines
5.1 KiB
Markdown
6 lines
5.1 KiB
Markdown
---
|
|
id: version-0.18-debugging
|
|
title: debugging
|
|
original_id: debugging
|
|
---
|
|
<a id="content"></a><h1>Debugging</h1><div><h2><a class="anchor" name="debugging-react-native-apps"></a>Debugging React Native Apps <a class="hash-link" href="#debugging-react-native-apps">#</a></h2><p>To access the in-app developer menu:</p><ol><li>On iOS shake the device or press <code>control + ⌘ + z</code> in the simulator.</li><li>On Android shake the device or press hardware menu button (available on older devices and in most of the emulators, e.g. in <a href="https://www.genymotion.com" target="_blank">genymotion</a> you can press <code>⌘ + m</code> to simulate hardware menu button click)</li></ol><blockquote><p>Hint</p><p>To disable the developer menu for production builds:</p><ol><li>For iOS open your project in Xcode and select <code>Product</code> → <code>Scheme</code> → <code>Edit Scheme...</code> (or press <code>⌘ + <</code>). Next, select <code>Run</code> from the menu on the left and change the Build Configuration to <code>Release</code>.</li><li>For Android, by default, developer menu will be disabled in release builds done by gradle (e.g with gradle <code>assembleRelease</code> task). Although this behavior can be customized by passing proper value to <code>ReactInstanceManager#setUseDeveloperSupport</code>.</li></ol></blockquote><h3><a class="anchor" name="reload"></a>Reload <a class="hash-link" href="#reload">#</a></h3><p>Selecting <code>Reload</code> (or pressing <code>⌘ + r</code> in the iOS simulator) will reload the JavaScript that powers your application. If you have added new resources (such as an image to <code>Images.xcassets</code> on iOS or to <code>res/drawable</code> 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.</p><h3><a class="anchor" name="chrome-developer-tools"></a>Chrome Developer Tools <a class="hash-link" href="#chrome-developer-tools">#</a></h3><p>To debug the JavaScript code in Chrome, select <code>Debug in Chrome</code> from the developer menu. This will open a new tab at <a href="http://localhost:8081/debugger-ui" target="_blank"></a><a href="http://localhost:8081/debugger-ui">http://localhost:8081/debugger-ui</a>.</p><p>In Chrome, press <code>⌘ + 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><p>To debug on a real device:</p><ol><li>On iOS - open the file <code>RCTWebSocketExecutor.m</code> and change <code>localhost</code> to the IP address of your computer. Shake the device to open the development menu with the option to start debugging.</li><li>On Android, if you're running Android 5.0+ device connected via USB you can use <code>adb</code> command line tool to setup port forwarding from the device to your computer. For that run: <code>adb reverse tcp:8081 tcp:8081</code> (see <a href="http://developer.android.com/tools/help/adb.html" target="_blank">this link</a> for help on <code>adb</code> command). Alternatively, you can <a href="#debugging-react-native-apps" target="">open dev menu</a> on the device and select <code>Dev Settings</code>, then update <code>Debug server host for device</code> setting to the IP address of your computer.</li></ol><h4><a class="anchor" name="react-developer-tools-optional"></a>React Developer Tools (optional) <a class="hash-link" href="#react-developer-tools-optional">#</a></h4><p>Install the <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en" target="_blank">React Developer Tools</a> extension for Google Chrome. This will allow you to navigate the component hierarchy via the <code>React</code> in the developer tools (see <a href="https://github.com/facebook/react-devtools" target="_blank">facebook/react-devtools</a> for more information).</p><h3><a class="anchor" name="live-reload"></a>Live Reload <a class="hash-link" href="#live-reload">#</a></h3><p>This option allows for your JS changes to trigger automatic reload on the connected device/emulator. To enable this option:</p><ol><li>On iOS, select <code>Enable Live Reload</code> via the developer menu to have the application automatically reload when changes are made to the JavaScript.</li><li>On Android, <a href="#debugging-react-native-apps" target="">launch dev menu</a>, go to <code>Dev Settings</code> and select <code>Auto reload on JS change</code> option</li></ol><h3><a class="anchor" name="fps-frames-per-second-monitor"></a>FPS (Frames per Second) Monitor <a class="hash-link" href="#fps-frames-per-second-monitor">#</a></h3><p>On <code>0.5.0-rc</code> and higher versions, you can enable a FPS graph overlay in the developers menu in order to help you debug performance problems.</p></div><div class="docs-prevnext"><a class="docs-next" href="testing.html#content">Next →</a></div> |