When we talk about debugging, it's important to understand what could possibly go wrong and in which
situations you might want to debug your code or avoid errors
and the most obvious thing that can go wrong is that your app crashes or that you're getting an error
message. In development,
that's this red box which overlays your app which we already saw before in this course and these error
messages are of course a clear sign that something's wrong with your code.
More subtle than that are logical errors. In your apps, you'll certainly at some point have some behavior
which might not make sense to you or where something just doesn't work the way it should work.
You're not getting an error but your app is misbehaving, it's working incorrectly
and
typically, you have some logical errors somewhere that's causing this.
And last but not least, you have your user interface, your styling, your layout,
the user experience you want to create and maybe that's off,
maybe there you have something that just doesn't look or feel the way it should look or feel and that's
also something that can go wrong and that you want to avoid. Now typical examples for error messages
or causes of error messages are syntax errors where you simply have a typo in your code or where you
forgot a closing curly brace, something like that but also simply bugs in your code,
so for example a line of code where you use a value which you actually never set,
so you're trying to for example calculate something with an undefined value or parse a string which
is actually undefined, anything like that,
that would typically also lead to errors. And then you have a special type of error and these are unavoidable
errors as I like to call them.
Now that does not mean that these are errors you can't avoid because you're just not good enough as
a developer,
instead I mean errors which could result from you making a network request and the users of your app
not having a network connection or that you're writing to the filesystem and somehow this access is
blocked, so you can't be sure that this will never fail when users use your app because you can't control
how they're using your app or in which circumstances they're using your app and for such errors, you
can also find strategies where you can't avoid the error but where you can handle it. Now for logical
errors, a
typical example would be that you have some undesired or unexpected app behavior and you of course want
to get rid of that, that you have some unexpected or unhandled user behavior so that users are
using your app in a way you didn't intend them to use,
so when testing your app during development, you want to be really creative and find out if users could
get into spots where they can proceed or where your app is not working correctly, so that maybe the users
followed a certain sequence of steps that leads to an error, to a logical error, maybe some input is missing
at some point and you're not checking for this input to be set and therefore with that not being set,
you can cause another issue or go into another error,
so something like that.
Now last but least if we talk about the styling, the layout, obviously we can have unexpected or wrong
styling, so we're testing the app and we see that doesn't look the way it should
or maybe we just have inconsistent results on different devices,
maybe our app looks good on iOS but not on Android or last but not least, maybe we have a layout that
just doesn't work or feel right on certain devices or orientations.
Maybe our content doesn't fit onto the screen on very small devices,
these are all things we also want to rule out. Now that's what you can debug,
how do you debug? Which tools do you get for debugging your errors?
Now the most obvious tool you're getting and yet the tool a lot of people overlook or just don't look
at at all are the error messages,
seriously read the error messages you're getting.
I've seen it so often in my courses that students get some error and just go Oh God I got an error,
screenshot or copy and paste it in Q & A section and sometimes, errors can be really hard to debug or to
understand or you need some experience to find out what exactly went wrong but to be very honest,
often error messages are really clear regarding what went wrong or even contain a solution regarding
how you may fix the error.
And last but not least, simply taking error message and googling it also often gets you very far because
chances are you're not the first one who's getting it.
Now let's say you're not getting an error message but your app is not behaving correctly in some spot
or you're not sure if some value is set correctly in some part of your code.
A very easy way of looking into your code, of getting a feeling for the values you're working with
in code is to use good old console log. Now console log debugging doesn't have the best reputation and
indeed, it's not that great if you're debugging a very complex problem
but to simply get an idea for the flow of your code or for some of the values you're working with, it's
great.
You can simply dump it into your code and then find out which value you're using at which point or how
something behaves in a certain situation or if something is getting executed at all
and therefore, this is definitely something you should also do.
Now for more complex problems or if you really want to step through your code step-by-step, using the
Chrome debugger and breakpoints is a great tool and it's supported by React Native, both when you're
using expo or when you're not using expo. There you can really dive deeply into your code and get a
feeling for how it works and go through it step-by-step and look into your code whilst it's getting
executed.
So let's have a look at these things now.