Now I'm gonna remove this console.log and in the same exact spot, I'm going to use a built-in process called the debugger. So if you place this debugger anywhere inside of your application, then what's going to happen is the browser's going to see this keyword and it is going to stop execution of your program and it's going to allow you to ask questions of your data.

This is one of the more common ways that I work with API's and it gives me some great visibility to be able to see what I have to access to. The reason why I like this usually over, say, a console log statement is I can actually run scripts and perform any kind of task I need to right from within the browser. It's like it freezes the entire process and gives me the ability to run functions, to build out equations, anything like that.

So I'm going to save this and now if I switch back into Google Chrome, you can see, and you may have to hit refresh, but mine happened automatically. You can see that the screen's now gray and it says paused in debugger and it even shows exactly where it paused.

So this is something that is very helpful because what I can do now is I can click in the console here and I'm going to clear this out. And just like we saw, we saw that we are having our debugger statement fired inside of this map statement. And what this means is I have access to all of these variables.

So I have access to the item, now I can just type in item and you can see that it returns that full API data right there for that first one, which is Crondose. So this is really helpful because I can do things like this, I can say item.banner image URL and it gives me that full image, and I could click on this and it shows me the image.

I could check to see, say, what the name is and you can see it returns Crondose. So that's for the very first element because what it does is it freezes the execution of the program and so the very first time that map is fired, it allows me to have access to this item.

Now, to get access to the next item, what I'll do is click on this little blue button called resume and it is going to fire the map function again, so it's gonna take me to the next item and I can do the same thing. So it can say item.description and it's gonna return that value to me.

So this is something that is very helpful because it gives you a programmatic way to access the data that's coming in. Now, this may be the approach that I follow the most whenever I'm performing debugging with an API. One thing I will say, though, is that this does not give you access to your applications or to your components' state.

So right here, we know that we have some state here, we have the page title and we have this is loading property and data. If I try to do something like, say, this.state. and then go into, say, page title, you can see it's gonna throw an error.

It says uncaught error, cannot read property state of undefined because we don't actually have access directly into the components' architecture whenever we're using the debugger. We do have access to data, so that's how we're able to ask about the item data.

But we can't go in and start manipulating state or working with state. That is a perfect lead in into what we're going to work on in the next guide, which is how we're gonna see how to use the React Developer Tools.

Resources

• Source Code