Get the latest version of the React DevTool add-on here. Once it’s installed, you’ll be able to examine React code on any site that uses it. When you visit a React-powered site, the add-on icon will appear to the right of the Firefox address bar:
Open your DevTools by hitting command-option-i (control-shift-i for Windows), clicking the button in the toolbar, or right-clicking on the page and selecting “inspect.” You’ll see the React panel alongside the basic DevTools panels. The main panel will now show you the React tree view:
The React tool works pretty much like every other DevTool. Use the arrow keys or hjkl keys to navigate the code, right-click components to examine them in the elements pane, show source, and so on. Expand or collapse items by clicking the arrows.
The side pane is a great place to store variables and see updates to the code.
There’s also an awesome search bar.
Inspect a React element on a page using the regular inspector, then switch to the React tab. The element will automatically be selected in the React tree.
You can also right-click an element and choose “Find the DOM node” to, well, find the DOM node of any element.
React and Redux go together like avocado and toast. Redux creates a predictable state container for your React library that lets it run reliably on virtually any system. It also lets you “time travel” to previous versions of your states. The Redux devtool for Firefox lets you inspect Redux actions and payloads, cancel actions, log action reducer errors, and automatically re-evaluate staged actions when you change reducer code.
With Firefox Add-ons, you can have a complete React/Redux debugging toolset right in your browser.
Download Firefox Developer Edition and then check out all the add-ons available at addons.mozilla.org.
About Dustin Driver
Journalist, tech writer, and video producer helping Mozilla keep the Web open and accessible for everyone.