React Dev Tools

"Shawn, React is excellent at improving the developer experience. They have released react-dev-tools to help us in debugging our apps. React developer tools are Chrome and Firefox add-ons, which make debugging React apps fun."

"Once you install the add-on, you will then see a React tab in the browser console while running a React app. An interesting thing is that this tab is also shown for websites that use React in production too, for example, Facebook."

"Once we click on the React tab, it shows all the components in our app."

"Shawn, as you may have noticed, we can see all our components on the left-hand side pane. On the right-hand side, we see props and state of the component selected in the left pane. Therefore, we can inspect UI state at any point of time. We don't need to add console.log statements to see what is happening with our components."

"More than this, it provides us with a temporary variable—$r. The selected...