How to Set up React DevTools on Google Chrome

Sometimes it will make sense to have components within components. Or components within components within components. Over time, if you accumulate a lot of properties and components, it can be hard to keep track of everything. React DevTools can help with that.

React DevTools show your React DOM tree.

How to Install React DevTools

  1. Open Google Chrome
  2. Go to https://chrome.google.com/webstore
  3. Search and open “React Developer Tools”
  4. Press the “Add to Chrome” button

Once it is done installing, you should see a new symbol show up next to your search bar

How to Use React DevTools

  1. Open up Chrome Developer Tools (View > Developer > Developer Tools)
  2. Open the Components tab
  3. You should see your React DOM tree