Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
With React, we never touch the actual DOM directly. React only manages what gets rendered into the DOM, so it can be tricky to debug your UI in the browser. The React Developer Tools extension gives you a big productivity boost when working with React. It lets you inspect your React component hierarchy in the browser.
React Developer Tools Extension
- React Developer Tools - React docs
- Install for Chrome
- Install for Firefox
- Install for Edge
- Safari and other browsers
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
With React, we never directly
manipulate the actual DOM.
0:00
React takes care of managing what
gets rendered into the DOM and
0:04
what should be displayed on the screen.
0:08
As a result,
0:10
it can sometimes be challenging
to debug your UI in the browser.
0:11
For instance, how do you map the React
components you're building to what you
0:15
see in the developer tools inspector?
0:20
Thankfully, the engineers at Facebook had
0:23
developed the React Developer Tools
extension,
0:25
which provides a significant productivity
boost when working with React.
0:28
Let's take a look.
0:33
React DevTools is a powerful
extension that allows you to inspect
0:34
the hierarchy of your React components
directly within the developer tools.
0:39
To get started, let's download and
install the tools.
0:45
If you're using Chrome,
you can simply click on the Install for
0:49
Chrome link in the React documentation.
0:53
React DevTools is also available for
Firefox, Edge, and
0:57
as a standalone app for Safari.
1:01
You can find the relevant links
in the teacher's notes below.
1:04
Next click the Add to Chrome button to
install the tools, then Add Extension.
1:09
I'll switch over to the grocery
list app and refresh the page.
1:16
Under Extensions, I'll click on the React
Developer Tools extension and a tooltip
1:21
pops up letting me know that this page
is using the development build of React.
1:27
If we have a look at the React site,
I'll refresh the page.
1:33
And when I click on
the React DevTools extension,
1:37
it notifies us that this page is
using the production build of React.
1:41
Okay, back to our Grocery List app,
if you open the developer
1:46
tools in your browser you should see
two new tabs Components and Profiler.
1:52
The Profiler tab allows you to record
performance information for each rendered
1:58
component, which gives you insights
into where your component is slow.
2:04
We won't be using this tab in this course,
so if you're interested in learning more
2:10
about the Profiler tab, check out
the link in the teacher's notes below.
2:14
For now,
let's focus on the Components tab.
2:20
Here you'll find the complete
component tree that forms our app.
2:24
This tree represents the underlying
React code that powers our UI.
2:28
Similar to how you can inspect
HTML in the Elements tab,
2:34
you can inspect your component
hierarchy in the Components tab.
2:38
The top level component is our app,
2:44
followed by its child components
such as header and item.
2:47
Additionally, within the Item component,
you'll find the nested counter component.
2:52
You might have noticed a red symbol to
the left of each of our components.
2:58
When you hover over it, a message pops up.
3:03
This component is not
running in strict mode.
3:06
Click to learn more.
3:10
StrictMode is a special component
provided by React to help you identify
3:12
common bugs in your components.
3:16
During development, StrictMode renders
components twice to detect any potential
3:19
issues within your code and provide
warnings, which can be incredibly useful.
3:25
It also runs effects an extra time,
you will learn and
3:32
use effects in the next course.
3:35
And checks for deprecated API's.
3:38
To enable StrictMode for
our entire app we'll need to wrap or
3:41
app component inside StrictMode tags,
as shown in the example.
3:45
Let's add StrictMode to our app.
3:51
In order to use the StrictMode
component we'll first need to
3:54
import it from the React library.
3:58
One way is to import React
from the React library.
4:01
And this will import all of React
hooks components and API's.
4:07
Instead, what you'll see
most often is a named import
4:12
to just import the item you need like so.
4:16
Now let's scroll to the bottom of
the file where our root.render
4:21
method is located and wrap our app
component within StrictMode tags.
4:25
Great, after saving the changes and
refreshing the page,
4:32
you'll notice that the red symbol is
no longer present in React DevTools.
4:37
Including StrictMode in your app,
is not mandatory, but
4:42
it's a valuable tool to help you
identify and debug existing bugs in your
4:46
code that might be difficult to
reliably reproduce in production.
4:52
It's a helpful addition to your
development workflow that can save you
4:58
time and effort in the long run.
5:02
React DevTools provide several convenient
shortcuts to enhance your productivity and
5:05
streamline the debugging process.
5:10
For instance, you can use
the arrow keys to navigate up and
5:13
down the component tree.
5:17
By clicking the eye icon
next to a component,
5:20
you can quickly locate its corresponding
DOM element in the Elements tab.
5:23
Here's a useful tip.
5:30
If you inspect a React element
using the regular Elements tab and
5:31
then switch to the Components tab,
React DevTools will automatically
5:36
highlight the corresponding
component in the component tree.
5:41
There is a whole lot more you
can do with React DevTools.
5:46
For example, you can inspect
a component's properties and
5:50
the state of your application.
5:54
You're going to learn more about
properties and state in the next stages.
5:57
I highly recommend installing and
6:02
using React DevTools as we
progress through the course.
6:05
It will help you gain a better
understanding of how React works and
6:09
how your application is functioning.
6:14
Whenever you visit websites or
apps built with React,
6:17
taking a peek at them with React DevTools
can provide valuable insights
6:21
into their implementation, so,
I encourage you to give it a try.
6:26
You might discover new techniques or
gain valuable tips along the way.
6:31
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up