Deploy website - based on fafc80e3cef4df06bdf88668fe86dba768afe7e5

docs/debugging.html

@@ -18,8 +18,8 @@
 <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.ca40cabd.css">
 <link rel="preload" href="/styles.07d522c6.js" as="script">
-<link rel="preload" href="/runtime~main.c0800141.js" as="script">
-<link rel="preload" href="/main.5a3c9855.js" as="script">
+<link rel="preload" href="/runtime~main.c8bcc9bc.js" as="script">
+<link rel="preload" href="/main.f9288906.js" as="script">
 <link rel="preload" href="/1.ba9ce8bd.js" as="script">
 <link rel="preload" href="/2.58cb5d3d.js" as="script">
 <link rel="preload" href="/1f391b9e.a824c215.js" as="script">
@@ -32,10 +32,10 @@
 <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__butLine truncated
 </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">&#x27;Warning: ...&#x27;</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 &quot;Debug JS Remotely&quot; 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 &quot;Debug JS Remotely&quot; 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=&quot;node /path/to/launchDebugger.js --port 2345 --type ReactNative&quot;</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&#x27;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 &quot;Debug JS Remotely&quot;.</p><ul><li>Enable Develop menu in Safari: <code>Preferences → Advanced → Select &quot;Show Develop menu in menu bar&quot;</code></li><li>Select your app&#x27;s JSContext: <code>Develop → Simulator → JSContext</code></li><li>SafarLine truncated
+</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 &quot;Debug JS Remotely&quot; 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 &quot;Debug JS Remotely&quot; 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=&quot;node /path/to/launchDebugger.js --port 2345 --type ReactNative&quot;</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&#x27;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 &quot;Debug JS Remotely&quot;.</p><ul><li>Enable Develop menu in Safari: <code>Preferences → Advanced → Select &quot;Show Develop menu in menu bar&quot;</code></li><li>Select your app&#x27;s JSContext: <code>Develop → Simulator → JSContext</code></li><li>SafarLine truncated
 <script src="/styles.07d522c6.js"></script>
-<script src="/runtime~main.c0800141.js"></script>
-<script src="/main.5a3c9855.js"></script>
+<script src="/runtime~main.c8bcc9bc.js"></script>
+<script src="/main.f9288906.js"></script>
 <script src="/1.ba9ce8bd.js"></script>
 <script src="/2.58cb5d3d.js"></script>
 <script src="/1f391b9e.a824c215.js"></script>