1
00:00:02,300 --> 00:00:06,340
Now sometimes, console log alone doesn't get you that far,

2
00:00:06,380 --> 00:00:11,270
you need more help and in such cases, you can debug your code remotely.

3
00:00:11,270 --> 00:00:17,750
Now for that, you need to open the debugging menu on these emulators or on real devices too if you you're

4
00:00:17,750 --> 00:00:23,650
working with those. You do that by pressing on the iOS simulator, command

5
00:00:23,660 --> 00:00:34,030
d and it will open this menu here, on Android, you press command or control m and it will open this menu.

6
00:00:34,030 --> 00:00:38,360
Now you see some options there and we'll have a look at the important ones throughout this module.

7
00:00:38,360 --> 00:00:41,780
The option we'll now choose is debug js remotely.

8
00:00:42,050 --> 00:00:48,290
If you press this, a new tab should open up in the browser which automatically navigated to localhost

9
00:00:48,680 --> 00:00:54,700
1901 in my case here, slash debugger UI, that should open automatically. Now for this

10
00:00:54,690 --> 00:01:01,160
to work correctly, make sure that in your expo dev tools, you have setup the connection to be alarm or

11
00:01:01,160 --> 00:01:08,490
local, not tunnel otherwise this will be super slow and now what this debugger yields you, this

12
00:01:08,500 --> 00:01:13,650
new tab is that you can open the Chrome developer tools now with the shortcut you should be seeing here

13
00:01:14,790 --> 00:01:19,890
and there, you now also see the same console log you're getting here, so you now also have another

14
00:01:19,890 --> 00:01:25,320
console you can look into which might be more convenient to work with, just to quickly show that example

15
00:01:25,320 --> 00:01:26,930
with the course goals again.

16
00:01:26,940 --> 00:01:36,290
If I console log my course goals here and I save this, this rebuilds and now we see the array here and we

17
00:01:36,290 --> 00:01:37,040
can expand it.

18
00:01:37,040 --> 00:01:39,050
So this might be a bit more convenient to work with,

19
00:01:39,140 --> 00:01:41,420
basically as you know it from web development

20
00:01:41,420 --> 00:01:44,760
in case you're a web developer but you can also do more.

21
00:01:44,780 --> 00:01:50,570
You can dive into sources for example to dive into your source code and set breakpoints. There simply

22
00:01:50,570 --> 00:01:56,870
expand this debugger worker js thing here, expand these folders and you'll find the folder structure

23
00:01:56,900 --> 00:01:58,750
you're also working with,

24
00:01:58,820 --> 00:02:05,000
for example there in your users folder here, you'll find the app.js file, you find the components.

25
00:02:05,450 --> 00:02:10,950
So now in app.js if you open that file, you'll see your code as you wrote it,

26
00:02:10,960 --> 00:02:12,510
so in the uncompiled version

27
00:02:12,550 --> 00:02:15,560
which is great because it's easy to recognize your code there

28
00:02:15,700 --> 00:02:21,880
and now here, for example let's say you want to stop the code when you're about to add a new goal,

29
00:02:21,880 --> 00:02:25,350
you can add a breakpoint by clicking on the left of the line number here

30
00:02:25,360 --> 00:02:27,370
so that you have this blue mark

31
00:02:27,370 --> 00:02:32,730
and now your code execution will stop the next time you hit this code line here.

32
00:02:32,830 --> 00:02:36,930
Now I enabled debugging on the Android emulator, so it will not stop

33
00:02:36,940 --> 00:02:39,980
if I try it on iOS, it will stop if I try it on Android.

34
00:02:40,000 --> 00:02:47,500
We could have enabled it on iOS too, here with debug remote js but I didn't do that, so let's go with

35
00:02:47,500 --> 00:02:48,250
Android.

36
00:02:48,310 --> 00:02:49,800
You can ignore this warning here,

37
00:02:49,840 --> 00:02:57,340
you can simply dismiss it and now press add new goal and maybe enter learn React Native, click add and

38
00:02:57,340 --> 00:03:04,030
now you see, this is getting stuck here because if you go back to the dev tools, this is now paused,

39
00:03:04,060 --> 00:03:06,580
you see this is now highlighted in blue,

40
00:03:06,670 --> 00:03:12,310
it's getting passed and now the cool thing is you can walk through your code step-by-step with these controls

41
00:03:12,310 --> 00:03:12,610
here,

42
00:03:12,760 --> 00:03:18,400
simply play around with them and you can also hover over things to look into your code, for example

43
00:03:18,400 --> 00:03:21,060
to see the current value in goal title.

44
00:03:21,070 --> 00:03:25,480
Now we can simply progress through these line step-by-step with this button,

45
00:03:25,480 --> 00:03:30,220
you can step into a function call with this button or step out of it with this button

46
00:03:31,210 --> 00:03:35,430
and you can always resume code execution with this blue play button.

47
00:03:38,030 --> 00:03:43,850
This can be a very powerful tool for really diving deeply into your code flow because it allows you

48
00:03:43,850 --> 00:03:45,810
to fully understand what's going on,

49
00:03:45,890 --> 00:03:51,240
to look into your values at runtime and to get full control over your code.

50
00:03:51,260 --> 00:03:56,960
Now if you want to learn more about how to use the Chrome debugging tools, you'll find a helpful link

51
00:03:56,990 --> 00:04:01,040
attached to this lecture which has more information about the Chrome debugging tools.