Add React.js Explorer to Chrome with React Developer Tools

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.

Getting Started with React.js

Getting Started with React.js

React.js is a flexible and component-based JavaScript library for building interactive user interfaces. It was created and open-sourced…Read more

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.

react devtoolsreact devtools

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.

firefox react devtoolsfirefox react devtools

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.

5 (More) Useful Chrome DevTools Tips for Developers

5 (More) Useful Chrome DevTools Tips for Developers

Google Chrome comes with a handy set of web development tools in the form of DevTools (The Chrome…Read more

Source: http://www.hongkiat.com/blog/react-dev-tools/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s