With React, we never touch the actual DOM directly,

React manages what it's rendered into the DOM and what should appear on the screen.

So it can be tricky to debug your UI in the browser.

For instance, how do you map the React component to your building,

to what you see the developer tools inspector?

Fortunately, the engineers at Facebook created the React Developer tools

extension to give you a bid productivity boost when working with React,

let's take a look.

React Dev tools is an extension that let's you inspect your

React component hierarchy in the Chrome and Firefox developer tools.

The first thing we'll do is download and install the tools.

I'll open a new tab and just Google React DevTools.

I'm using Chrome, so I'll click the link to the Chrome Web Store.

React Devtools is also available for Firefox and as a standalone app for

Safari, you can find the links to those in the teacher's notes with this video.

Next, click the green add to Chrome button to install the tools.

I have already installed them, so

now that they're installed any time I visit a website or app that's built using

React I'll see the React extension icon light up in my tool bar.

For example, if I switch over to the scoreboard app a tooltip

pops up letting me know that this page is using the development build of React.

And if we have a look at the React site,

it notifies us that this page is using the production build of React.

So now if you open your browser's developer tools,

you should see a new tab called React.

Click on the tab and you will see the full component tree that makes up our app.

This is the React code that underlies our UI.

You can inspect your component hierarchy similar to

how you inspect HTML elements in the Elements pane.

So the first thing we see is our App component.

Click the arrow to expand the component, we see the scoreboard, div,

and the child Header and Player components.

Expand the player component and we see its elements in child component, the Counter.

The tool offers handy shortcuts to help you be productive and

quickly debug your apps.

For example, you can use the arrow keys to navigate up and down your component tree.

You can right click any component, select Find DOM node, and

it will switch over to the Elements pane and show you the corresponding DOM node.

Another useful tip is that if you inspect a React element on

the page using the regular elements tab.

Then switch over to the React tab,

that element will be automatically highlighted in the React component tree.

Finally, one feature I like to use is the search bar to find components by name.

For example,

if I type Player into the search bar it will show me all the Player components.

Type Counter and I immediately see the Counter component.

And there's a whole lot more you can do with React Dev tools including inspecting

a component's properties and the state of your application or

its data over here in the right pane.

And you're gonna learn a whole lot more about properties and

states starting in the next video.

We're going to be using React Dev tools to understand more about how React works and

how our application is running.

So, I suggest you install them now.

Whenever I visit sites built with React, I like to inspect them with React Dev tools

to see how they were built, so I encourage you to do the same.

You'll often learn something new or pick up new tips along the way.

Now we have the basic shape of our application, however, it's static.

So in the next stage, you'll learn how to insert dynamic information

into your components with properties or props.

See you soon.