1
00:00:02,290 --> 00:00:07,930
Now I removed the breakpoint here and now that we saw the debugging tools in action, let's have a closer

2
00:00:07,930 --> 00:00:10,590
look at these debugging overlays

3
00:00:10,600 --> 00:00:14,630
we can open on these virtual devices or on real devices too.

4
00:00:14,680 --> 00:00:18,430
So on Android, again you open it with command or control m

5
00:00:18,520 --> 00:00:23,440
and first of all I'll stop at remote js debugging. You always need to stop this once you're done and

6
00:00:23,440 --> 00:00:28,390
you should stop it when you're not in need of it anymore because it slows down your app

7
00:00:28,420 --> 00:00:34,360
even if it's running and now let's see which other cool things we can see there. For example we can reload

8
00:00:34,360 --> 00:00:38,780
the app, simply reload it in case it got stuck somehow,

9
00:00:38,830 --> 00:00:44,350
you can also disable live reloading which is this automatic reloading when you change something in

10
00:00:44,350 --> 00:00:44,990
code.

11
00:00:45,250 --> 00:00:50,860
You can try enable hot reloading which means it will try to reload parts of the screen that changed

12
00:00:50,860 --> 00:00:52,600
without reloading the entire app

13
00:00:52,600 --> 00:00:59,260
after saving a file, the default is that it reloads the entire app and often hot reloading doesn't work

14
00:00:59,260 --> 00:01:02,700
in exactly the way it should work which is why it's not enabled by default.

15
00:01:02,770 --> 00:01:04,900
So I'll also go with live reloading here

16
00:01:04,900 --> 00:01:10,420
but you can play around with that and then we get these three other things down there, where especially

17
00:01:10,420 --> 00:01:14,060
the inspector and performance monitor are very interesting.

18
00:01:14,080 --> 00:01:16,370
Let's start with the performance monitor.

19
00:01:16,480 --> 00:01:22,090
If you enable this, you get this overlay which basically informs you about the performance you are having

20
00:01:22,090 --> 00:01:27,350
and there you can see at how many frames your app is running, how many frames were dropped and so on.

21
00:01:27,370 --> 00:01:31,570
Now please be aware that the performance you are seeing here is not the final performance of your app

22
00:01:31,600 --> 00:01:34,610
though because it's still in development mode,

23
00:01:34,690 --> 00:01:39,970
we're not having the debugger attached but development mode also means that there is a lot of overhead

24
00:01:39,970 --> 00:01:40,890
in your code,

25
00:01:41,050 --> 00:01:46,510
for example the overlay you're seeing here which is part of the app so to say, which makes your apps slower

26
00:01:46,510 --> 00:01:48,120
than it would typically be.

27
00:01:48,130 --> 00:01:54,010
So this can be an indicator but it's not the final production ready testing you should do.

28
00:01:54,160 --> 00:02:00,520
Still, it can be nice, here you open it with command d on iOS, it can be nice to look into this and get

29
00:02:00,520 --> 00:02:06,600
a feeling for how your app is behaving and how it's performing, how much memory is consumed and so on.

30
00:02:06,640 --> 00:02:13,900
This can also help you spot memory leaks if this value for example is going up and up and you are occupying

31
00:02:13,900 --> 00:02:15,820
more and more memory on the device.