1
00:00:02,240 --> 00:00:09,740
Now there also is one thing in that developer overlay you can open which is extremely helpful for debugging

2
00:00:09,740 --> 00:00:11,030
your user interface

3
00:00:11,030 --> 00:00:17,780
and that's the toggle inspector option. To toggle this, you'll see this overlay at the bottom here

4
00:00:17,780 --> 00:00:22,710
and now you can click onto items in your user interface to get information about them,

5
00:00:22,730 --> 00:00:24,260
for example here the button.

6
00:00:24,260 --> 00:00:29,990
Now you see the margin around the button, the padding, you see its position in the component tree,

7
00:00:30,440 --> 00:00:35,130
you see some configuration of the button and you can also have a look at the surroundings and therefore

8
00:00:35,130 --> 00:00:38,780
get a feeling for why things are laid out on the screen

9
00:00:38,900 --> 00:00:45,200
they are. You can always close this again by opening the developer overlay and then again clicking toggle

10
00:00:45,200 --> 00:00:51,410
inspector and of course, that's also available here on iOS where you can also get a feeling for how

11
00:00:51,410 --> 00:00:56,180
things are positioned and why they are positioned in that way.

12
00:00:56,180 --> 00:01:02,670
However, there is an even better tool for inspecting this and therefore I'll close this here and that's the

13
00:01:02,690 --> 00:01:04,800
React Native debugger.

14
00:01:05,060 --> 00:01:10,580
You can search for React Native debugger and you should find this github page here

15
00:01:10,580 --> 00:01:18,280
and on this page, you can download the React Native debugger. You find installation instructions here

16
00:01:18,780 --> 00:01:21,070
and you can simply go to the release page in the end

17
00:01:24,380 --> 00:01:27,990
here to download one of these binaries for your operating system,

18
00:01:27,990 --> 00:01:35,070
so for Windows, exe file here, setup file, for macOS, a dmg file and so on.

19
00:01:35,070 --> 00:01:37,860
So these are different things you can download,

20
00:01:37,890 --> 00:01:46,460
I'll go with the dmg file to download the latest version here, save this and wait for this download to

21
00:01:46,460 --> 00:01:53,730
finish and then let me simply execute this and finish up the installation by simply walking through

22
00:01:53,730 --> 00:02:00,000
the installer or in my case here on macOS, simply dragging this into the applications directory and

23
00:02:00,000 --> 00:02:07,620
now it can open up the React Native debugger here and here it is. Now, it's not working right now because

24
00:02:07,620 --> 00:02:12,410
for this to work, you need to enable remote Javascript debugging on the devices,

25
00:02:12,420 --> 00:02:16,820
just what we did before to debug this in Chrome.

26
00:02:16,820 --> 00:02:22,270
Now this essentially replaces this Chrome debugging experience you could say or enhances it.

27
00:02:22,280 --> 00:02:30,140
Now with this opened up, press command t on Mac or control t on Windows or Linux in here to open a new

28
00:02:30,140 --> 00:02:38,690
tab and open and confirm that React Native debugger port which the Chrome tab also used before and

29
00:02:38,690 --> 00:02:46,730
confirm this and now it's trying to connect there and to make this succeed, open up your developer

30
00:02:46,730 --> 00:02:49,920
tools, let's say on Android now and debug Javascript remotely

31
00:02:50,000 --> 00:02:57,030
and now this should connect here and you'll see your console output here now in the debugger tools.

32
00:02:57,020 --> 00:03:05,240
You'll also see, if I expand this, that in sources, you can again dive into your code here if you want to just

33
00:03:05,250 --> 00:03:05,960
as before

34
00:03:06,650 --> 00:03:10,520
and the big difference of course is not that you can do this because that's the same you could do in

35
00:03:10,520 --> 00:03:15,770
the browser but that here, you now have the pretty neat tools here on the left.

36
00:03:15,770 --> 00:03:17,950
So you can still of course set breakpoints and everything

37
00:03:17,960 --> 00:03:23,480
but here, you now for one got your Redux debugging tools and we're not using Redux here, so they're pretty

38
00:03:23,480 --> 00:03:23,840
empty,

39
00:03:23,840 --> 00:03:28,790
nothing going on here but at the bottom, you have these elements debugging tool

40
00:03:28,790 --> 00:03:37,760
and this allows you to explore your React Native jsx code so to say, so your element, your component

41
00:03:37,790 --> 00:03:45,140
tree in this nice user interface which is definitely nicer than the inspector

42
00:03:45,140 --> 00:03:52,660
you could toggle here because now here, you really can have a look at what's going on. You can dive into

43
00:03:52,660 --> 00:04:00,200
the root component to then find our app component down there and in there, we find our view with that

