Deploy website

Deploy website version based on 9806dddd7b13df2f9d7b12bfd8255338640caf88
This commit is contained in:
Website Deployment Script committed 2020-03-25 16:29:32 +00:00
1 parent f9c2ed7022
commit f342b88550
698 files changed
+95276 -10120

No files matched your search

+17 -18
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Debugging · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Accessing the In-App Developer Menu"/><meta name="docsearch:version" content="0.61"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Debugging · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="## Accessing the In-App Developer Menu"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://reactnative.dev/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://reactnative.dev/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Debugging · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Accessing the In-App Developer Menu"/><meta name="docsearch:version" content="0.62"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Debugging · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="## Accessing the In-App Developer Menu"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://reactnative.dev/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://reactnative.dev/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -12,7 +12,7 @@
{"zIndex":100}
)
});
</script><script src="/js/scrollSpy.js"></script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/versions"><h3>0.61</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/docs/activityindicator" target="_self">API</a></li><li class=""><a href="/help" target="_self">Community</a></li><li class=""><a href="/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i>›</i><span>Guides</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">The Basics<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/docs/tutorial">Learn the Basics</a></li><li class="navListItem"><a class="navItem" href="/docs/props">Props</a></li><li class="navListItem"><a class="navItem" href="/docs/state">State</a></li><li class="navListItem"><a class="navItem" href="/docs/style">Style</a></li><li class="navListItem"><a class="navItem" href="/docs/height-and-width">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/docs/flexbox">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/docs/handling-text-input">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/docs/handling-touches">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/docs/using-a-scrollview">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/using-a-listview">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/docs/network">Networking</a></li><li class="navListItem"><a class="navItem" href="/docs/more-resources">More Resources</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/fast-refresh">Fast Refresh</a></li><li class="navListItem"><a class="navItem" href="/docs/components-and-apis">Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/docs/platform-specific-code">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/docs/navigation">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/docs/images">Images</a></li><li class="navListItem"><a class="navItem" href="/docs/animations">Animations</a></li><li class="navListItem"><a class="navItem" href="/docs/accessibility">Accessibility</a></li><li class="navListItem"><a class="navItem" href="/docs/improvingux">Improving User Experience</a></li><li class="navListItem"><a class="navItem" href="/docs/optimizing-flatlist-configuration">Optimizing Flatlist Configuration</a></li><li class="navListItem"><a class="navItem" href="/docs/timers">Timers</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/debugging">Debugging</a></li><li class="navListItem"><a class="navItem" href="/docs/performance">Performance</a></li><li class="navListItem"><a class="navItem" href="/docs/gesture-responder-system">Gesture Responder System</a></li><li class="navListItem"><a class="navItem" href="/docs/javascript-environment">JavaScript Environment</a></li><li class="navListItem"><a class="navItem" href="/docs/typescript">Using TypeScript with React Native</a></li><li class="navListItem"><a class="navItem" href="/doLine truncated
</script><script src="/js/scrollSpy.js"></script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/versions"><h3>0.62</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/docs/activityindicator" target="_self">API</a></li><li class=""><a href="/help" target="_self">Community</a></li><li class=""><a href="/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i>›</i><span>Workflow</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">The Basics<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/getting-started">Introduction</a></li><li class="navListItem"><a class="navItem" href="/docs/intro-react-native-components">Core Components and Native Components</a></li><li class="navListItem"><a class="navItem" href="/docs/intro-react">React Fundamentals</a></li><li class="navListItem"><a class="navItem" href="/docs/handling-text-input">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/docs/using-a-scrollview">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/using-a-listview">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/docs/troubleshooting">Troubleshooting</a></li><li class="navListItem"><a class="navItem" href="/docs/platform-specific-code">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/docs/more-resources">More Resources</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Environment setup<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/environment-setup">Setting up the development environment</a></li><li class="navListItem"><a class="navItem" href="/docs/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="navListItem"><a class="navItem" href="/docs/building-for-apple-tv">Building For TV Devices</a></li><li class="navListItem"><a class="navItem" href="/docs/out-of-tree-platforms">Out-of-Tree Platforms</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Workflow<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/running-on-device">Running On Device</a></li><li class="navListItem"><a class="navItem" href="/docs/fast-refresh">Fast Refresh</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/debugging">Debugging</a></li><li class="navListItem"><a class="navItem" href="/docs/testing">Testing</a></li><li class="navListItem"><a class="navItem" href="/docs/typescript">Using TypeScript with React Native</a></li><li class="navListItem"><a class="navItem" href="/docs/upgrading">Upgrading to new React Native versions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Design<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/style">Style</a></li><li class="navListItem"><a class="navILine truncated
var coll = document.getElementsByClassName('collapsible');
var checkActiveCategory = true;
for (var i = 0; i < coll.length; i++) {
@@ -112,13 +112,13 @@ YellowBox<span class="token punctuation">.</span><span class="token function">ig
<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 &quot;Automatically Show Web Inspectors for JSContexts&quot; saves you from having to select the latest JSContext manually.</li>
</ol>
<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">this guide</a> or <a href="https://www.youtube.com/watch?v=GrGqIIz51k4">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 &quot;Automatically Show Web Inspectors for JSContexts&quot; saves you from having to select the latest JSContext manually.</p>
<h2><a class="anchor" aria-hidden="true" id="react-developer-tools"></a><a href="#react-developer-tools" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Developer Tools</h2>
<p>You can use <a href="https://github.com/facebook/react/tree/master/packages/react-devtools">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>
<pre><code class="hljs">npm <span class="hljs-keyword">install</span> -g react-devtools
</code></pre>
<p>Now run <code>react-devtools</code> from the terminal to launch the standalone DevTools app:</p>
@@ -144,21 +144,20 @@ YellowBox<span class="token punctuation">.</span><span class="token function">ig
<h2><a class="anchor" aria-hidden="true" id="performance-monitor"></a><a href="#performance-monitor" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Performance Monitor</h2>
<p>You can enable a performance overlay to help you debug performance problems by selecting &quot;Perf Monitor&quot; in the Developer Menu.</p>
<hr style="margin-top:25px; margin-bottom:25px;"/>
<h1><a class="anchor" aria-hidden="true" id="debugging-in-ejected-apps"></a><a href="#debugging-in-ejected-apps" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging in Ejected Apps</h1>
<div class="banner-crna-ejected" style="margin-top:25px">
<h2><a class="anchor" aria-hidden="true" id="debugging-application-state"></a><a href="#debugging-application-state" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging Application State</h2>
<p><a href="https://github.com/infinitered/reactotron">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">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">how to install on Expo</a>.</p>
<h1><a class="anchor" aria-hidden="true" id="native-debugging"></a><a href="#native-debugging" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native Debugging</h1>
<div class="banner-native-code-required" style="margin-top:25px">
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
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">ejecting</a> to use this API.
</p>
</div>
<h2><a class="anchor" aria-hidden="true" id="accessing-console-logs"></a><a href="#accessing-console-logs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Accessing console logs</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>
<pre><code class="hljs"><span class="hljs-symbol">$</span> react-native <span class="hljs-built-in">log</span>-ios
<span class="hljs-symbol">$</span> react-native <span class="hljs-built-in">log</span>-android
<pre><code class="hljs css language-sh">$ npx react-native log-ios
$ npx react-native log-android
</code></pre>
<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>
@@ -178,7 +177,7 @@ YellowBox<span class="token punctuation">.</span><span class="token function">ig
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="debugging-native-code"></a><a href="#debugging-native-code" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging native code</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>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/timers"><span class="arrow-prev">← </span><span>Timers</span></a><a class="docs-next button" href="/docs/performance"><span>Performance Overview</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#accessing-the-in-app-developer-menu">Accessing the In-App Developer Menu</a></li><li><a href="#enabling-fast-refresh">Enabling Fast Refresh</a></li><li><a href="#enabling-keyboard-shortcuts">Enabling Keyboard Shortcuts</a></li><li><a href="#in-app-errors-and-warnings">In-app Errors and Warnings</a><ul class="toc-headings"><li><a href="#errors">Errors</a></li><li><a href="#warnings">Warnings</a></li></ul></li><li><a href="#chrome-developer-tools">Chrome Developer Tools</a><ul class="toc-headings"><li><a href="#debugging-using-a-custom-javascript-debugger">Debugging using a custom JavaScript debugger</a></li></ul></li><li><a href="#safari-developer-tools">Safari Developer Tools</a></li><li><a href="#react-developer-tools">React Developer Tools</a><ul class="toc-headings"><li><a href="#integration-with-react-native-inspector">Integration with React Native Inspector</a></li><li><a href="#inspecting-component-instances">Inspecting Component Instances</a></li></ul></li><li><a href="#performance-monitor">Performance Monitor</a></li><li><a href="#accessing-console-logs">Accessing console logs</a></li><li><a href="#debugging-on-a-device-with-chrome-developer-tools">Debugging on a device with Chrome Developer Tools</a></li><li><a href="#debugging-native-code">Debugging native code</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who&#x27;s using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/fast-refresh"><span class="arrow-prev">← </span><span>Fast Refresh</span></a><a class="docs-next button" href="/docs/testing"><span>Testing</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#accessing-the-in-app-developer-menu">Accessing the In-App Developer Menu</a></li><li><a href="#enabling-fast-refresh">Enabling Fast Refresh</a></li><li><a href="#enabling-keyboard-shortcuts">Enabling Keyboard Shortcuts</a></li><li><a href="#in-app-errors-and-warnings">In-app Errors and Warnings</a><ul class="toc-headings"><li><a href="#errors">Errors</a></li><li><a href="#warnings">Warnings</a></li></ul></li><li><a href="#chrome-developer-tools">Chrome Developer Tools</a><ul class="toc-headings"><li><a href="#debugging-using-a-custom-javascript-debugger">Debugging using a custom JavaScript debugger</a></li></ul></li><li><a href="#safari-developer-tools">Safari Developer Tools</a></li><li><a href="#react-developer-tools">React Developer Tools</a><ul class="toc-headings"><li><a href="#integration-with-react-native-inspector">Integration with React Native Inspector</a></li><li><a href="#inspecting-component-instances">Inspecting Component Instances</a></li></ul></li><li><a href="#performance-monitor">Performance Monitor</a></li><li><a href="#debugging-application-state">Debugging Application State</a></li><li><a href="#accessing-console-logs">Accessing console logs</a></li><li><a href="#debugging-on-a-device-with-chrome-developer-tools">Debugging on a device with Chrome Developer Tools</a></li><li><a href="#debugging-native-code">Debugging native code</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who&#x27;s using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
@@ -196,6 +195,6 @@ YellowBox<span class="token punctuation">.</span><span class="token function">ig
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#search_input_react',
algoliaOptions: {"facetFilters":["tags:0.61"],"hitsPerPage":5}
algoliaOptions: {"facetFilters":["tags:0.62"],"hitsPerPage":5}
});
</script></body></html>