But this could be a messy and frustrating way to debug your Java script in this video.

I'm going to teach you a better way, so I have this Web app here.

It's actually the main project from my learn, react and re ducks from beginner to paid professional course.

So it's react up, but that's completely irrelevant.

What I'm going to show you will work for any friends in Java script, whether you're using a framework or not.

Anyway, this app is broken.

If we do a search, the thumbnails all come back working.

So what do we do?

So most people will do this.

They'll go to the part of the curried where we've got the function that processes the search results on do it consul dot log on the results, then go back to the browser on Reload it.

Then you want to bring up the consul and we want to check the results that we've output it on.

Yeah, they all look fine to us, so the next step is usually to add another concert dot log somewhere else.

Now, this way of debugging does work, but it is a bit cumbersome, constantly adding and removing consul dot locks all over the place under him to show you a slightly nice away in the code, we simply remove the consul dot log and in its place, we put the word D bugger.

Now let's go back to the browser and see what that does.

So we reload in the browser on Dhe.

You're going to need to make sure the developer tools are open.

All this won't work at all.

We perform our search again Now, when the code hits the debug a statement, the browser stops the Java script.

Execution is paused.

At this point, we call this a break point.

We can now do some really cool things.

We can inspect the current state of the code.

We can see exactly where we are in the code.

We can mouse over variables, and it shows their current values.

If you go down here, we can see a cool stack showing all of the functions that were called to get to this point.

Over here, we can see all of the variable scopes we got available at the current points and see all of the variables in each scope and even their current values.

We can even add new break points by kicked clicking like this.

Onda blew our comes up and we press the blue arrow down here and this moves on to the next break points or just to the end of the code.

If there isn't one, and you can just remove the break point by clicking it again, you can press this down our hair to skip into functions or this right facing arrow here to step through the code one line at a time.

So this goes into another function.

Cool.

And somewhere down here we've got the valley we want.

We thought it was a string, and this is what we've got a problem, but it's actually an object on.

We want the U.

R L property, which is a strength on the bugger, gives us the exact line of code we need to go and fix it.

So we go back to our code.

We know the exact line number where we've got the problem because we saw it in the deep bugger and now we just fix it by adding dot u R l And of course, we go down on We removed the debug a statement.

So in the browser again, we reload performance of the search.

And now we get all our thumbnails.

Everything works as expected.

So they have it.

Break points are more professional fast that and hassle free way to debug your Java script code.