mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
45 lines
42 KiB
HTML
45 lines
42 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="generator" content="Docusaurus v2.0.0-alpha.66">
|
|
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="React Native Blog RSS Feed">
|
|
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="React Native Blog Atom Feed">
|
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
|
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script>
|
|
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
|
<link rel="preconnect" href="https://www.googletagmanager.com">
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41298772-2"></script>
|
|
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-41298772-2",{})</script>
|
|
<link rel="search" type="application/opensearchdescription+xml" title="React Native" href="/opensearch.xml">
|
|
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js" defer="defer"></script>
|
|
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Debugging · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="0.60"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-0.60"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" property="og:title" content="Debugging · React Native"><meta data-react-helmet="true" name="description" content="Enabling Keyboard Shortcuts"><meta data-react-helmet="true" property="og:description" content="Enabling Keyboard Shortcuts"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/0.60/debugging"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link data-react-helmet="true" rel="canonical" href="https://reactnative.dev/docs/0.60/debugging"><link rel="stylesheet" href="/styles.fccefeba.css">
|
|
<link rel="stylesheet" href="/main.ca40cabd.css">
|
|
<link rel="preload" href="/styles.07d522c6.js" as="script">
|
|
<link rel="preload" href="/runtime~main.373c7abc.js" as="script">
|
|
<link rel="preload" href="/main.5a3c9855.js" as="script">
|
|
<link rel="preload" href="/1.ba9ce8bd.js" as="script">
|
|
<link rel="preload" href="/2.58cb5d3d.js" as="script">
|
|
<link rel="preload" href="/1f391b9e.a824c215.js" as="script">
|
|
<link rel="preload" href="/943.8b024446.js" as="script">
|
|
<link rel="preload" href="/ae345423.971fbe80.js" as="script">
|
|
<link rel="preload" href="/17896441.0c201679.js" as="script">
|
|
<link rel="preload" href="/ae33aba6.4f071eaf.js" as="script">
|
|
</head>
|
|
<body>
|
|
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
|
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/0.60/getting-started">0.60</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/debugging">Next</a></li><li><a class="dropdown__link" href="/docs/debugging">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/debugging">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/debugging">0.61</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/0.60/debugging">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link navbar__link--active" href="/docs/0.60/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/0.60/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/0.60/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link navbar__link--active" href="/docs/0.60/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/debugging">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/debugging">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/debugging">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/debugging">0.61</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/0.60/debugging">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2UBv"><div class="docSidebarContainer_1hqR" role="complementary"><div class="sidebar_MSwm"><div class="menu menu--responsive menu_2hiu"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_37TU" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">The Basics</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/tutorial">Learn the Basics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/style">Style</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/height-and-width">Height and Width</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/flexbox">Layout with Flexbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/handling-text-input">Handling Text Input</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/handling-touches">Handling Touches</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/using-a-scrollview">Using a ScrollView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/using-a-listview">Using List Views</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/network">Networking</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/more-resources">More Resources</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guides</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/platform-specific-code">Platform Specific Code</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/navigation">Navigating Between Screens</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/images">Images</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/animations">Animations</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/accessibility">Accessibility</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/improvingux">Improving User Experience</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/optimizing-flatlist-configuration">Optimizing Flatlist Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/timers">Timers</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/0.60/debugging">Debugging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/performance">Performance</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/gesture-responder-system">Gesture Responder System</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/javascript-environment">JavaScript Environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/typescript">Using TypeScript with React Native</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/direct-manipulation">Direct Manipulation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/colors">Color Reference</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/building-for-tv">Building For TV Devices</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/running-on-device">Running On Device</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/upgrading">Upgrading to new React Native versions</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/troubleshooting">Troubleshooting</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/native-modules-setup">Native Modules Setup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.60/out-of-tree-platforms">Out-of-Tree Platforms</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (iOS)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/native-modules-ios">Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/native-components-ios">Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/linking-libraries-ios">Linking Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/running-on-simulator-ios">Running On Simulator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/communication-ios">Communication between native and React Native</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/app-extensions">App Extensions</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (Android)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/native-modules-android">Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/native-components-android">Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/headless-js-android">Headless JS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/signed-apk-android">Publishing to Google Play Store</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/removing-default-permissions">Removing Default Permissions</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.60/hermes">Using Hermes</a></li></ul></li></ul></div></div></div><main class="docMainContainer_1rYT"><div class="container padding-vert--lg docItemWrapper_1Hme"><div class="row"><div class="col docItemCol_2AGf"><div class="alert alert--warning margin-bottom--md" role="alert"><div>This is documentation for React Native <strong>0.60</strong>, which is no longer actively maintained.</div><div class="margin-top--md">For up-to-date documentation, see the <strong><a href="/docs/debugging">latest version</a></strong> (0.63).</div></div><div class="docItemContainer_1tAC"><article><div><span class="badge badge--secondary">Version: 0.60</span></div><header><h1 class="docTitle_cWlf">Debugging</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="enabling-keyboard-shortcuts"></a>Enabling Keyboard Shortcuts<a aria-hidden="true" tabindex="-1" class="hash-link" href="#enabling-keyboard-shortcuts" title="Direct link to heading">#</a></h2><p>React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="accessing-the-in-app-developer-menu"></a>Accessing the In-App Developer Menu<a aria-hidden="true" tabindex="-1" class="hash-link" href="#accessing-the-in-app-developer-menu" title="Direct link to heading">#</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>⌘D</code> keyboard shortcut when your app is running in the iOS Simulator, or <code>⌘M</code> when running in an Android emulator on Mac OS and <code>Ctrl+M</code> on Windows and Linux. Alternatively for Android, you can run the command <code>adb shell input keyevent 82</code> to open the dev menu (82 being the Menu key code).</p><p><img src="/assets/images/DeveloperMenu-f22b01f374248b3242dfb3a1017f98a8.png"></p><blockquote><p>The Developer Menu is disabled in release (production) builds.</p></blockquote><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="reloading-javascript"></a>Reloading JavaScript<a aria-hidden="true" tabindex="-1" class="hash-link" href="#reloading-javascript" title="Direct link to heading">#</a></h2><p>Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press <code>⌘R</code> in the iOS Simulator, or tap <code>R</code> twice on Android emulators.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="automatic-reloading"></a>Automatic reloading<a aria-hidden="true" tabindex="-1" class="hash-link" href="#automatic-reloading" title="Direct link to heading">#</a></h3><p>You can speed up your development times by having your app reload automatically any time your code changes. Automatic reloading can be enabled by selecting "Enable Live Reload" from the Developer Menu.</p><p>You may even go a step further and keep your app running as new versions of your files are injected into the JavaScript bundle automatically by enabling <a href="/blog/2016/03/24/introducing-hot-reloading">Hot Reloading</a> from the Developer Menu. This will allow you to persist the app's state through reloads.</p><blockquote><p>There are some instances where hot reloading cannot be implemented perfectly. If you run into any issues, use a full reload to reset your app.</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 the <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><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="in-app-errors-and-warnings"></a>In-app Errors and Warnings<a aria-hidden="true" tabindex="-1" class="hash-link" href="#in-app-errors-and-warnings" title="Direct link to heading">#</a></h2><p>Errors and warnings are displayed inside your app in development builds.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="errors"></a>Errors<a aria-hidden="true" tabindex="-1" class="hash-link" href="#errors" title="Direct link to heading">#</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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="warnings"></a>Warnings<a aria-hidden="true" tabindex="-1" class="hash-link" href="#warnings" title="Direct link to heading">#</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:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> YellowBox </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react-native'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">YellowBox</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">ignoreWarnings</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">[</span><span class="token string" style="color:#8dc891">'Warning: ...'</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>In CI/Xcode, YellowBoxes can also be disabled by setting the <code>IS_TESTING</code> environment variable.</p><blockquote><p>RedBoxes and YellowBoxes are automatically disabled in release (production) builds.</p></blockquote><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="chrome-developer-tools"></a>Chrome Developer Tools<a aria-hidden="true" tabindex="-1" class="hash-link" href="#chrome-developer-tools" title="Direct link to heading">#</a></h2><p>To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at <a href="http://localhost:8081/debugger-ui" target="_blank" rel="noopener noreferrer">http://localhost:8081/debugger-ui</a>.</p><p>Select <code>Tools → Developer Tools</code> from the Chrome Menu to open the <a href="https://developer.chrome.com/devtools" target="_blank" rel="noopener noreferrer">Developer Tools</a>. You may also access the DevTools using keyboard shortcuts (<code>⌘⌥I</code> on macOS, <code>Ctrl</code> <code>Shift</code> <code>I</code> on Windows). You may also want to 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" rel="noopener noreferrer">Pause On Caught Exceptions</a> for a better debugging experience.</p><blockquote><p>Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read <a href="/docs/0.60/debugging#react-developer-tools">this section</a> to learn how.</p></blockquote><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="debugging-using-a-custom-javascript-debugger"></a>Debugging using a custom JavaScript debugger<a aria-hidden="true" tabindex="-1" class="hash-link" href="#debugging-using-a-custom-javascript-debugger" title="Direct link to heading">#</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 "Debug JS Remotely" from the Developer Menu to start debugging.</p><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.</p><blockquote><p>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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="safari-developer-tools"></a>Safari Developer Tools<a aria-hidden="true" tabindex="-1" class="hash-link" href="#safari-developer-tools" title="Direct link to heading">#</a></h2><p>You can use Safari to debug the iOS version of your app without having to enable "Debug JS Remotely".</p><ul><li>Enable Develop menu in Safari: <code>Preferences → Advanced → Select "Show Develop menu in menu bar"</code></li><li>Select your app's JSContext: <code>Develop → Simulator → JSContext</code></li><li>Safari's Web Inspector should open which has a Console and a Debugger</li></ul><p>However, there are some disadvantages:</p><ol><li>No sourcemaps when debugging</li><li>Every time the app is reloaded (using live reload, or by manually reloading), a new JSContext is created. Choosing "Automatically Show Web Inspectors for JSContexts" saves you from having to select the latest JSContext manually.</li></ol><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="react-developer-tools"></a>React Developer Tools<a aria-hidden="true" tabindex="-1" class="hash-link" href="#react-developer-tools" title="Direct link to heading">#</a></h2><p>You can use <a href="https://github.com/facebook/react/tree/master/packages/react-devtools" target="_blank" rel="noopener noreferrer">the standalone version of React Developer Tools</a> to debug the React component hierarchy. To use it, install the <code>react-devtools</code> package globally:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">npm install </span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">g react</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">devtools</span></div></div></div></div></div><p>Now run <code>react-devtools</code> from the terminal to launch the standalone DevTools app:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">react</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">devtools</span></div></div></div></div></div><p><img alt="React DevTools" src="/assets/images/ReactDevTools-46f5369dca7c5f17b9e2390e76968d56.png"></p><p>It should connect to your simulator within a few seconds.</p><blockquote><p>Note: if you prefer to avoid global installations, you can add <code>react-devtools</code> as a project dependency. Add the <code>react-devtools</code> package to your project using <code>npm install --save-dev react-devtools</code>, then add <code>"react-devtools": "react-devtools"</code> to the <code>scripts</code> section in your <code>package.json</code>, and then run <code>npm run react-devtools</code> from your project folder to open the DevTools.</p></blockquote><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="integration-with-react-native-inspector"></a>Integration with React Native Inspector<a aria-hidden="true" tabindex="-1" class="hash-link" href="#integration-with-react-native-inspector" title="Direct link to heading">#</a></h3><p>Open the in-app developer menu and choose "Toggle Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:</p><p><img alt="React Native Inspector" src="/assets/images/Inspector-4bd1342086bcd964bbd7f82e453743a7.gif"></p><p>However, when <code>react-devtools</code> is running, Inspector will enter a collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:</p><p><img alt="React DevTools Inspector Integration" src="/assets/images/ReactDevToolsInspector-fb13d6cdad3479437715a25e038cf6f6.gif"></p><p>You can choose "Toggle Inspector" in the same menu to exit this mode.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="inspecting-component-instances"></a>Inspecting Component Instances<a aria-hidden="true" tabindex="-1" class="hash-link" href="#inspecting-component-instances" title="Direct link to heading">#</a></h3><p>When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.</p><p>First, follow the instructions for debugging in Chrome to open the Chrome console.</p><p>Make sure that the dropdown in the top left corner of the Chrome console says <code>debuggerWorker.js</code>. <strong>This step is essential.</strong></p><p>Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as <code>$r</code> in the Chrome console, letting you inspect its props, state, and instance properties.</p><p><img alt="React DevTools Chrome Console Integration" src="/assets/images/ReactDevToolsDollarR-1d3a289a44523b92e252a3c65fb82a83.gif"></p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="performance-monitor"></a>Performance Monitor<a aria-hidden="true" tabindex="-1" class="hash-link" href="#performance-monitor" title="Direct link to heading">#</a></h2><p>You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.</p><hr style="margin-top:25px;margin-bottom:25px"><h1><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="native-debugging"></a>Native Debugging<a aria-hidden="true" tabindex="-1" class="hash-link" href="#native-debugging" title="Direct link to heading">#</a></h1><div class="banner-native-code-required" style="margin-top:25px"><h3>Projects with Native Code Only</h3><p>The following section only applies to projects with native code exposed. If you are using the managed `expo-cli` workflow, see the guide on <a href="https://docs.expo.io/versions/latest/workflow/customizing/" target="_blank" rel="noopener noreferrer">ejecting</a> to use this API.</p></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="accessing-console-logs"></a>Accessing console logs<a aria-hidden="true" tabindex="-1" class="hash-link" href="#accessing-console-logs" title="Direct link to heading">#</a></h2><p>You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">$ react</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">native log</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">ios</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">$ react</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">native log</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">android</span></div></div></div></div></div><p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p><blockquote><p>If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the bundler.</p></blockquote><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="debugging-on-a-device-with-chrome-developer-tools"></a>Debugging on a device with Chrome Developer Tools<a aria-hidden="true" tabindex="-1" class="hash-link" href="#debugging-on-a-device-with-chrome-developer-tools" title="Direct link to heading">#</a></h2><blockquote><p>If you're using Create React Native App or Expo CLI, this is configured for you already.</p></blockquote><p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m" target="_blank" rel="noopener noreferrer"><code>RCTWebSocketExecutor.m</code></a> and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" 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" rel="noopener noreferrer"><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 "Dev Settings" from the Developer Menu, then update the "Debug server host for device" 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><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="debugging-native-code"></a>Debugging native code<a aria-hidden="true" tabindex="-1" class="hash-link" href="#debugging-native-code" title="Direct link to heading">#</a></h2><p>When working with native code, such as when writing native modules, you can launch the app from Android Studio or Xcode and take advantage of the native debugging features (setting up breakpoints, etc.) as you would in case of building a standard native app.</p></div></article><div class="docMetadata margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/facebook/react-native-website/blob/master/website/versioned_docs/version-0.60/debugging.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col text--right"><em><small class="docMetadata-updated">Last updated on <time datetime="2020-10-29T04:19:29.000Z" class="docLastUpdatedAt_1gIo">10/29/2020</time></small></em></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/0.60/timers"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Timers</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/0.60/performance"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Performance »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3iuQ"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#enabling-keyboard-shortcuts" class="table-of-contents__link">Enabling Keyboard Shortcuts</a></li><li><a href="#accessing-the-in-app-developer-menu" class="table-of-contents__link">Accessing the In-App Developer Menu</a></li><li><a href="#reloading-javascript" class="table-of-contents__link">Reloading JavaScript</a><ul><li><a href="#automatic-reloading" class="table-of-contents__link">Automatic reloading</a></li></ul></li><li><a href="#in-app-errors-and-warnings" class="table-of-contents__link">In-app Errors and Warnings</a><ul><li><a href="#errors" class="table-of-contents__link">Errors</a></li><li><a href="#warnings" class="table-of-contents__link">Warnings</a></li></ul></li><li><a href="#chrome-developer-tools" class="table-of-contents__link">Chrome Developer Tools</a><ul><li><a href="#debugging-using-a-custom-javascript-debugger" class="table-of-contents__link">Debugging using a custom JavaScript debugger</a></li></ul></li><li><a href="#safari-developer-tools" class="table-of-contents__link">Safari Developer Tools</a></li><li><a href="#react-developer-tools" class="table-of-contents__link">React Developer Tools</a><ul><li><a href="#integration-with-react-native-inspector" class="table-of-contents__link">Integration with React Native Inspector</a></li><li><a href="#inspecting-component-instances" class="table-of-contents__link">Inspecting Component Instances</a></li></ul></li><li><a href="#performance-monitor" class="table-of-contents__link">Performance Monitor</a></li><li><a href="#accessing-console-logs" class="table-of-contents__link">Accessing console logs</a></li><li><a href="#debugging-on-a-device-with-chrome-developer-tools" class="table-of-contents__link">Debugging on a device with Chrome Developer Tools</a></li><li><a href="#debugging-native-code" class="table-of-contents__link">Debugging native code</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who's using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">DEV Community</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Find us</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://twitter.com/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms of Service</a></li></ul></div></div><div class="text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_19Ac"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div>Copyright © 2020 Facebook, Inc.</div></div></div></footer></div>
|
|
<script src="/styles.07d522c6.js"></script>
|
|
<script src="/runtime~main.373c7abc.js"></script>
|
|
<script src="/main.5a3c9855.js"></script>
|
|
<script src="/1.ba9ce8bd.js"></script>
|
|
<script src="/2.58cb5d3d.js"></script>
|
|
<script src="/1f391b9e.a824c215.js"></script>
|
|
<script src="/943.8b024446.js"></script>
|
|
<script src="/ae345423.971fbe80.js"></script>
|
|
<script src="/17896441.0c201679.js"></script>
|
|
<script src="/ae33aba6.4f071eaf.js"></script>
|
|
</body>
|
|
</html> |