Tips For Debugging React Apps

Use the developer console#

It is the first place that gets notified when anything goes wrong should anything goes wrong.

Add debugger for line breaks#

This will cause the app to stop running at that particular line, allowing us to inspect the elements and variables at that point in time.

Alternatively, break points can be added in the source tab under the developer’s console.

Separate Object and string values with comma in console.log#

console.log('props value is', props)

This way, both the string and the contents of the variable will be printed.

The wrong way would be to use +. In which case the class of the Object is simply printed.

Grab the react Chrome extension#

The extension adds a new tab to the developer console.

Using the extension gives us an easy way to inspect the various react components and their state and props