Debugging in React

Some developers love to do it and some hate that part of the job. One thing is for sure. Every dev has to debug - a lot. So, we may as well learn how to be very effective at it. In this post, I would like to expose you to some debugging tools that are available for use in a React application.

Chrome DevTools

From the Chrome DevTools page, "Chrome DevTools is a set of web developer tools built directly into the Chrome browser." This post will rely on these tools. If you are not familiar with Chrome DevTools yet, you are in for a treat. It offers lots of tools to help developers debug on the fly.

There are some useful keyboard shortcuts for launching the Chrome DevTools.

Mac:

• command+option+J - to open the DevTools in the Console panel
• command+option+C - to open the DevTools in the Elements panel

For Windows:

• control+shift+J - to open the DevTools in the Console panel
• control+shift+C - to open the DevTools in the Elements panel

With that let's start looking at some different ways to debug in React. I'd like to cover three things:

1. Error Messages

2. Tackling Logical Errors

3. Checking State

Error Messages

Take a look at the image below:

React is kind enough to give us some powerful hints right in the browser even pointing to a line number in the code where the error occurred - cannot read property 'value' of undefined simply means whatever comes before value on line 28,input in this case, is undefined.

Below is an example of the same exact error displayed in the Chrome DevTools Console panel:

Again, notice it is pointing us to line 28 in the App.js file. Isn't it awesome that we can so quickly pinpoint where the error in our code is!? At this point, we just have to figure out why input is undefined.

Logical Errors

Logical errors are more difficult to locate - we get no error messages and the app isn't functioning properly. For this, we can use the DevTools. Head to the Sources panel then find and open the file your code is coming from:

In there we can place a breakpoint (by clicking on a line number) where we think the problem is and poke around to see what is happening - walk through the code step by step. We can look at the data:

Above you can see that p.userId is undefined and is being compared to personId. Found it! The issue lies with p.userId.

Using the Chrome DevTools with Source Maps that are generated for you automatically is a powerful feature for detecting logical errors. You can walk through your code as written by you, even though it is not the code running in the browser.

Checking State

You can check the current state of your app in the DevTools but it can sometimes be a bit of pain. Thankfully, there is a handy extension that can be added to Chrome called "React Developer Tools."

Once installed:

I recommend playing around in there to experience everything you can. A few things you can do are: log components to the console, inspect matching DOM elements, inspect the source code, and change state/props to see how things change without having to hardcode anything in your code.

Recap

In this post, we learned that React gives us useful error messages in the browser, Chrome DevTools in your friend, and React Developer Tools is great for all things state-related.

I hope you learned something and as always, leave feedback, ask questions, and share! Happy coding!✌️