Original subtitles

Now that we know how to launch the app on different devices,

let's dive deeper into which tools we have to effectively debug it and with debug it,

I mean things like solving errors, finding logical errors in our code and also things like checking what

is responsible for rendering the user interface in the way we see it, as well as some performance monitoring,

we can do all of that very conveniently with the help of Flutter and some special tools Flutter gives

us. So in our code here, what could go wrong?

There are different kinds of errors you can get when building a Flutter app.

One of the most common errors and thankfully, also a kind of error that is relatively easy to fix is

the syntax error,

for example, you might forget a semicolon from time to time. In such a scenario when you start your app

with or without debugging, it doesn't matter,

you should automatically get a complaint here and you can have a look at the errors you are getting

which you should also get here in your IDE and also here in Visual Studio Code

in the problems tab if you go there.

So there, it should already hint you at some of the obvious errors you might have in your code. So that's

relatively easy to fix.

In addition to that, you might also have errors which aren't recognized by your IDE but which pop up

when your app runs,

for example we might have an error where we add three to our current question index and the result will

be that we exceed the range of available indexes right after answering the first question because

we increment the index from zero to three, we only have three elements in the list,

as you learned, the list indexes start at zero,

so the index three would target the fourth list element which we don't have and therefore, this will cause

an error.

However the IDE doesn't pick up that error because it doesn't analyze the data we're working with and so

on,

we will get an error though once we run our application.

So here let me launch the application and then show you which kind of error we get and how you can resolve

such errors on your own when you get them.

With the app running here, once I click a button, we get to the results screen because we don't even try

to access an element with that index.

That changes however if I try to add some code here,

so here if I take my questions and I want to print the question item for the chosen question index, then

this again will be code which is accepted by my IDE which is not detected as a problematic code

and which therefore will now however cause an issue

once our app runs because now I'm doing something invalid here

when our application is running, so we will get a runtime error. So let me restart the quiz here and now

whilst we don't get an error message here, sometimes you also get error messages projected right into

your app

user interface. Whilst that is not the case here, we do get an error here in the debug console and that's

good because whilst this always looks scary when you see the first time, it actually holds useful information

that allows you to fix that error.

Now the important thing you have to know here is that for Flutter errors, the most helpful messages or

the most helpful things are always located at the top, at the beginning of the error message.

So let's scroll up all the way to the beginning of the error message and then here, we see that a range

error was thrown,

okay

and that we have some invalid value which is not in the range 0 to 2, the value seems to be 3,

something like this. Maybe at this point of time, you already have an idea what could be wrong and with

time, you get more and more experience and you see more and more errors and then it's pretty clear that

a range error always means that you tried to access some element in the list or in a map or anything

like that which doesn't exist there. But in case you're not entirely sure what happened or you know what

happened but you have multiple lists in your application and you want to find out which concrete code

snippet caused the error,

you can look a bit further down and then you see that it was located in the MyAppState class and there,

in the answer question method and it even gives you the concrete line number, 68 and then you

can go to your code, you can even click on that line here by the way, you can click on that line and you

see

okay,

this is the line that caused the error

and now you can analyze what's the problem and here of course, the problem is not the line itself but the

line before that where I set the index to an invalid value.

Now this is how you should work with such error messages and how you should read them.

Don't run that way when you're getting an error, read the error message,

the most important part is located at the top typically, analyze the file and the line at which it is

pointing you and find out what could be wrong there and take this as a starting point for searching

the error.