All language subtitles for 8. Getting Started with the Dart DevTools

So that's the debugger. By default,

I would recommend that you run your app without debugging though because the debugger injects some extra

logic into the running app and simply makes the app a bit slower and therefore, you have a faster development

cycle, you can work on your app faster, see updates faster if you start your app without debugging but

dive into debugging mode whenever you have a complex problem where you want to find out what's going wrong.

Now

that

all were tools however that helped us with finding and fixing errors in our code

but what if we want to have a look at our user interface and find out why elements are positioned the

way they are positioned or find out how performance of the application is.

For that, we have yet another tool we can use and for that in Visual Studio Code,

you can hit command shift p or control shift p on Windows to bring up that command panel and there

if you type Dart

DevTools, it should give you that option of opening the DevTools. Hit enter there,

maybe you also were prompted for it before in the bottom right corner,

that's also possible.

Once you hit enter there, a new tab should open up in your browser,

here in Chrome and that now is a webpage that is connected to your running emulator and gives you some

live insights.

For example here on the left, you see the current widget tree that you see graphically here in the emulator,

here is its data representation so to say and you can click on widgets there to learn more about them.

Here for example, you see the text that's inside this text widget, which is clearly the question text

here at the top and you can learn more about its settings, like the color, if it has a specific style and

so on and you can do that for all, you can do that for all these containers and so on, to learn how they

are configured. Now, at the moment at least, you can't change the configuration here but at least you get

a feeling for how your widget tree looks like and how it is configured.

You can also go into select widget mode here, activate this by tapping on it once and thereafter, you

can select widgets here in the emulator,

you can simply click on them like on this button and now it's selected. You see some helper lines that

show you how much space this widget takes up and how it is rendered and on the right side or in your

browser there, in the DevTools,

it is also automatically

selected then and you can learn more about it and how it is configured.

You even see, for example here for the button, how it is built internally by Flutter, that it uses a

couple of other Flutter widgets to build that button,

for example a container, a center widget and so on.

So here you can really have a deep dive into your user interface and see why it is built in the way

it is built. In case you're not interested in selecting widgets, here in this Flutter DevTools

or in this Dart DevTools browser window,

you can also click on debug paint here.

What this does is it add some helper lines here in your UI that basically helps you understand why your

app is laid out or structured in the way it is laid out or structured.

You see that for example this text here is centered, you see some helper lines around that button

widget which indicate that there seems to be some extra margin and so on, so that can be really helpful

for getting a feeling for why your app looks the way it looks like.

You can now also paint the baselines here which gives you some helper lines for the text baselines, can

be useful for aligning things that are sitting next to each other. So these are nice visual helpers here.

You also have a performance overlay which you can activate, which helps you understand how performance

of your application is, though be aware

that's performance in development mode on an emulator is never great and never as good as on a real device

once your app is built for production. So using it here in development mode is not really something I

would recommend because you get a wrong idea of how performant or unperformant your application is.

But once you build your app for production and you're testing this app, you can get a feeling for it

if you have any places in your app that you might need to tweak to improve performance, it's not something

we'll care about at the moment

though. What you also have here in the DevTools is an option to turn off that debug banner in the top

right corner, in case that was annoying to you and really useful,

the repaint rainbow and that's something I want to have a closer look at.