React Developer Tools – ReactSupport Ukraine 🇺🇦🇺🇦 Help Provide Humanitarian Aid to Ukraine.ReactSearch⌘CtrlKLearnReferenceCommunityBlogGET STARTEDQuick StartTutorial: Tic-Tac-ToeThinking in ReactInstallationStart a New React ProjectAdd React to an Existing ProjectEditor SetupReact Developer ToolsLEARN REACTDescribing the UIYour First ComponentImporting and Exporting ComponentsWriting Markup with JSXJavaScript in JSX with Curly BracesPassing Props to a ComponentConditional RenderingRendering ListsKeeping Components PureAdding InteractivityResponding to EventsState: A Component's MemoryRender and CommitState as a SnapshotQueueing a Series of State UpdatesUpdating Objects in StateUpdating Arrays in StateManaging StateReacting to Input with StateChoosing the State StructureSharing State Between ComponentsPreserving and Resetting StateExtracting State Logic into a ReducerPassing Data Deeply with ContextScaling Up with Reducer and ContextEscape HatchesReferencing Values with RefsManipulating the DOM with RefsSynchronizing with EffectsYou Might Not Need an EffectLifecycle of Reactive EffectsSeparating Events from EffectsRemoving Effect DependenciesReusing Logic with Custom HooksIs this page useful?Learn ReactInstallationReact Developer ToolsUse React Developer Tools to inspect React components, edit props and state, and identify performance problems.
You will learn
How to install React Developer Tools
Browser extension
The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers:
Install for Chrome
Install for Firefox
Install for Edge
Now, if you visit a website built with React, you will see the Components and Profiler panels.
Safari and other browsers
For other browsers (for example, Safari), install the react-devtools npm package:
# Yarnyarn global add react-devtools# Npmnpm install -g react-devtools
Next open the developer tools from the terminal:
react-devtools
Then connect your website by adding the following <script> tag to the beginning of your website’s <head>:
<html> <head> <script src="http://localhost:8097"></script>
Reload your website in the browser now to view it in developer tools.
Mobile (React Native)
React Developer Tools can be used to inspect apps built with React Native as well.
The easiest way to use React Developer Tools is to install it globally:
# Yarnyarn global add react-devtools# Npmnpm install -g react-devtools
Next open the developer tools from the terminal.
react-devtools
It should connect to any local React Native app that’s running.
Try reloading the app if developer tools doesn’t connect after a few seconds.
Learn more about debugging React Native.PreviousEditor SetupHow do you like these docs?Take our survey!©2023Learn ReactQuick StartInstallationDescribing the UIAdding InteractivityManaging StateEscape HatchesAPI ReferenceReact APIsReact DOM APIsCommunityCode of ConductMeet the TeamDocs ContributorsAcknowledgementsMoreBlogReact NativePrivacyTermsOn this pageOverviewBrowser extension Safari and other browsers Mobile (React Native)