Add React.js Explorer to Chrome with React Developer Tools

By Jake Rocheleau. in Coding. Updated on February 24, 2017.

Every web developer should already know about the amazing Chrome Developer Tools. This feature is built right into Chrome and it lets developers inspect pages and edit or remove elements right from within the browser.

It’s incredibly powerful and it’s the best way to study page behaviors such as latency, page resources, or to execute console commands.

Read Also: Getting Started with React.js

Facebook’s team created the React.js library which abstracts a layer for frontend developers to reuse certain UI elements.

And now, with React Developer Tools you can inspect these element hierarchies and edit them right on the page.

This is a completely free extension and it’s developed by the folks at Facebook so you know it’s good quality.

You can also study the different states and the paths of object trees including which elements are above & below other elements.

In the sidebar, you can browse through props and states which let you study the behavior of other elements in that same tree. This is actually a great plugin for newer React users because it can help them understand more about the library.

Naturally, this also includes any event listeners that might change the state of a certain component. And the breadcrumbs at the bottom let you easily skim through parent/child elements.

This is far from the perfect React tool. But it will make your job a whole lot easier when you’re building dynamic applications from scratch.

It’s completely open-sourced with an official GitHub repo maintained by Facebook & updated frequently.

You can install this Chrome extension for any version of Chrome. Or if you’re a Firefox user you can check out the FF add-on which supports FireFox v38 and higher. So far I haven’t seen any support for Safari/Opera users but it is an open source extension so this may come in the near future.