How to see your React state & props in the browser

Accessing your State attributes in React can be confusing at times. I recently found myself in a bit of a pickle and discovered React Developer Tools extension. This allows you to see the state or props of components in real-time!

React Developer Tools

Install the React Developer Tools extension for Chrome or FireFox. It allows you to inspect React component hierarchies within the developer tools — the same way you would peek at the DOM elements, console, or network.

Inspecting React Components

  1. Open your app and inspect the page with developer tools (Command+Option+I).
  2. Select the React Developer Tools

3. Pick a component in the tree to see its state and current props.

You can also select a React element directly from the page by hovering over it with the selection tool:

Modifying the State

If you want to update your state in the browser — you can! Modify it by clicking and editing state attributes in the React tab. This will re-render the DOM, passing the state down through the props.

Good luck! :)