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 Chrome and Firefox Developer Tools.
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 touch the actual DOM directly,
0:00
React manages what it's rendered into the
DOM and what should appear on the screen.
0:02
So it can be tricky to debug
your UI in the browser.
0:07
For instance, how do you map
the React component to your building,
0:10
to what you see the developer
tools inspector?
0:14
Fortunately, the engineers at Facebook
created the React Developer tools
0:17
extension to give you a bid productivity
boost when working with React,
0:21
let's take a look.
0:25
React Dev tools is an extension
that let's you inspect your
0:26
React component hierarchy in
the Chrome and Firefox developer tools.
0:29
The first thing we'll do is download and
install the tools.
0:34
I'll open a new tab and
just Google React DevTools.
0:37
I'm using Chrome, so I'll click
the link to the Chrome Web Store.
0:41
React Devtools is also available for
Firefox and as a standalone app for
0:46
Safari, you can find the links to those
in the teacher's notes with this video.
0:50
Next, click the green add to Chrome
button to install the tools.
0:54
I have already installed them, so
0:59
now that they're installed any time I
visit a website or app that's built using
1:01
React I'll see the React extension
icon light up in my tool bar.
1:06
For example, if I switch over
to the scoreboard app a tooltip
1:10
pops up letting me know that this page
is using the development build of React.
1:14
And if we have a look at the React site,
1:19
it notifies us that this page is
using the production build of React.
1:21
So now if you open your
browser's developer tools,
1:28
you should see a new tab called React.
1:32
Click on the tab and you will see the full
component tree that makes up our app.
1:35
This is the React code
that underlies our UI.
1:41
You can inspect your component
hierarchy similar to
1:44
how you inspect HTML elements
in the Elements pane.
1:47
So the first thing we see
is our App component.
1:50
Click the arrow to expand the component,
we see the scoreboard, div,
1:53
and the child Header and
Player components.
1:58
Expand the player component and we see its
elements in child component, the Counter.
2:01
The tool offers handy shortcuts
to help you be productive and
2:07
quickly debug your apps.
2:10
For example, you can use the arrow keys to
navigate up and down your component tree.
2:12
You can right click any component,
select Find DOM node, and
2:17
it will switch over to the Elements pane
and show you the corresponding DOM node.
2:22
Another useful tip is that if
you inspect a React element on
2:28
the page using the regular elements tab.
2:33
Then switch over to the React tab,
2:37
that element will be automatically
highlighted in the React component tree.
2:40
Finally, one feature I like to use is
the search bar to find components by name.
2:44
For example,
2:49
if I type Player into the search bar it
will show me all the Player components.
2:50
Type Counter and
I immediately see the Counter component.
2:56
And there's a whole lot more you can do
with React Dev tools including inspecting
3:01
a component's properties and
the state of your application or
3:05
its data over here in the right pane.
3:09
And you're gonna learn a whole
lot more about properties and
3:11
states starting in the next video.
3:13
We're going to be using React Dev tools to
understand more about how React works and
3:14
how our application is running.
3:20
So, I suggest you install them now.
3:22
Whenever I visit sites built with React, I
like to inspect them with React Dev tools
3:24
to see how they were built, so
I encourage you to do the same.
3:29
You'll often learn something new or
pick up new tips along the way.
3:32
Now we have the basic shape of our
application, however, it's static.
3:36
So in the next stage, you'll learn
how to insert dynamic information
3:41
into your components with properties or
props.
3:45
See you soon.
3:48
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