1
00:00:00,220 --> 00:00:04,068
Now I'm going to use the Chrome Dev Tool's
debugger in the Sources panel to step

2
00:00:04,068 --> 00:00:07,985
through the code we've written so far and
highlight the flow of code execution.

3
00:00:07,985 --> 00:00:11,836
From the EventListener handler
to the AJAX onload callback,

4
00:00:11,836 --> 00:00:15,920
to the anonymous function that's
passed to get JSON, and so on.

5
00:00:15,920 --> 00:00:19,113
Stepping through code is when
you execute code one line or

6
00:00:19,113 --> 00:00:22,704
function at a time to observe
changes in the data and in the page,

7
00:00:22,704 --> 00:00:26,785
which helps you understand exactly
what's happening in your program.

8
00:00:26,785 --> 00:00:29,657
It's also incredibly helpful for
debugging code.

9
00:00:29,657 --> 00:00:32,961
In the sources panel I'll set
what's called a breakpoint,

10
00:00:32,961 --> 00:00:36,870
which is the spot in the code you want
to pause execution of the program.

11
00:00:36,870 --> 00:00:41,199
I'll set a breakpoint by expanding this
list of Event Listener Breakpoints on

12
00:00:41,199 --> 00:00:41,861
the right.

13
00:00:41,861 --> 00:00:44,660
And these are the types of
events we can break on, or

14
00:00:44,660 --> 00:00:46,817
pause execution when an event occurs.

15
00:00:46,817 --> 00:00:50,123
I want to pause when the View
button is clicked so

16
00:00:50,123 --> 00:00:53,852
I'll open the list of Mouse events and
select click.

17
00:00:55,858 --> 00:00:58,309
Now I can click the button on the page and

18
00:00:58,309 --> 00:01:02,400
see that the program is paused
on event listener BUTTON.click.

19
00:01:02,400 --> 00:01:05,699
The Call Stack pane here
represents the current call stack,

20
00:01:05,699 --> 00:01:08,619
which is keeping track of
the order a function calls.

21
00:01:08,619 --> 00:01:13,528
We see that the event listener's
anonymous callback function was added

22
00:01:13,528 --> 00:01:14,824
to the Call Stack.

23
00:01:14,824 --> 00:01:20,416
So now I'll use the Step over next
function call and Step into next function

24
00:01:20,416 --> 00:01:26,656
call icons to execute what happens in each
function call, one statement at a time.

25
00:01:26,656 --> 00:01:31,624
So every time getJSON is invoked,
as you can see here in Call Stack,

26
00:01:31,624 --> 00:01:35,320
it fires off an AJAX request to a server.

27
00:01:35,320 --> 00:01:40,396
It's going to wait for response from
the server and the requested data before

28
00:01:40,396 --> 00:01:45,331
it can move forward with the rest of
the code without blocking other tasks.

29
00:01:45,331 --> 00:01:50,708
Remember, the request is handed off to
a web API to be processed asynchronously.

30
00:01:50,708 --> 00:01:53,359
In fact, in the Call Stack pane,

31
00:01:53,359 --> 00:01:57,924
notice how xhr.onload was
registered as an async task.

32
00:01:57,924 --> 00:02:02,730
When the JavaScript engine encounters
a network request, it says, hey, browser,

33
00:02:02,730 --> 00:02:05,282
request this data while
I do something else.

34
00:02:05,282 --> 00:02:09,820
When the data comes back let me know and
only then I'll do something with it.

35
00:02:09,820 --> 00:02:13,481
So here it's making the first
call to the open notify API.

36
00:02:16,397 --> 00:02:20,531
If the request succeeds and the results
are ready, the async task gets put on

37
00:02:20,531 --> 00:02:24,158
the call back queue then pushed on
to the call stack to be executed.

38
00:02:24,158 --> 00:02:27,427
So now you see that the first
AJAX call is complete.

39
00:02:27,427 --> 00:02:31,089
And the program moves on to
getJSON's anonymous callback,

40
00:02:31,089 --> 00:02:34,247
where the map method inside
it calls getJSON based on

41
00:02:34,247 --> 00:02:37,782
the number of people returned,
in this case, six times.

42
00:02:37,782 --> 00:02:44,404
So there's the next call to getJSON,
which is the first Wikipedia API call.

43
00:02:44,404 --> 00:02:49,461
And we see another async task
registered in the callback pane.

44
00:02:49,461 --> 00:02:51,871
Once it gets the requested data,

45
00:02:51,871 --> 00:02:56,533
it calls the generateHTML function
to create the DOM elements.

46
00:02:56,533 --> 00:02:59,282
The program then runs
through the same sequence

47
00:02:59,282 --> 00:03:03,210
five more times to get all the Wikipedia
data and generate the HTML.

48
00:03:06,985 --> 00:03:10,212
Once it gets all the data,
the program finishes execution.

49
00:03:10,212 --> 00:03:14,283
Now, we don't always know if the API
requests are going to be successful or

50
00:03:14,283 --> 00:03:14,800
not, but

51
00:03:14,800 --> 00:03:19,467
the getJSON function nonetheless waits for
a response without blocking the thread.

52
00:03:19,467 --> 00:03:22,364
In this case all the data
returns rather quickly.

53
00:03:22,364 --> 00:03:25,771
To learn more about using the debugger and
stepping through your code,

54
00:03:25,771 --> 00:03:29,251
check out the resources posted in
the teacher's notes with this video.