Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,780 --> 00:00:06,430
Now that we know how to launch the app on different devices,
2
00:00:06,440 --> 00:00:12,300
let's dive deeper into which tools we have to effectively debug it and with debug it,
3
00:00:12,410 --> 00:00:21,080
I mean things like solving errors, finding logical errors in our code and also things like checking what
4
00:00:21,110 --> 00:00:27,800
is responsible for rendering the user interface in the way we see it, as well as some performance monitoring,
5
00:00:28,100 --> 00:00:33,770
we can do all of that very conveniently with the help of Flutter and some special tools Flutter gives
6
00:00:33,770 --> 00:00:38,370
us. So in our code here, what could go wrong?
7
00:00:38,630 --> 00:00:43,060
There are different kinds of errors you can get when building a Flutter app.
8
00:00:43,310 --> 00:00:50,600
One of the most common errors and thankfully, also a kind of error that is relatively easy to fix is
9
00:00:50,600 --> 00:00:51,990
the syntax error,
10
00:00:52,010 --> 00:00:59,120
for example, you might forget a semicolon from time to time. In such a scenario when you start your app
11
00:00:59,150 --> 00:01:01,700
with or without debugging, it doesn't matter,
12
00:01:01,700 --> 00:01:06,950
you should automatically get a complaint here and you can have a look at the errors you are getting
13
00:01:07,160 --> 00:01:11,800
which you should also get here in your IDE and also here in Visual Studio Code
14
00:01:11,930 --> 00:01:14,300
in the problems tab if you go there.
15
00:01:14,300 --> 00:01:20,090
So there, it should already hint you at some of the obvious errors you might have in your code. So that's
16
00:01:20,090 --> 00:01:21,440
relatively easy to fix.
17
00:01:22,520 --> 00:01:29,600
In addition to that, you might also have errors which aren't recognized by your IDE but which pop up
18
00:01:29,600 --> 00:01:31,720
when your app runs,
19
00:01:31,850 --> 00:01:38,870
for example we might have an error where we add three to our current question index and the result will
20
00:01:38,870 --> 00:01:47,650
be that we exceed the range of available indexes right after answering the first question because
21
00:01:47,650 --> 00:01:52,930
we increment the index from zero to three, we only have three elements in the list,
22
00:01:52,930 --> 00:01:56,400
as you learned, the list indexes start at zero,
23
00:01:56,410 --> 00:02:02,140
so the index three would target the fourth list element which we don't have and therefore, this will cause
24
00:02:02,140 --> 00:02:03,040
an error.
25
00:02:03,040 --> 00:02:08,670
However the IDE doesn't pick up that error because it doesn't analyze the data we're working with and so
26
00:02:08,680 --> 00:02:09,130
on,
27
00:02:09,280 --> 00:02:12,720
we will get an error though once we run our application.
28
00:02:12,760 --> 00:02:19,030
So here let me launch the application and then show you which kind of error we get and how you can resolve
29
00:02:19,030 --> 00:02:21,870
such errors on your own when you get them.
30
00:02:22,210 --> 00:02:28,900
With the app running here, once I click a button, we get to the results screen because we don't even try
31
00:02:28,900 --> 00:02:31,630
to access an element with that index.
32
00:02:31,630 --> 00:02:35,110
That changes however if I try to add some code here,
33
00:02:35,110 --> 00:02:41,980
so here if I take my questions and I want to print the question item for the chosen question index, then
34
00:02:41,980 --> 00:02:48,100
this again will be code which is accepted by my IDE which is not detected as a problematic code
35
00:02:48,360 --> 00:02:51,530
and which therefore will now however cause an issue
36
00:02:51,610 --> 00:02:55,610
once our app runs because now I'm doing something invalid here
37
00:02:55,690 --> 00:03:03,460
when our application is running, so we will get a runtime error. So let me restart the quiz here and now
38
00:03:03,530 --> 00:03:08,390
whilst we don't get an error message here, sometimes you also get error messages projected right into
39
00:03:08,390 --> 00:03:09,440
your app
40
00:03:09,440 --> 00:03:15,590
user interface. Whilst that is not the case here, we do get an error here in the debug console and that's
41
00:03:15,590 --> 00:03:22,280
good because whilst this always looks scary when you see the first time, it actually holds useful information
42
00:03:22,280 --> 00:03:24,470
that allows you to fix that error.
43
00:03:24,470 --> 00:03:31,790
Now the important thing you have to know here is that for Flutter errors, the most helpful messages or
44
00:03:31,790 --> 00:03:37,340
the most helpful things are always located at the top, at the beginning of the error message.
45
00:03:37,880 --> 00:03:43,460
So let's scroll up all the way to the beginning of the error message and then here, we see that a range
46
00:03:43,490 --> 00:03:44,780
error was thrown,
47
00:03:44,780 --> 00:03:45,650
okay
48
00:03:45,770 --> 00:03:52,870
and that we have some invalid value which is not in the range 0 to 2, the value seems to be 3,
49
00:03:52,880 --> 00:04:00,410
something like this. Maybe at this point of time, you already have an idea what could be wrong and with
50
00:04:00,410 --> 00:04:05,330
time, you get more and more experience and you see more and more errors and then it's pretty clear that
51
00:04:05,330 --> 00:04:12,590
a range error always means that you tried to access some element in the list or in a map or anything
52
00:04:12,590 --> 00:04:19,640
like that which doesn't exist there. But in case you're not entirely sure what happened or you know what
53
00:04:19,640 --> 00:04:25,400
happened but you have multiple lists in your application and you want to find out which concrete code
54
00:04:25,400 --> 00:04:27,650
snippet caused the error,
55
00:04:27,650 --> 00:04:35,210
you can look a bit further down and then you see that it was located in the MyAppState class and there,
56
00:04:35,210 --> 00:04:43,250
in the answer question method and it even gives you the concrete line number, 68 and then you
57
00:04:43,250 --> 00:04:48,260
can go to your code, you can even click on that line here by the way, you can click on that line and you
58
00:04:48,260 --> 00:04:48,500
see
59
00:04:48,500 --> 00:04:48,950
okay,
60
00:04:48,980 --> 00:04:51,350
this is the line that caused the error
61
00:04:51,350 --> 00:04:57,380
and now you can analyze what's the problem and here of course, the problem is not the line itself but the
62
00:04:57,380 --> 00:05:01,830
line before that where I set the index to an invalid value.
63
00:05:01,910 --> 00:05:07,870
Now this is how you should work with such error messages and how you should read them.
64
00:05:07,970 --> 00:05:11,620
Don't run that way when you're getting an error, read the error message,
65
00:05:11,630 --> 00:05:18,410
the most important part is located at the top typically, analyze the file and the line at which it is
66
00:05:18,410 --> 00:05:24,560
pointing you and find out what could be wrong there and take this as a starting point for searching
67
00:05:24,680 --> 00:05:24,950
the error.
7456
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.