Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Basics Thinking in Components React Developer Tools

Tyler McDonald
seal-mask
.a{fill-rule:evenodd;}techdegree
Tyler McDonald
Full Stack JavaScript Techdegree Student 10,024 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
Tyler McDonald
Full Stack JavaScript Techdegree Student 10,024 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 88,575 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!