React developer insider tip: debug states using extension for Chrome
When getting started with React development you first need to wrap your head around concepts like states and props. Chrome Developer Tools quickly becomes your friend. Typically used to inspect your DOM tree and check styles. The insider tip is to install the React Developer Tools extension for Chrome for even more efficient React development.
React Developer Tools for Chrome
I assume that your React app uses states and props for most mounted components, at least mine does. When building front-ends in React we need to test how the component reacts to state changes. You can always use console api or debugger. But that requires setting breakpoints, console logging etc.
With React developer tools you there is a much smoother way of working with states. Check the gif below, there you see how easy you can simply change the state of a component for more efficient development. Sweet.
Control complete App state with React Developer extension
I have saved countless hours of debugging after discovering the extension. You can also control props, seek and inspect components. It is basically a fundamental tool for every react developer.
Developing in React? Install the React Developer extension today.