1 00:00:02,470 --> 00:00:08,350 When we talk about debugging, it's important to understand what could possibly go wrong and in which 2 00:00:08,350 --> 00:00:13,150 situations you might want to debug your code or avoid errors 3 00:00:13,150 --> 00:00:18,700 and the most obvious thing that can go wrong is that your app crashes or that you're getting an error 4 00:00:18,700 --> 00:00:20,760 message. In development, 5 00:00:20,770 --> 00:00:28,120 that's this red box which overlays your app which we already saw before in this course and these error 6 00:00:28,120 --> 00:00:32,330 messages are of course a clear sign that something's wrong with your code. 7 00:00:32,650 --> 00:00:40,060 More subtle than that are logical errors. In your apps, you'll certainly at some point have some behavior 8 00:00:40,480 --> 00:00:46,540 which might not make sense to you or where something just doesn't work the way it should work. 9 00:00:46,570 --> 00:00:51,830 You're not getting an error but your app is misbehaving, it's working incorrectly 10 00:00:51,910 --> 00:00:52,680 and 11 00:00:52,750 --> 00:00:58,370 typically, you have some logical errors somewhere that's causing this. 12 00:00:58,370 --> 00:01:02,470 And last but not least, you have your user interface, your styling, your layout, 13 00:01:02,470 --> 00:01:06,470 the user experience you want to create and maybe that's off, 14 00:01:06,490 --> 00:01:13,270 maybe there you have something that just doesn't look or feel the way it should look or feel and that's 15 00:01:13,270 --> 00:01:19,000 also something that can go wrong and that you want to avoid. Now typical examples for error messages 16 00:01:19,000 --> 00:01:26,830 or causes of error messages are syntax errors where you simply have a typo in your code or where you 17 00:01:26,830 --> 00:01:32,140 forgot a closing curly brace, something like that but also simply bugs in your code, 18 00:01:32,140 --> 00:01:37,000 so for example a line of code where you use a value which you actually never set, 19 00:01:37,000 --> 00:01:43,990 so you're trying to for example calculate something with an undefined value or parse a string which 20 00:01:43,990 --> 00:01:46,290 is actually undefined, anything like that, 21 00:01:46,420 --> 00:01:54,030 that would typically also lead to errors. And then you have a special type of error and these are unavoidable 22 00:01:54,060 --> 00:01:56,490 errors as I like to call them. 23 00:01:56,520 --> 00:02:01,230 Now that does not mean that these are errors you can't avoid because you're just not good enough as 24 00:02:01,230 --> 00:02:02,190 a developer, 25 00:02:02,250 --> 00:02:08,760 instead I mean errors which could result from you making a network request and the users of your app 26 00:02:08,790 --> 00:02:15,570 not having a network connection or that you're writing to the filesystem and somehow this access is 27 00:02:15,570 --> 00:02:23,430 blocked, so you can't be sure that this will never fail when users use your app because you can't control 28 00:02:23,640 --> 00:02:29,580 how they're using your app or in which circumstances they're using your app and for such errors, you 29 00:02:29,580 --> 00:02:36,030 can also find strategies where you can't avoid the error but where you can handle it. Now for logical 30 00:02:36,040 --> 00:02:36,330 errors, a 31 00:02:36,330 --> 00:02:42,270 typical example would be that you have some undesired or unexpected app behavior and you of course want 32 00:02:42,270 --> 00:02:49,230 to get rid of that, that you have some unexpected or unhandled user behavior so that users are 33 00:02:49,230 --> 00:02:52,470 using your app in a way you didn't intend them to use, 34 00:02:52,470 --> 00:02:57,480 so when testing your app during development, you want to be really creative and find out if users could 35 00:02:57,480 --> 00:03:05,190 get into spots where they can proceed or where your app is not working correctly, so that maybe the users 36 00:03:05,190 --> 00:03:11,100 followed a certain sequence of steps that leads to an error, to a logical error, maybe some input is missing 37 00:03:11,100 --> 00:03:17,850 at some point and you're not checking for this input to be set and therefore with that not being set, 38 00:03:18,120 --> 00:03:22,740 you can cause another issue or go into another error, 39 00:03:22,770 --> 00:03:24,200 so something like that. 40 00:03:24,300 --> 00:03:29,790 Now last but least if we talk about the styling, the layout, obviously we can have unexpected or wrong 41 00:03:29,790 --> 00:03:34,340 styling, so we're testing the app and we see that doesn't look the way it should 42 00:03:34,470 --> 00:03:38,220 or maybe we just have inconsistent results on different devices, 43 00:03:38,220 --> 00:03:44,790 maybe our app looks good on iOS but not on Android or last but not least, maybe we have a layout that 44 00:03:44,790 --> 00:03:49,220 just doesn't work or feel right on certain devices or orientations. 45 00:03:49,260 --> 00:03:53,370 Maybe our content doesn't fit onto the screen on very small devices, 46 00:03:53,400 --> 00:03:58,750 these are all things we also want to rule out. Now that's what you can debug, 47 00:03:58,770 --> 00:04:03,460 how do you debug? Which tools do you get for debugging your errors? 48 00:04:03,600 --> 00:04:11,880 Now the most obvious tool you're getting and yet the tool a lot of people overlook or just don't look 49 00:04:11,880 --> 00:04:14,070 at at all are the error messages, 50 00:04:14,070 --> 00:04:17,100 seriously read the error messages you're getting. 51 00:04:17,130 --> 00:04:24,850 I've seen it so often in my courses that students get some error and just go Oh God I got an error, 52 00:04:25,170 --> 00:04:32,760 screenshot or copy and paste it in Q & A section and sometimes, errors can be really hard to debug or to 53 00:04:32,760 --> 00:04:39,180 understand or you need some experience to find out what exactly went wrong but to be very honest, 54 00:04:39,600 --> 00:04:46,530 often error messages are really clear regarding what went wrong or even contain a solution regarding 55 00:04:46,530 --> 00:04:48,120 how you may fix the error. 56 00:04:48,210 --> 00:04:54,090 And last but not least, simply taking error message and googling it also often gets you very far because 57 00:04:54,090 --> 00:04:56,790 chances are you're not the first one who's getting it. 58 00:04:57,970 --> 00:05:03,850 Now let's say you're not getting an error message but your app is not behaving correctly in some spot 59 00:05:03,880 --> 00:05:09,670 or you're not sure if some value is set correctly in some part of your code. 60 00:05:09,880 --> 00:05:15,370 A very easy way of looking into your code, of getting a feeling for the values you're working with 61 00:05:15,370 --> 00:05:22,150 in code is to use good old console log. Now console log debugging doesn't have the best reputation and 62 00:05:22,150 --> 00:05:26,090 indeed, it's not that great if you're debugging a very complex problem 63 00:05:26,260 --> 00:05:32,470 but to simply get an idea for the flow of your code or for some of the values you're working with, it's 64 00:05:32,470 --> 00:05:32,950 great. 65 00:05:32,950 --> 00:05:38,860 You can simply dump it into your code and then find out which value you're using at which point or how 66 00:05:38,860 --> 00:05:43,840 something behaves in a certain situation or if something is getting executed at all 67 00:05:43,900 --> 00:05:47,260 and therefore, this is definitely something you should also do. 68 00:05:47,260 --> 00:05:53,830 Now for more complex problems or if you really want to step through your code step-by-step, using the 69 00:05:53,830 --> 00:05:59,610 Chrome debugger and breakpoints is a great tool and it's supported by React Native, both when you're 70 00:05:59,620 --> 00:06:05,860 using expo or when you're not using expo. There you can really dive deeply into your code and get a 71 00:06:05,860 --> 00:06:11,740 feeling for how it works and go through it step-by-step and look into your code whilst it's getting 72 00:06:11,740 --> 00:06:12,350 executed. 73 00:06:13,090 --> 00:06:15,760 So let's have a look at these things now.