44
00:04:00,200 --> 00:04:06,080
button, we can click on the button and we see the props that we're using on the button, like onPress

45
00:04:07,720 --> 00:04:09,170
and the title that we set.

46
00:04:09,250 --> 00:04:14,020
We can click on our own component where we see the props we're forwarding there, we can even change the

47
00:04:14,140 --> 00:04:18,720
visible prop to toggle this modal like this if we want to, so

48
00:04:18,790 --> 00:04:20,220
that's really nice.

49
00:04:20,290 --> 00:04:25,070
We see the hooks we're using in there, like the state we're currently managing in our component

50
00:04:25,150 --> 00:04:31,540
and if I open that modal here, you see that state, the props here changes

51
00:04:31,540 --> 00:04:37,870
and if I start typing here, like learn React Native, you'll see that this also updates here on the

52
00:04:37,870 --> 00:04:39,220
right, like

53
00:04:39,280 --> 00:04:42,730
slight delay but that shouldn't be an issue, so that's really neat.

54
00:04:42,820 --> 00:04:46,600
We can add this and see the state changes here,

55
00:04:46,600 --> 00:04:51,340
we can of course dive deeper into our goal input to see the modal here.

56
00:04:51,400 --> 00:04:57,490
You can explore the FlatList and what's configured there and dive deeper into this view if you want

57
00:04:57,490 --> 00:05:04,600
to, so really a lot of stuff you can do there and you can overall explore your component tree there to find out

58
00:05:04,660 --> 00:05:10,780
what's going on. On elements where you directly added a style, like on the surrounding view for example

59
00:05:10,780 --> 00:05:11,970
where I set this padding,

60
00:05:11,980 --> 00:05:17,320
you can even inspect the style and not just see the style but also change it, for example to increase

61
00:05:17,320 --> 00:05:18,960
the padding or reduce it

62
00:05:19,030 --> 00:05:24,010
and this gives you an easy way of testing different looks and layouts on the screen to find out what's

63
00:05:24,010 --> 00:05:27,190
looking good for you and what you want to change.

64
00:05:27,250 --> 00:05:33,310
You can also go to the profiler tab here and start a profiling session, then do something on the screen

65
00:05:33,310 --> 00:05:39,760
like open and close the modal and stop this and you'll get the default React dev tools experience here

66
00:05:39,760 --> 00:05:45,400
where you see which of your components were repainted and you can dive into that to get an idea for

67
00:05:45,400 --> 00:05:51,640
what was repainted, which props it had at the time and how many re-render cycles you had to

68
00:05:51,640 --> 00:05:57,070
for example find out if there are unnecessary repaint going on, obviously a bit of a more advanced thing

69
00:05:57,070 --> 00:06:02,800
to do and something you might want to do when you're closer to finishing up your app, to make sure you're

70
00:06:02,800 --> 00:06:08,230
optimizing performance and you're avoiding unnecessary re-render cycles but these tools can really be

71
00:06:08,230 --> 00:06:13,870
helpful for spotting little issues in your app and for making sure that everything is working in the

72
00:06:13,870 --> 00:06:16,360
way it should work in your app.

73
00:06:16,360 --> 00:06:20,890
Now one other cool thing you can do with the React Native debugger, you can right click anywhere here,

74
00:06:21,130 --> 00:06:24,110
let's say here and you can enable network inspect

75
00:06:24,250 --> 00:06:29,800
and if you do this, then you can go to the network tab and you'll see outgoing network requests.

76
00:06:29,800 --> 00:06:35,770
Now these are all just debugging related requests but later in the course when we'll add our own network

77
00:06:35,770 --> 00:06:42,070
requests, where we send requests to our own web server, we can even inspect those here and look into them

78
00:06:42,070 --> 00:06:47,140
and see if we're sending and receiving the right data, something which is otherwise pretty hard to do with

79
00:06:47,380 --> 00:06:48,560
native apps, here

80
00:06:48,580 --> 00:06:55,480
it's a breeze. So React Native debugger really is a cool tool for looking into your app, for setting breakpoints,

81
00:06:55,720 --> 00:07:02,860
viewing the console, viewing your component tree, viewing the styles you're using there and so much more. It

82
00:07:02,860 --> 00:07:10,570
really allows you to dive deeply into your application code, into your UI, into your logic and find out

83
00:07:10,660 --> 00:07:15,490
if everything is working the way it should work and you can even go in here and change certain things

84
00:07:15,490 --> 00:07:21,220
like the styling as you saw, to experiment with different settings and find out where you need to tweak

85
00:07:21,220 --> 00:07:23,380
your app for it to work correctly.