This is a simple guide on how to use react developer tools in browser like chrome, firefox or safari to help us, debug and inspect everything from components, props and state to identify potential or current problem on our React application.
React developer tool is available as browser extension. Here’s the link to install based on your browser
Note: I’ll be using chrome for this simple guide
Now, visit your site that uses react under the hood. When opening chrom devtools, now you’ll two new tabs: “Components” and “Profile” with react logo on it
If not available yet, make sure to enable it in your “extensions options” in choosen browser.
Skip this if you’ve succesfully intall the dev tool. For browser that don’t have this extension yet, you can install it as a package with npm or yarn
# Yarn yarn global add react-devtools # Npm npm install -g react-devtools
Then to open the dev tools, run in terminal
Then add this script tag to connect your site with the dev tools (in head)
<html> <head> <script src="http://localhost:8097"></script>
Source: react docs
You’ll what you can explore and do with this tool
In “components” tab you can see all the react components that is currently rendered on this page in a nice tree view. You can also find a specific component in “search form” there.
In the left side: treeview of our component, without the real DOM In the right side: each detail like props, what file and parent components rendering it.
Just by having this, we already can inspect our component easier rather than finding it out on normal inspection.
Now focusing on the right side, let’s see what we can do with these buttons on right corner:
We see on the right corner, there’s some little cute icons like “exclamation mark”, “timer” , “eye”, “bug” and “code logo”. Let’s see what each one do
The exclamation mark, is a way to force the selected component to go into “error state”. This way we can know what happen with our site, when this particular component is in error.
is used to find the “matching” DOM element. It’ll bring us to the related DOM element in inspect tab
To show the logs of this component in console.log
And last but not least the “code < > bracket, will show use the related code component directly in dev tool.
Just like inspection tool from browser,
we can also change the properties like classname related to the component, but not just that, we’re also able to update the state for this component
That’s it for now, we may explore other part of react developer tool on next article.