"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 component from the console is available as $r in the console."

"Let's try to see what $r gives us in the console so that we can debug the selected component directly in console."

"It also allows us to scroll to the selected component in the UI to see the actual source code of the component. It can also show all components of a specific type."

"So Shawn, what do you think about these dev tools?" asked Mike.

"I am very impressed. This is really nice! I will use them in each and every React project from now onwards." Shawn was very excited on seeing the power of React dev tools.