Original subtitles

So we have a pretty much logical error here

in our code.

We have the problem that we have the hard coded ID

and we already learned

how we can find and fix this error.

Now let's say we didn't use any of the other two approaches.

We overlooked that warning

and we don't know why it's behaving incorrectly.

In such cases,

if you can't find the error otherwise

or if you just prefer this approach maybe,

you can go to the sources tab here

in the browser developer tools

and there you find in the end the source files

that are being used on this webpage right now.

And that includes your JavaScript code.

And the cool thing is

that this React development process,

this NPM start script here,

which runs in the end

is set up such that it,

of course pushes code to the browser

that is executable by the browser.

But it also gives the browser extra information

which the browser developer tools are able to pick up

to allow us to actually debug our code

in the raw form we wrote it in.

so that we are able to debug with that code

we're writing in these files,

even though that technically isn't the code

that's executed by the browser.

So this React development process,

gives the browser a bridge,

between the code that runs in the browser

and the code we wrote,

and we can access this code here

in the sources tab,

by going to that User's folder

which you should see.

Users, your username

and then a source folder.

And in there you find your React files.

The files we actually also have here in our IDE.

Now, if you don't find it here,

you can also check out that Webpack folder

and there you might also find a source folder

with your source files.

You can look around because sometimes it's located

in a different node in a different sub folder

but somewhere here in the sources tab,

in this tree of files and folders

you should find your original source code.

And then you could always dive

into the different parts that you wanna analyze.

You could go into the CourseGoalItem

and there, for example, the deleteHandler

and simply add a break point by clicking

onto the line number where you wanna add it.

In this case, that deleteHandler function

which is triggered when we click on the list item

because that's where the deletion process starts.

So maybe that is where we wanna pause the code

and then step through the code step by step

so that we can find the problem.

Once you add such a break point

if you then execute that action,

that triggers that code part

where the break point is placed.

Code execution stops once it reaches that break point line.

So you see that here,

it's paused in a debugger

and that line is now highlighted in blue here

and you've got surrounding information

in those boxes at the bottom.

For example, you see variables

which are currently available.

You see the Call Stack and so on.

And now you can do something cool.

You can step through your code step by step.

And for example, here we call the onDelete method

on the props object, for example.

So to have a look at what's going on there

we can use this Step into next function call button.

If you click that we're in the deleteItemHandler

which is the function that was triggered

because of that props concept.

And here we see that setCourseGoals function

which is being called

and you can also hover over variables here

to see the values that are currently stored in them.

And for example, if I hover over goalId here

I see that it is goal1.

Now, this might or might not help me here,

but I can see that I have goal1 here

when I clicked on this goal

which was actually the second goal I added.

Now we can use the Step over next function call button here

to finish that setCourseGoals function call.

So now with that,

the deleteItemHandler basically finished

and information we got is that

we have the goalId goal1

for that goal we deleted

which as we of course know,

is the wrong goal to delete.

So now we could resume script execution

because we're done with this debugging cycle

and simply try this again

and click on the next goal.

And dive into the next function call here

and see that here we have the same goalId as before.

So now this should be a point where we see,

wait a second,

if we have to same ID on two different goals

on which I clicked here

that seems to be the problem

why the wrong goal was deleted.

So that's maybe with a point

where we resume script execution

and then dive back into the code

where we actually add goals

because that is where we set our IDs.

And just by looking at that code,

we of course should be able to see

why we have goal1 for every goal.

So that's how we can use the break points

to step for our codes step by step

and even inspect values

which are stored in variables and so on

to find out why something behaves the way it does behave.

So break points,

and you can always clear them by clicking on them again.

Break points are another useful tool

for analyzing your code for understanding it

and for finding and fixing errors like that.

And with that, I'll revert this

to Math.random.toString

which of course then is an ID we can use

without getting that warning.

Now, if I try this again,

you see I don't get to the warning.

If I now add multiple goals,

you see if I click on the first goal,

I delete the first goal.

So this now works,

and that's another important set of tools.

The debugging tools you've got natively in your browser

Here I showed it in the Chrome browser

but you also have similar tools in Firefox or Safari.