Preview
Video Player
00:00
00:00
Stepping Through Async Code
3:29Use the Chrome DevTools debugger to step through the code you've written and highlight the flow of code execution.
Now I'm going to use the Chrome Dev Tool's
debugger in the Sources panel to step
0:00
through the code we've written so far and
highlight the flow of code execution.
0:04
From the EventListener handler
to the AJAX onload callback,
0:07
to the anonymous function that's
passed to get JSON, and so on.
0:11
Stepping through code is when
you execute code one line or
0:15
function at a time to observe
changes in the data and in the page,
0:19
which helps you understand exactly
what's happening in your program.
0:22
It's also incredibly helpful for
debugging code.
0:26
In the sources panel I'll set
what's called a breakpoint,
0:29
which is the spot in the code you want
to pause execution of the program.
0:32
I'll set a breakpoint by expanding this
list of Event Listener Breakpoints on
0:36
the right.
0:41
And these are the types of
events we can break on, or
0:41
pause execution when an event occurs.
0:44
I want to pause when the View
button is clicked so
0:46
I'll open the list of Mouse events and
select click.
0:50
Now I can click the button on the page and
0:55
see that the program is paused
on event listener BUTTON.click.
0:58
The Call Stack pane here
represents the current call stack,
1:02
which is keeping track of
the order a function calls.
1:05
We see that the event listener's
anonymous callback function was added
1:08
to the Call Stack.
1:13
So now I'll use the Step over next
function call and Step into next function
1:14
call icons to execute what happens in each
function call, one statement at a time.
1:20
So every time getJSON is invoked,
as you can see here in Call Stack,
1:26
it fires off an AJAX request to a server.
1:31
It's going to wait for response from
the server and the requested data before
1:35
it can move forward with the rest of
the code without blocking other tasks.
1:40
Remember, the request is handed off to
a web API to be processed asynchronously.
1:45
In fact, in the Call Stack pane,
1:50
notice how xhr.onload was
registered as an async task.
1:53
When the JavaScript engine encounters
a network request, it says, hey, browser,
1:57
request this data while
I do something else.
2:02
When the data comes back let me know and
only then I'll do something with it.
2:05
So here it's making the first
call to the open notify API.
2:09
If the request succeeds and the results
are ready, the async task gets put on
2:16
the call back queue then pushed on
to the call stack to be executed.
2:20
So now you see that the first
AJAX call is complete.
2:24
And the program moves on to
getJSON's anonymous callback,
2:27
where the map method inside
it calls getJSON based on
2:31
the number of people returned,
in this case, six times.
2:34
So there's the next call to getJSON,
which is the first Wikipedia API call.
2:37
And we see another async task
registered in the callback pane.
2:44
Once it gets the requested data,
2:49
it calls the generateHTML function
to create the DOM elements.
2:51
The program then runs
through the same sequence
2:56
five more times to get all the Wikipedia
data and generate the HTML.
2:59
Once it gets all the data,
the program finishes execution.
3:06
Now, we don't always know if the API
requests are going to be successful or
3:10
not, but
3:14
the getJSON function nonetheless waits for
a response without blocking the thread.
3:14
In this case all the data
returns rather quickly.
3:19
To learn more about using the debugger and
stepping through your code,
3:22
check out the resources posted in
the teacher's notes with this video.
3:25