kitten.sh / rn-llms-txt-gen
this repo has no description
fork atom
rn-llms-txt-gen / .cache / fetch / reactnative.dev / docs_react-native-devtools.html
at main 40 kB view raw
1<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-0.79 docs-doc-page docs-doc-id-react-native-devtools" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>React Native DevTools · React Native</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true property=og:url content=https://reactnative.dev/docs/react-native-devtools><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true property=og:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true name=twitter:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:site content=@reactnative><meta data-rh=true name=docusaurus_version content=0.79><meta data-rh=true name=docusaurus_tag content=docs-default-0.79><meta data-rh=true name=docsearch:version content=0.79><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-0.79><meta data-rh=true property=og:title content="React Native DevTools · React Native"><meta data-rh=true name=description content="React Native DevTools is our modern debugging experience for React Native. Purpose-built from the ground up, it aims to be fundamentally more integrated, correct, and reliable than previous debugging methods."><meta data-rh=true property=og:description content="React Native DevTools is our modern debugging experience for React Native. Purpose-built from the ground up, it aims to be fundamentally more integrated, correct, and reliable than previous debugging methods."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/react-native-devtools><link data-rh=true rel=alternate href=https://reactnative.dev/docs/react-native-devtools hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/react-native-devtools hreflang=x-default><link data-rh=true rel=preconnect href=https://8TDSE0OHGQ-dsn.algolia.net crossorigin=anonymous><link rel=alternate type=application/rss+xml href=/blog/rss.xml title="React Native RSS Feed"><link rel=alternate type=application/atom+xml href=/blog/atom.xml title="React Native Atom Feed"><link rel=alternate type=application/json href=/blog/feed.json title="React Native JSON 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=G-58L13S6BDP"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-58L13S6BDP",{})</script><link rel=search type=application/opensearchdescription+xml title="React Native" href=/opensearch.xml><link rel=icon href=/img/pwa/manifest-icon-512.png><link rel=manifest href=/manifest.json><meta name=theme-color content=#20232a><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=#20232a><link rel=apple-touch-icon href=/img/pwa/manifest-icon-512.png><link rel=mask-icon href=/img/pwa/manifest-icon-512.png color=#06bcee><meta name=msapplication-TileImage href=/img/pwa/manifest-icon-512.png><meta name=msapplication-TileColor content=#20232a><script src=https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js defer></script><script src=https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd8ryO5qrZo8Exadq9qmt1wtm4_2FdZGEAKHDFEt_2BBlwwM4.js defer></script><script src=https://snack.expo.dev/embed.js defer></script><script src=https://platform.twitter.com/widgets.js async></script><link rel=stylesheet href=/assets/css/styles.883cb042.css><script src=/assets/js/runtime~main.8ac1e6f0.js defer></script><script src=/assets/js/main.341783f5.js defer></script><body class=navigation-with-keyboard><svg xmlns=http://www.w3.org/2000/svg style="display: none;"><defs> 2<symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol> 3</defs></svg> 4<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id=__docusaurus><div role=region aria-label="Skip to main content"><a class=skipToContent_oPtH href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><div class="theme-announcement-bar announcementBar_zJRd" style=background-color:#20232a;color:#fff role=banner><div class="content_bSb_ announcementBarContent_t7IR">Join us for React Conf on Oct 7-8. <a target=_blank rel="noopener noreferrer" href=https://conf.react.dev>Learn more</a>.</div></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top navbar--dark"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--light_hHel"><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--dark_yETr"></div><b class="navbar__title text--truncate">React Native</b></a><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/docs/react-native-devtools>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/react-native-devtools>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/react-native-devtools>0.79</a><li><a class=dropdown__link href=/docs/0.78/react-native-devtools>0.78</a><li><a class=dropdown__link href=/docs/0.77/react-native-devtools>0.77</a><li><a class=dropdown__link href=/docs/0.76/react-native-devtools>0.76</a><li><a class=dropdown__link href=/docs/0.75/getting-started>0.75</a><li><a class=dropdown__link href=/docs/0.74/getting-started>0.74</a><li><a class=dropdown__link href=/docs/0.73/getting-started>0.73</a><li><a class=dropdown__link href=/docs/0.72/getting-started>0.72</a><li><a class=dropdown__link href=/docs/0.71/getting-started>0.71</a><li><a class=dropdown__link href=/docs/0.70/getting-started>0.70</a><li><a class=dropdown__link href=/versions>All versions</a></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>Development</a><ul class=dropdown__menu><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/getting-started>Guides</a><li><a class=dropdown__link href=/docs/components-and-apis>Components</a><li><a class=dropdown__link href=/docs/accessibilityinfo>APIs</a><li><a class=dropdown__link href=/architecture/overview>Architecture</a></ul></div><a class="navbar__item navbar__link" href=/contributing/overview>Contributing</a><a class="navbar__item navbar__link" href=/community/overview>Community</a><a class="navbar__item navbar__link" href=/showcase>Showcase</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="toggle_ki11 colorModeToggle_Hewu"><button class="clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m darkNavbarColorModeToggle_m8pZ" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ lightToggleIcon_lgto"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ darkToggleIcon_U96C"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ systemToggleIcon_E5c0"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_bzqh><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><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 /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_MB5r"><div class=docsWrapper__sE8><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_iEvu" type=button></button><div class=docRoot_DfVB><aside class="theme-doc-sidebar-container docSidebarContainer_c7NB"><div class=sidebarViewport_KYo0><div class=sidebar_CUen><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_jmj1 menuWithAnnouncementBar_YufC"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/getting-started>The Basics</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/environment-setup>Environment setup</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/running-on-device>Workflow</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/style>UI & Interaction</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true href=/docs/debugging>Debugging</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/debugging>Debugging Basics</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/react-native-devtools>React Native DevTools</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/debugging-native-code>Debugging Native Code</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/debugging-release-builds>Debugging Release Builds</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/other-debugging-methods>Other Debugging Methods</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/testing-overview>Testing</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/performance>Performance</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/javascript-environment>JavaScript Runtime</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/the-new-architecture/what-is-codegen>Codegen</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/native-platform>Native Development</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/headless-js-android>Android and iOS guides</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/legacy/native-modules-intro>Legacy Architecture</a></div></ul></nav></div></div></aside><main class=docMainContainer_a9sJ><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_Qr34"><div class=docItemContainer_tjFy><article><div class="tocCollapsible_wXna theme-doc-toc-mobile tocMobile_Ojys"><button type=button class="clean-btn tocCollapsibleButton_iI2p">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>React Native DevTools</h1></header><p>React Native DevTools is our modern debugging experience for React Native. Purpose-built from the ground up, it aims to be fundamentally more integrated, correct, and reliable than previous debugging methods.</p> 5<p><img decoding=async loading=lazy alt="React Native DevTools opened to the &amp;quot;Welcome&amp;quot; pane" src=/assets/images/debugging-rndt-welcome-ac9602807bddf2752fc2a73c57028122.jpg width=1600 height=740 class=img_SS3x></p> 6<p>React Native DevTools is designed for debugging React app concerns, and not to replace native tools. If you want to inspect React Native’s underlying platform layers (for example, while developing a Native Module), please use the debugging tools available in Android Studio and Xcode (see <a href=/docs/debugging-native-code>Debugging Native Code</a>).</p> 7<details class="details_IpIu alert alert--info details_jERq" data-collapsed=true><summary><strong>💡 Compatibility</strong> — released in 0.76</summary><div><div class=collapsibleContent_Fd2D><p>React Native DevTools supports all React Native apps running Hermes. It replaces the previous Flipper, Experimental Debugger, and Hermes debugger (Chrome) frontends.<p>It is not possible to set up React Native DevTools with any older versions of React Native.<ul> 8<li><strong>Chrome Browser DevTools — unsupported</strong> 9<ul> 10<li>Connecting to React Native via <code>chrome://inspect</code> is no longer supported. Features may not work correctly, as the latest versions of Chrome DevTools (which are built to match the latest browser capabilities and APIs) have not been tested, and this frontend lacks our customisations. Instead, we ship a supported version with React Native DevTools.</li> 11</ul> 12</li> 13<li><strong>Visual Studio Code — unsupported</strong> (pre-existing)<!-- --> 14<ul> 15<li>Third party extensions such as <a href=https://github.com/expo/vscode-expo target=_blank rel="noopener noreferrer">Expo Tools</a> and <a href=https://ide.swmansion.com/ target=_blank rel="noopener noreferrer">Radon IDE</a> may have improved compatibility, but are not directly supported by the React team.</li> 16</ul> 17</li> 18</ul></div></div></details> 19<details class="details_IpIu alert alert--info details_jERq" data-collapsed=true><summary><strong>💡 Feedback & FAQs</strong></summary><div><div class=collapsibleContent_Fd2D><p>We want the tooling you use to debug React across all platforms to be reliable, familiar, simple, and cohesive. All the features described on this page are built with these principles in mind, and we also want to offer more capabilities in future.<p>We are actively iterating on the future of React Native DevTools, and have created a centralized <a href=https://github.com/react-native-community/discussions-and-proposals/discussions/819 target=_blank rel="noopener noreferrer">GitHub discussion</a> to keep track of issues, frequently asked questions, and feedback.</div></div></details> 20<h2 class="anchor anchorWithStickyNavbar_JmGV" id=core-features>Core features<a href=#core-features class=hash-link aria-label="Direct link to Core features" title="Direct link to Core features">​</a></h2> 21<p>React Native DevTools is based on the Chrome DevTools frontend. If you have a web development background, its features should be familiar. As a starting point, we recommend browsing the <a href=https://developer.chrome.com/docs/devtools target=_blank rel="noopener noreferrer">Chrome DevTools docs</a> which contain full guides as well as video resources.</p> 22<h3 class="anchor anchorWithStickyNavbar_JmGV" id=console>Console<a href=#console class=hash-link aria-label="Direct link to Console" title="Direct link to Console">​</a></h3> 23<p><img decoding=async loading=lazy alt="A series of logs React Native DevTools Sources view, alongside a device" src=/assets/images/debugging-rndt-console-f0a53e3d62458a8ff1b7164fb5e5564c.jpg width=1600 height=576 class=img_SS3x></p> 24<p>The Console panel allows you to view and filter messages, evaluate JavaScript, inspect object properties, and more.</p> 25<p><a href=https://developer.chrome.com/docs/devtools/console/reference target=_blank rel="noopener noreferrer">Console features reference | Chrome DevTools</a></p> 26<h4 class="anchor anchorWithStickyNavbar_JmGV" id=useful-tips>Useful tips<a href=#useful-tips class=hash-link aria-label="Direct link to Useful tips" title="Direct link to Useful tips">​</a></h4> 27<ul> 28<li>If your app has a lot of logs, use the filter box or change the log levels that are shown.</li> 29<li>Watch values over time with <a href=https://developer.chrome.com/docs/devtools/console/live-expressions target=_blank rel="noopener noreferrer">Live Expressions</a>.</li> 30<li>Persist messages across reloads with <a href=https://developer.chrome.com/docs/devtools/console/reference#persist target=_blank rel="noopener noreferrer">Preserve Logs</a>.</li> 31<li>Use <kbd>Ctrl</kbd> + <kbd>L</kbd> to clear the console view.</li> 32</ul> 33<h3 class="anchor anchorWithStickyNavbar_JmGV" id=sources--breakpoints>Sources & breakpoints<a href=#sources--breakpoints class=hash-link aria-label="Direct link to Sources & breakpoints" title="Direct link to Sources & breakpoints">​</a></h3> 34<p><img decoding=async loading=lazy alt="A paused breakpoint in the React Native DevTools Sources view, alongside a device" src=/assets/images/debugging-rndt-sources-paused-with-device-d1d48a3df5a69d3bf92a16845f0f9c12.jpg width=1600 height=894 class=img_SS3x></p> 35<p>The Sources panel allows you to view the source files in your app and register breakpoints. Use a breakpoint to define a line of code where your app should pause — allowing you to inspect the live state of the program and incrementally step through code.</p> 36<p><a href=https://developer.chrome.com/docs/devtools/javascript/breakpoints target=_blank rel="noopener noreferrer">Pause your code with breakpoints | Chrome DevTools</a></p> 37<div class="theme-admonition theme-admonition-tip admonition_WCGJ alert alert--success"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 12 16"><path fill-rule=evenodd d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"/></svg></span>tip</div><div class=admonitionContent_pbrs><h4 class="anchor anchorWithStickyNavbar_JmGV" id=mini-guide>Mini-guide<a href=#mini-guide class=hash-link aria-label="Direct link to Mini-guide" title="Direct link to Mini-guide">​</a></h4><p>Breakpoints are a fundamental tool in your debugging toolkit!<ol> 38<li>Navigate to a source file using the sidebar or <kbd>Cmd ⌘</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>P</kbd>.</li> 39<li>Click in the line number column next to a line of code to add a breakpoint.</li> 40<li>Use the navigation controls at the top right to <a href=https://developer.chrome.com/docs/devtools/javascript/reference#stepping target=_blank rel="noopener noreferrer">step through code</a> when paused.</li> 41</ol></div></div> 42<h4 class="anchor anchorWithStickyNavbar_JmGV" id=useful-tips-1>Useful tips<a href=#useful-tips-1 class=hash-link aria-label="Direct link to Useful tips" title="Direct link to Useful tips">​</a></h4> 43<ul> 44<li>A "Paused in Debugger" overlay will appear when your app is paused. Tap it to resume.</li> 45<li>Pay attention to the right hand side panels when on a breakpoint, which allow you to inspect the current scope and call stack, and set watch expressions.</li> 46<li>Use a <code>debugger;</code> statement to quickly set a breakpoint from your text editor. This will reach the device immediately via Fast Refresh.</li> 47<li>There are multiple kinds of breakpoints! For example, <a href=https://developer.chrome.com/docs/devtools/javascript/breakpoints#overview target=_blank rel="noopener noreferrer">Conditional Breakpoints and Logpoints</a>.</li> 48</ul> 49<h3 class="anchor anchorWithStickyNavbar_JmGV" id=memory>Memory<a href=#memory class=hash-link aria-label="Direct link to Memory" title="Direct link to Memory">​</a></h3> 50<p><img decoding=async loading=lazy alt="Inspecting a heap snapshot in the Memory panel" src=/assets/images/debugging-rndt-memory-3f71040a2e688a5029db8326de0ce8dd.jpg width=1600 height=740 class=img_SS3x></p> 51<p>The Memory panel allows you to take a heap snapshot and view the memory usage of your JavaScript code over time.</p> 52<p><a href=https://developer.chrome.com/docs/devtools/memory-problems/heap-snapshots target=_blank rel="noopener noreferrer">Record heap snapshots | Chrome DevTools</a></p> 53<h4 class="anchor anchorWithStickyNavbar_JmGV" id=useful-tips-2>Useful tips<a href=#useful-tips-2 class=hash-link aria-label="Direct link to Useful tips" title="Direct link to Useful tips">​</a></h4> 54<ul> 55<li>Use <kbd>Cmd ⌘</kbd>+<kbd>F</kbd> / <kbd>Ctrl</kbd>+<kbd>F</kbd> to filter for specific objects in the heap.</li> 56<li>Taking an <a href=https://developer.chrome.com/docs/devtools/memory-problems/allocation-profiler target=_blank rel="noopener noreferrer">allocation timeline report</a> can be useful to see memory usage over time as a graph, to identify possible memory leaks.</li> 57</ul> 58<h2 class="anchor anchorWithStickyNavbar_JmGV" id=react-devtools-features>React DevTools features<a href=#react-devtools-features class=hash-link aria-label="Direct link to React DevTools features" title="Direct link to React DevTools features">​</a></h2> 59<p>In the integrated Components and Profiler panels, you'll find all the features of the <a href=https://react.dev/learn/react-developer-tools target=_blank rel="noopener noreferrer">React DevTools</a> browser extension. These work seamlessly in React Native DevTools.</p> 60<h3 class="anchor anchorWithStickyNavbar_JmGV" id=react-components>React Components<a href=#react-components class=hash-link aria-label="Direct link to React Components" title="Direct link to React Components">​</a></h3> 61<p><img decoding=async loading=lazy alt="Selecting and locating elements using the React Components panel" src=/assets/images/debugging-rndt-react-components-628d33c662dc37b0a7c3c21d840fc63c.gif width=1866 height=1049 class=img_SS3x></p> 62<p>The React Components panel allows you to inspect and update the rendered React component tree.</p> 63<ul> 64<li>Hover or select an element in DevTools to highlight it on device.</li> 65<li>To locate an element in DevTools, click the top-left "Select element" button, then tap any element in the app.</li> 66</ul> 67<h4 class="anchor anchorWithStickyNavbar_JmGV" id=useful-tips-3>Useful tips<a href=#useful-tips-3 class=hash-link aria-label="Direct link to Useful tips" title="Direct link to Useful tips">​</a></h4> 68<ul> 69<li>Props and state on a component can be viewed and modified at runtime using the right hand panel.</li> 70<li>Components optimized with <a href=https://react.dev/learn/react-compiler target=_blank rel="noopener noreferrer">React Compiler</a> will be annotated with a "Memo ✨" badge.</li> 71</ul> 72<div class="theme-admonition theme-admonition-tip admonition_WCGJ alert alert--success"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 12 16"><path fill-rule=evenodd d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"/></svg></span>tip</div><div class=admonitionContent_pbrs><h4 class="anchor anchorWithStickyNavbar_JmGV" id=protip-highlight-re-renders>Protip: Highlight re-renders<a href=#protip-highlight-re-renders class=hash-link aria-label="Direct link to Protip: Highlight re-renders" title="Direct link to Protip: Highlight re-renders">​</a></h4><p>Re-renders can be a significant contributor to performance issues in React apps. DevTools can highlight component re-renders as they happen.<ul> 73<li>To enable, click the View Settings (<code>⚙︎</code>) icon and check "Highlight updates when components render".</li> 74</ul><p><img decoding=async loading=lazy alt="Location of the &amp;quot;highlight updates&amp;quot; setting, next to a recording of the live render overlay" src=/assets/images/debugging-rndt-highlight-renders-bc20258bbc79dba4fe1866c227943e37.gif width=1280 height=564 class=img_SS3x></div></div> 75<h3 class="anchor anchorWithStickyNavbar_JmGV" id=react-profiler>React Profiler<a href=#react-profiler class=hash-link aria-label="Direct link to React Profiler" title="Direct link to React Profiler">​</a></h3> 76<p><img decoding=async loading=lazy alt="A profile rendered as a flame graph" src=/assets/images/debugging-rndt-react-profiler-997ef2d9e169d059ba7d4850ee8ce181.jpg width=1600 height=740 class=img_SS3x></p> 77<p>The React Profiler panel allows you to record performance profiles to understand the timing of component renders and React commits.</p> 78<p>For more info, see the <a href=https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#reading-performance-data target=_blank rel="noopener noreferrer">original 2018 guide</a> (note that parts of this may be outdated).</p> 79<h2 class="anchor anchorWithStickyNavbar_JmGV" id=reconnecting-devtools>Reconnecting DevTools<a href=#reconnecting-devtools class=hash-link aria-label="Direct link to Reconnecting DevTools" title="Direct link to Reconnecting DevTools">​</a></h2> 80<p>Occasionally, DevTools might disconnect from the target device. This can happen if:</p> 81<ul> 82<li>The app is closed.</li> 83<li>The app is rebuilt (a new native build is installed).</li> 84<li>The app has crashed on the native side.</li> 85<li>The dev server (Metro) is quit.</li> 86<li>A physical device is disconnected.</li> 87</ul> 88<p>On disconnect, a dialog will be shown with the message "Debugging connection was closed".</p> 89<p><img decoding=async loading=lazy alt="A reconnect dialog shown when a device is disconnected" src=/assets/images/debugging-reconnect-menu-2eb1659f4b9d58ccb839c6efccfccf7f.jpg width=1600 height=480 class=img_SS3x></p> 90<p>From here, you can either:</p> 91<ul> 92<li><strong>Dismiss</strong>: Select the close (<code>×</code>) icon or click outside the dialog to return to the DevTools UI in the last state before disconnection.</li> 93<li><strong>Reconnect</strong>: Select "Reconnect DevTools", having addressed the reason for disconnection.</li> 94</ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class=editButtons_t0bR><a href=https://github.com/facebook/react-native-website/edit/main/docs/react-native-devtools.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><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"/></g></svg>Edit page for next release</a><a href=https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.79/react-native-devtools.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><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"/></g></svg>Edit page for current release</a></div><div class=lastUpdated_VsjB><span class=theme-last-updated>Last updated<!-- --> on <b><time datetime=2025-04-14T14:14:17.000Z itemprop=dateModified>Apr 14, 2025</time></b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/debugging><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Debugging Basics</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/debugging-native-code><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Debugging Native Code</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#core-features class="table-of-contents__link toc-highlight">Core features</a><ul><li><a href=#console class="table-of-contents__link toc-highlight">Console</a><li><a href=#sources--breakpoints class="table-of-contents__link toc-highlight">Sources & breakpoints</a><li><a href=#memory class="table-of-contents__link toc-highlight">Memory</a></ul><li><a href=#react-devtools-features class="table-of-contents__link toc-highlight">React DevTools features</a><ul><li><a href=#react-components class="table-of-contents__link toc-highlight">React Components</a><li><a href=#react-profiler class="table-of-contents__link toc-highlight">React Profiler</a></ul><li><a href=#reconnecting-devtools class="table-of-contents__link toc-highlight">Reconnecting DevTools</a></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Develop</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Guides</a><li class=footer__item><a class=footer__link-item href=/docs/components-and-apis>Components</a><li class=footer__item><a class=footer__link-item href=/docs/accessibilityinfo>APIs</a><li class=footer__item><a class=footer__link-item href=/architecture/overview>Architecture</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Participate</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/showcase>Showcase</a><li class=footer__item><a class=footer__link-item href=/contributing/overview>Contributing</a><li class=footer__item><a class=footer__link-item href=/community/overview>Community</a><li class=footer__item><a href=https://reactnative.directory/ target=_blank rel="noopener noreferrer" class=footer__link-item>Directory<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://stackoverflow.com/questions/tagged/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>Stack Overflow<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Find us</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/blog>Blog</a><li class=footer__item><a href=https://x.com/reactnative target=_blank rel="noopener noreferrer" class=footer__link-item>X<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://bsky.app/profile/reactnative.dev target=_blank rel="noopener noreferrer" class=footer__link-item>Bluesky<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Explore More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://react.dev/ target=_blank rel="noopener noreferrer" class=footer__link-item>ReactJS<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/privacy/ target=_blank rel="noopener noreferrer" class=footer__link-item>Privacy Policy<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/terms/ target=_blank rel="noopener noreferrer" class=footer__link-item>Terms of Service<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=margin-bottom--sm><a href=https://opensource.fb.com/ rel="noopener noreferrer" class=footerLogoLink_tutC><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--light_hHel"><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--dark_yETr"></a></div><div class=footer__copyright>Copyright © 2025 Meta Platforms, Inc.</div></div></div></footer></div>