mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website
Deploy website version based on 6c874f6007a2ba55b87c7e0da2bc9429bc0dda69
This commit is contained in:
Website Deployment Script
+22
-14
@@ -78,21 +78,29 @@
|
||||
<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/next/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 class="anchor" aria-hidden="true" id="enabling-keyboard-shortcuts"></a><a href="#enabling-keyboard-shortcuts" 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>Enabling Keyboard Shortcuts</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 class="anchor" aria-hidden="true" id="in-app-errors-and-warnings"></a><a href="#in-app-errors-and-warnings" 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>In-app Errors and Warnings</h2>
|
||||
<p>Errors and warnings are displayed inside your app in development builds.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="errors"></a><a href="#errors" 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>Errors</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 class="anchor" aria-hidden="true" id="warnings"></a><a href="#warnings" 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>Warnings</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>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> YellowBox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
YellowBox<span class="token punctuation">.</span><span class="token function">ignoreWarnings</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'Warning: ...'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>In CI/Xcode, YellowBoxes can also be disabled by setting the <code>IS_TESTING</code> environment variable.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="logbox"></a><a href="#logbox" 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>LogBox</h2>
|
||||
<p>Errors and warnings in development builds are displayed in LogBox inside your app.</p>
|
||||
<blockquote>
|
||||
<p>RedBoxes and YellowBoxes are automatically disabled in release (production) builds.</p>
|
||||
<p>LogBox is automatically disabled in release (production) builds.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="console-errors-and-warnings"></a><a href="#console-errors-and-warnings" 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>Console Errors and Warnings</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>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> LogBox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// Ignore log notification by message:</span>
|
||||
LogBox<span class="token punctuation">.</span><span class="token function">ignoreLogs</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'Warning: ...'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// Ignore all log notifications:</span>
|
||||
LogBox<span class="token punctuation">.</span><span class="token function">ignoreAllLogs</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="unhandled-errors"></a><a href="#unhandled-errors" 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>Unhandled Errors</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 class="anchor" aria-hidden="true" id="syntax-erorrs"></a><a href="#syntax-erorrs" 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>Syntax Erorrs</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 class="anchor" aria-hidden="true" id="chrome-developer-tools"></a><a href="#chrome-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>Chrome Developer Tools</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">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">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">Pause On Caught Exceptions</a> for a better debugging experience.</p>
|
||||
@@ -177,7 +185,7 @@ $ npx react-native log-android
|
||||
</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/next/fast-refresh"><span class="arrow-prev">← </span><span>Fast Refresh</span></a><a class="docs-next button" href="/docs/next/testing-overview"><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">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://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/next/fast-refresh"><span class="arrow-prev">← </span><span>Fast Refresh</span></a><a class="docs-next button" href="/docs/next/testing-overview"><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="#logbox">LogBox</a><ul class="toc-headings"><li><a href="#console-errors-and-warnings">Console Errors and Warnings</a></li><li><a href="#unhandled-errors">Unhandled Errors</a></li><li><a href="#syntax-erorrs">Syntax Erorrs</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">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://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) {
|
||||
|
||||
@@ -78,21 +78,29 @@
|
||||
<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/next/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 class="anchor" aria-hidden="true" id="enabling-keyboard-shortcuts"></a><a href="#enabling-keyboard-shortcuts" 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>Enabling Keyboard Shortcuts</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 class="anchor" aria-hidden="true" id="in-app-errors-and-warnings"></a><a href="#in-app-errors-and-warnings" 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>In-app Errors and Warnings</h2>
|
||||
<p>Errors and warnings are displayed inside your app in development builds.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="errors"></a><a href="#errors" 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>Errors</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 class="anchor" aria-hidden="true" id="warnings"></a><a href="#warnings" 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>Warnings</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>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> YellowBox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
YellowBox<span class="token punctuation">.</span><span class="token function">ignoreWarnings</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'Warning: ...'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>In CI/Xcode, YellowBoxes can also be disabled by setting the <code>IS_TESTING</code> environment variable.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="logbox"></a><a href="#logbox" 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>LogBox</h2>
|
||||
<p>Errors and warnings in development builds are displayed in LogBox inside your app.</p>
|
||||
<blockquote>
|
||||
<p>RedBoxes and YellowBoxes are automatically disabled in release (production) builds.</p>
|
||||
<p>LogBox is automatically disabled in release (production) builds.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="console-errors-and-warnings"></a><a href="#console-errors-and-warnings" 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>Console Errors and Warnings</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>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> LogBox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// Ignore log notification by message:</span>
|
||||
LogBox<span class="token punctuation">.</span><span class="token function">ignoreLogs</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'Warning: ...'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// Ignore all log notifications:</span>
|
||||
LogBox<span class="token punctuation">.</span><span class="token function">ignoreAllLogs</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="unhandled-errors"></a><a href="#unhandled-errors" 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>Unhandled Errors</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 class="anchor" aria-hidden="true" id="syntax-erorrs"></a><a href="#syntax-erorrs" 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>Syntax Erorrs</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 class="anchor" aria-hidden="true" id="chrome-developer-tools"></a><a href="#chrome-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>Chrome Developer Tools</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">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">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">Pause On Caught Exceptions</a> for a better debugging experience.</p>
|
||||
@@ -177,7 +185,7 @@ $ npx react-native log-android
|
||||
</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/next/fast-refresh"><span class="arrow-prev">← </span><span>Fast Refresh</span></a><a class="docs-next button" href="/docs/next/testing-overview"><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">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://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/next/fast-refresh"><span class="arrow-prev">← </span><span>Fast Refresh</span></a><a class="docs-next button" href="/docs/next/testing-overview"><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="#logbox">LogBox</a><ul class="toc-headings"><li><a href="#console-errors-and-warnings">Console Errors and Warnings</a></li><li><a href="#unhandled-errors">Unhandled Errors</a></li><li><a href="#syntax-erorrs">Syntax Erorrs</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">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://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) {
|
||||
|
||||
Reference in New Issue
Block a user