Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Basics (2018) Thinking in Components React Developer Tools

Tyler McDonald
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tyler McDonald
Full Stack JavaScript Techdegree Graduate 16,700 Points

Why do we need React Developer Tools?

Since the chrome dev tools already shows the html markup rendered by React, what is the point of the React extension for a separate Dev tools?

In addition, React dev tools is not showing any information in the DOM tree except for the component names. It doesn't show classes or text inside of nodes.

Tyler McDonald
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tyler McDonald
Full Stack JavaScript Techdegree Graduate 16,700 Points

I figured out my second issue. There's a filter that's set by default which hides many of the DOM elements in the Componenets tab. Removing that filter fixed the issue. This article from Codecademy helped me.

1 Answer

Torben Korb
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Torben Korb
Front End Web Development Techdegree Graduate 91,431 Points

Hi Tyler,

the React dev tools show information specific to React components like state, props, source code and more additional profiling information. This can help debugging React applications a lot.

Also it seems the layout of the React dev tools extension changed a bit since the recording of the video. At least in the Chrome extension. But the principles are still the same for examining an application.

Hope this helps. Happy coding!