mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
47 lines
45 KiB
HTML
47 lines
45 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.0.2/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.63"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-0.63"><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="Accessing the In-App Developer Menu"><meta data-react-helmet="true" property="og:description" content="Accessing the In-App Developer Menu"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/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/debugging"><link rel="stylesheet" href="/styles.fccefeba.css">
|
|
<link rel="stylesheet" href="/main.102c4ce0.css">
|
|
<link rel="preload" href="/styles.73cf9778.js" as="script">
|
|
<link rel="preload" href="/runtime~main.a2b565db.js" as="script">
|
|
<link rel="preload" href="/main.a36c1aba.js" as="script">
|
|
<link rel="preload" href="/1.17a0cf36.js" as="script">
|
|
<link rel="preload" href="/2.37a050b1.js" as="script">
|
|
<link rel="preload" href="/1f391b9e.c148b120.js" as="script">
|
|
<link rel="preload" href="/939.41ec4d67.js" as="script">
|
|
<link rel="preload" href="/ee5b3385.90d27433.js" as="script">
|
|
<link rel="preload" href="/17896441.7d7633c0.js" as="script">
|
|
<link rel="preload" href="/5d22711b.74dd278d.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/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/debugging">Next</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" 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 class="dropdown__link" 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/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/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/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/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 aria-current="page" class="menu__link menu__link--active" 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 class="menu__link" 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/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/intro-react-native-components">Core Components and Native Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/intro-react">React Fundamentals</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/handling-text-input">Handling Text Input</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/using-a-scrollview">Using a ScrollView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/using-a-listview">Using List Views</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/troubleshooting">Troubleshooting</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/platform-specific-code">Platform Specific Code</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/more-resources">More Resources</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Environment setup</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/environment-setup">Setting up the development environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/building-for-tv">Building For TV Devices</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/out-of-tree-platforms">Out-of-Tree Platforms</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Workflow</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/running-on-device">Running On Device</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/fast-refresh">Fast Refresh</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/debugging">Debugging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/testing-overview">Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/libraries">Using Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/typescript">Using TypeScript</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/upgrading">Upgrading to new React Native versions</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Design</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/style">Style</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/height-and-width">Height and Width</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/flexbox">Layout with Flexbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/images">Images</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/colors">Color Reference</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Interaction</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/handling-touches">Handling Touches</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/navigation">Navigating Between Screens</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/animations">Animations</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/gesture-responder-system">Gesture Responder System</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Inclusion</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/accessibility">Accessibility</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Performance</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/performance">Performance Overview</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/optimizing-flatlist-configuration">Optimizing Flatlist Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/ram-bundles-inline-requires">RAM Bundles and Inline Requires</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/profiling">Profiling</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">JavaScript Runtime</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/javascript-environment">JavaScript Environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/timers">Timers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/hermes">Using Hermes</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Connectivity</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/network">Networking</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/security">Security</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Components and Modules</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-setup">Native Modules Setup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/direct-manipulation">Direct Manipulation</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/native-modules-android">Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-components-android">Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/headless-js-android">Headless JS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/signed-apk-android">Publishing to Google Play Store</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/removing-default-permissions">Removing Default Permissions</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/native-modules-ios">Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-components-ios">Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/linking-libraries-ios">Linking Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/running-on-simulator-ios">Running On Simulator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/communication-ios">Communication between native and React Native</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/app-extensions">App Extensions</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="docItemContainer_1tAC"><article><header><h1 class="docTitle_cWlf">Debugging</h1></header><div class="markdown"><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="enabling-fast-refresh"></a>Enabling Fast Refresh<a aria-hidden="true" tabindex="-1" class="hash-link" href="#enabling-fast-refresh" title="Direct link to heading">#</a></h2><p>Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. While debugging, it can help to have <a href="/docs/fast-refresh">Fast Refresh</a> enabled. Fast Refresh is enabled by default, and you can toggle "Enable Fast Refresh" in the React Native developer menu. When enabled, most of your edits should be visible within a second or two.</p><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="logbox"></a>LogBox<a aria-hidden="true" tabindex="-1" class="hash-link" href="#logbox" title="Direct link to heading">#</a></h2><p>Errors and warnings in development builds are displayed in LogBox inside your app.</p><blockquote><p>LogBox is automatically disabled in release (production) builds.</p></blockquote><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="console-errors-and-warnings"></a>Console Errors and Warnings<a aria-hidden="true" tabindex="-1" class="hash-link" href="#console-errors-and-warnings" title="Direct link to heading">#</a></h3><p>Console errors and warnings are displayed as on-screen notifications with a red or yellow badge, and the number of errors or warning in the console respectively. To view a console error or warnings, tap the notification to view the full screen information about the log and to paginiate through all of the logs in the console.</p><p>These notifications can be hidden using <code>LogBox.ignoreAllLogs()</code>. This is useful when giving product demos, for example. Additionally, notifications can be hidden on a per-log basis via <code>LogBox.ignoreLogs()</code>. This is useful when there's a noisy warning that cannot be fixed, like those in a third-party dependency.</p><blockquote><p>Ignore logs as a last resort and create a task to fix any logs that are ignored.</p></blockquote><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"> LogBox </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" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token comment" style="color:#93a1a1">// Ignore log notification by message:</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">LogBox</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">ignoreLogs</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><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token comment" style="color:#93a1a1">// Ignore all log notifications:</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">LogBox</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">ignoreAllLogs</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><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="unhandled-errors"></a>Unhandled Errors<a aria-hidden="true" tabindex="-1" class="hash-link" href="#unhandled-errors" title="Direct link to heading">#</a></h3><p>Unhanded JavaScript errors such as <code>undefined is not a function</code> will automatically open a full screen LogBox error with the source of the error. These errors are dismissable and minimizable so that you can see the state of your app when these errors occur, but should always be addressed.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="syntax-errors"></a>Syntax Errors<a aria-hidden="true" tabindex="-1" class="hash-link" href="#syntax-errors" title="Direct link to heading">#</a></h3><p>Syntax errors will automatically open a full screen LogBox error with the source of the syntax error. This error is not dismissable because it represents invalid JavaScript execution that must be fixed before continuing with your app. To dismiss these errors, fix the syntax error and either save to automatically dismiss (with Fast Refresh enabled) or cmd+r to reload (with Fast Refresh disabled).</p><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/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>While sourcemaps may not be enabled by default, you can follow <a href="http://blog.nparashuram.com/2019/10/debugging-react-native-ios-apps-with.html" target="_blank" rel="noopener noreferrer">this guide</a> or <a href="https://www.youtube.com/watch?v=GrGqIIz51k4" target="_blank" rel="noopener noreferrer">video</a> to enable them and set break points at the right places in the source code.</p><p>However, 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.</p><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><blockquote><p>Note: Version 4 of <code>react-devtools</code> requires <code>react-native</code> version 0.62 or higher to work properly.</p></blockquote><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"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="debugging-application-state"></a>Debugging Application State<a aria-hidden="true" tabindex="-1" class="hash-link" href="#debugging-application-state" title="Direct link to heading">#</a></h2><p><a href="https://github.com/infinitered/reactotron" target="_blank" rel="noopener noreferrer">Reactotron</a> is an open-source desktop app that allows you to inspect Redux or MobX-State-Tree application state as well as view custom logs, run custom commands such as resetting state, store and restore state snapshots, and other helpful debugging features for React Native apps.</p><p>You can view installation instructions <a href="https://github.com/infinitered/reactotron" target="_blank" rel="noopener noreferrer">in the README</a>. If you're using Expo, here is an article detailing <a href="https://shift.infinite.red/start-using-reactotron-in-your-expo-project-today-in-3-easy-steps-a03d11032a7a" target="_blank" rel="noopener noreferrer">how to install on Expo</a>.</p><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"><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 <code>expo-cli</code> 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-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">$ npx react-native log-ios</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">$ npx react-native log-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.63/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/fast-refresh"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Fast Refresh</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/testing-overview"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Testing »</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="#accessing-the-in-app-developer-menu" class="table-of-contents__link">Accessing the In-App Developer Menu</a></li><li><a href="#enabling-fast-refresh" class="table-of-contents__link">Enabling Fast Refresh</a></li><li><a href="#enabling-keyboard-shortcuts" class="table-of-contents__link">Enabling Keyboard Shortcuts</a></li><li><a href="#logbox" class="table-of-contents__link">LogBox</a><ul><li><a href="#console-errors-and-warnings" class="table-of-contents__link">Console Errors and Warnings</a></li><li><a href="#unhandled-errors" class="table-of-contents__link">Unhandled Errors</a></li><li><a href="#syntax-errors" class="table-of-contents__link">Syntax Errors</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="#debugging-application-state" class="table-of-contents__link">Debugging Application State</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.73cf9778.js"></script>
|
|
<script src="/runtime~main.a2b565db.js"></script>
|
|
<script src="/main.a36c1aba.js"></script>
|
|
<script src="/1.17a0cf36.js"></script>
|
|
<script src="/2.37a050b1.js"></script>
|
|
<script src="/1f391b9e.c148b120.js"></script>
|
|
<script src="/939.41ec4d67.js"></script>
|
|
<script src="/ee5b3385.90d27433.js"></script>
|
|
<script src="/17896441.7d7633c0.js"></script>
|
|
<script src="/5d22711b.74dd278d.js"></script>
|
|
</body>
|
|
</html> |