react-native/website/versioned_docs/0.24/debugging.md

---
id: version-0.24-debugging
title: debugging
original_id: debugging
---
<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="debugging-react-native-apps"></a>Debugging React Native Apps <a class="hash-link" href="docs/debugging.html#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> or <code>F2</code> to simulate hardware menu button click). You can also install <a href="http://getfrappe.com" target="_blank">Frappé</a>, a tool for OS X, which allows you to emulate shaking of devices remotely. You can use <code>⌘ + Shift + R</code> as a shortcut to trigger a <strong>shake</strong> from Frappé.</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>⌘ + &lt;</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="android-logging"></a>Android logging <a class="hash-link" href="docs/debugging.html#android-logging">#</a></h3><p>Run <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal to see your Android app's logs.</p><h3><a class="anchor" name="reload"></a>Reload <a class="hash-link" href="docs/debugging.html#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="yellowbox-redbox"></a>YellowBox/RedBox <a class="hash-link" href="docs/debugging.html#yellowbox-redbox">#</a></h3><p>Using <code>console.warn</code> will display an on-screen log on a yellow background. Click on this warning to show more information about it full screen and/or dismiss the warning.</p><p>You can use <code>console.error</code> to display a full screen error on a red background.</p><p>These boxes only appear when you're running your app in dev mode.</p><h3><a class="anchor" name="chrome-developer-tools"></a>Chrome Developer Tools <a class="hash-link" href="docs/debugging.html#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><h3><a class="anchor" name="live-reload"></a>Live Reload <a class="hash-link" href="docs/debugging.html#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="docs/debugging.html#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="docs/testing.html#content">Next →</a></div>