In this video Emmanuel Henri goes through the basics of debugging with DevTools. He simulates a few common bugs and then goes through each of them with several DevTools.
- [Instructor] Whenever there's a bug or your application isn't performing the way you expect, you first reaction should be to use the Chrome devtools, or the ones from your favorite browser. Earlier, we installed the React devtools, and they're also really handy when we need to debug our application. I took the liberty of inserting a few bugs in our application, silly me. If you aren't using them, I'll point out the bugs so you can reproduce them in your code. If your application isn't running, please do Yarn start or MPM Run start, and also open up a second terminal and run the test with Yarn Test or MPM Run Test.
If we take a look at my editor, I have the two running here. So I have the test and I have the application running. So as you can see, there are a few bugs reported by both the console web browser and test. The beauty of working with state of the art frameworks like React is that you get really good bug reports with some helpful details. Let's take a look at what's happening here. So the first one is failing to compile in App.jsx, so we already know which file has a problem, and in this file we have a warning on five eight, "Course is defined but never used." And then we get in there, "Course is not defined." So as you can probably guess, this is the issue.
So let's go into the App.jsx, and we got course, define, but then we're using courses, and courses is what we're importing. So the problem is this one here, so let's go ahead and fix that. Save, and then you're going to see a whole bunch of stuff happening. So let's go into our browser. Now we get a second mistake, or error, or bug. We got an error with Single, and in Single, we have a few problems. So item is not defined.
Okay, so let's go into our editor. The error is in Single, and then Single has item, it's using item all over the place, but something is wrong. The value is not passed. So let's do something else to allow us to see what's the problem. So we'll do a console log, and this is the one tool that I use probably 80 to 90% of the time when I'm debugging. So if I see that a value isn't passed somewhere, I'm trying to log that value, and this is how I'll know if it's passed or not.
I know exactly what's happening here, but let's go through the process. Okay, so let's go into our browser, refresh, and see, item is not defined. So nothing is passed through item. So we have an issue, and then because item is not defined, when it's passed into the actual component and trying to use item, then we have those errors. So as you may have guessed it, or if you haven't, then we have an issue here.
So we're not passing any props into that particular component, so the item not being passed is the issue. So let's go ahead and do that, save, and the app is running successfully. Let's go in here, and in fact, our console log is logging every single object that's being passed to Single, so we're good. Okay, so let's remove the console log. Save. Okay, so the next error is actually even better. We have a link.
So let's read through what that error means. So right now it says that each child in an array or iterator should have a unique key prop. Check the render method of Grid, so we know where to look for, and see this particular link for more information. So let's go ahead and do that. So that's the cool thing about React. Sometimes you're going to get links to explain exactly what's happening and why it's happening. So right now, if we go here, it's about keys, and what happens is that it mentions that when we're mapping something, we need a key.
We need a unique key for list of items. So if we go into our Grid, right now we have the single item that's being rendered, but we don't have a unique key in the item itself. So this is something we need to do. So let's go ahead and bring back the key, the error that I've actually created on purpose, and the unique key should be the item.id. And if you go into the data, you'll see that each object has an ID, so there fore the unique key.
Save that, go back into your browser, and no more errors. Okay, cool. So as you can see, there are many ways to accomplish the same thing, and knowing the different tools will help you in the long run. Sometimes the bugs will be obvious and easy to fix, but other times they'll require a bit more research. This is what we'll cover next with our image render problem with our test.
- Setting up for React testing and debugging
- Testing with Jest
- Snapshot testing
- Debugging with Chrome and Chrome extensions
- Optimizing React code and app performance