In the last lecture, we had a look at error messages, certainly important but oftentimes you have logical
errors which are even harder to spot.
You don't get the error message but somehow it's not working.
Let's say the nameChangedHandler, when we find the index of a person we want to update, let's say we
compare user ID with ID
and this is incorrect, a person has no user id property.
It will not throw an error though because user ID is undefined but you can compare undefined to something
you probably just won't find a fitting person.
So if I save this code, by the way of course fixed the error from the last lecture,
so if I save this code and we go back to the application, if we now start typing, we don't get an error
but I can type as much as I want,
it won't update,
I don't even see my updated value here because I broke the two way binding because I'm not correctly
updating the name of this person.
Now what can we do in such a case?
We can walk through our code step by step,
for that I recommend using the chrome developer tools.
There you can go to the sources tab, in the sources tab you will find your code structure shown under
localhost,
there you will find a source folder and you actually find your code here.
Now this is possible due to source maps which are generated.
Basically you could say translation files allowing the browser developer tools to go into your code
as you wrote it and allow you to debug that code even though the code which is shipped to the browser
will be a different one, an optimized and bundled one.
This is pretty cool because you can debug the code you wrote even though it's not the code running in
the browser.
So in there, we know something's not working when I type here
and as we wrote the code, we know that the nameChangedHandler is getting fired when we type.
So let's place a breakpoint by clicking on a new line number here
and let's start typing again.
I typed one character and that's now pausing this,
you'll see it's adding this i because that's default behavior of the html element and we haven't
execute all the code which would overwrite that again,
and now we can use the normal chrome debugger tools here to walk through our code. And here we can step
into the next function call to step into this find index function and understand what's happening there.
So now inside there, we can have a look at the data
we have available there like the p object.
Now we see this is for Max, this is the object it's currently looking at with find
index and we have an idea of asfa1.
We also see that this expression here is undefined though and we compared this to an id of asfa1
So whilst this should match this person that has this ID, since we access user ID we can see it's undefined
and we can clearly see that user ID is not a valid ID because if we hover over the person again, we see
there only is ID object, no user id object. With that information,
we can now exit this process go back to our code and fix our logical error.
So using the chrome debugger tools with source maps which are generated for you automatically is a powerful
feature for detecting logical errors.
You can walk your code as you wrote it, even though that's not the code running in the browser.
So that's a cool tool you should be aware of
for finding and fixing errors. Using the developer tools with the sources tab where you can access your
original code due to source maps.