BT

New Early adopter or innovator? InfoQ has been working on some new features for you. Learn more

All-New Devtools for React Bring Tools to Firefox

| by James Chesters on Aug 12, 2015. Estimated reading time: 2 minutes |

The React team has released entirely new devtools for the JavaScript library -- including a new version for Firefox.

Devtools allow developers to inspect React component hierarchy in Chrome Developer Tools.

Posting to Facebook's React blog, Jared Forsyth explained why he had chosen to create a new version. He said:

The biggest reason was to create a defined API for dealing with internals, so that other tools could benefit as well and not have to depend on implementation details. This gives us more freedom to refactor things internally without worrying about breaking tooling.

The current version of the devtools is a fork of Blink's "Elements" pane, and is imperative, mutation-driven, and tightly integrated with Chrome-specific APIs. The new devtools are much less coupled to Chrome, and easier to reason about thanks to React.

The new devtools come with a number of improved features, including the tree view, search, and side pane -- as well as an initial version of the devtools for Firefox.

Among the updates for the tree view are a richer view of props, including the contents of objects and arrays, Improved keyboard navigation, props that change highlight in green and a red collapser for stateful components. For the search function, developers can now search for a component by name by selecting the search bar.

Among the developer community, the new devtools have been greeted with enthusiasm -- particularly the update for Firefox.

On Hacker News, user DigitalSea said:

I am super stoked they now have a Firefox compatible version. The React team have been working very hard and it shows. I've been working with React for about a year now, building an application using React Native and the libraries and tools are absolutely solid, something other libraries and frameworks are definitely missing.

The sentiment was echoed by VeryVito, who said:

This is really nice, and it's great to see a non-Chrome version, too (working great in Firefox so far). Chrome often gets all the love (and is a great choice) for new dev tool extensions, but many of our clients -- for one reason or another -- can't/won't use Google's browser on intranet-based solutions. It's nice to be able to test/debug on more than one browser (Some of us still have to party like it's 1999).

Jeff Griffiths, senior product manager for Firefox developer products, told InfoQ that the Firefox Developer Tools team was "really pleased to see that the ReactJS project is now providing a cross-browser developer tool extension for React."

The devtools team welcome contributions from the community. For more information on how to get involved, developers should visit Contributing to React Devtools.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and dont miss out on content that matters to you

BT