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.
