Use React Developer Tools to inspect Reactcomponents, editprops andstate, 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:
Now, if you visit a websitebuilt with React, you will see theComponents andProfiler panels.
Safari and other browsers
For other browsers (for example, Safari), install thereact-devtools npm package:
#Yarn
yarnglobaladdreact-devtools
#Npm
npminstall -greact-devtoolsNext open the developer tools from the terminal:
react-devtoolsThen connect your website by adding the following<script> tag to the beginning of your website’s<head>:
<html>
<head>
<scriptsrc="http://localhost:8097"></script>Reload your website in the browser now to view it in developer tools.
Mobile (React Native)
To inspect apps built withReact Native, you can useReact Native DevTools, the built-in debugger that deeply integrates React Developer Tools. All features work identically to the browser extension, including native element highlighting and selection.
Learn more about debugging in React Native.
For versions of React Native earlier than 0.76, please use the standalone build of React DevTools by following theSafari and other browsers guide above.