React Developer Tools

The React Developer Tools is an extension for both Chrome and Firefox

• Firefox Extension

Tutorial: react-devtools-tutorial.vercel.app/

Components Tab

It allows dev to edit the props and state of components in the browser using the right side panel.

There is also a Suspense API in the right panel ( ⏱ ) that shows what the app looks like while waiting for that specific component to load.

Profiler Tab

By recording action/ events, dev can view how many times a component rendered and the amount of time it took