How to Set up React DevTools on Google Chrome

Coding Tools, React 1 Minute

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

Published by jnbowen

Published

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s