Preview
Video Player
00:00
00:00
Debugging Variables with Google Chrome
4:38In this video we'll pause the execution of our program and use various tools to inspect and modify values in our running program.
My application is running and
I can visit any URL.
0:00
And the execution of
the program is imposing,
0:06
that's because we haven't specified
a place in the code, we want it to post.
0:08
Let's identify where we want to
post the execution in our code,
0:13
head over to the sources tab,
and select app.js.
0:18
If you take a look at lines 36 to 43,
this is where the URL
0:26
handler that takes the user string
from the URL and reverses it.
0:31
The URL handler seems like an appropriate
place to post the applications execution.
0:36
To pause the application we
need to use a breakpoint.
0:41
To create a breakpoint,
0:45
click the line number where you
want the execution to pause.
0:46
I'm clicking lines 38,
0:50
since that's where the programming
around the string reversal happens.
0:51
Let's visit localhost 3000 and
0:56
then click on Joel See how the page
is stuck in this loading state.
0:59
That's because the application is paused.
1:08
Their request to the Express
server is still open, and
1:11
the response hasn't been sent back yet.
1:14
Head back over to the Google
developer tools, and
1:17
you can see that the line is highlighted,
where the breakpoint is
1:21
the highlighted line is how you know
that the application is paused.
1:25
On the right hand side we have
several panels that aid in debugging.
1:30
The call stack shows
the full list of functions,
1:34
in order to get to the break point this
is quite noisy, and is only used rarely
1:37
when you don't understand when or
why something is being called.
1:42
Let's use the disclosure indicator or
1:47
the small triangle to close
the call stack details, the scope
1:49
panel shows the variables available
in the scope of the current line.
1:54
As you can see,
we have access to the request and
2:00
response, which are the variables
passed into the route handler, and
2:03
the two constant variables reversed and
original.
2:08
They are both currently undefined.
2:12
You may be asking, why is
2:15
original undefined where breaking on
the line where original is being declared.
2:17
That's because the break point pauses
before the evaluation of the line,
2:23
by posing before the evaluation of the
statement, allows you to see the state of
2:29
the application before, and
after the execution of the line.
2:33
A handy way to see the evolution of
a value is to use the watch panel.
2:38
As the number of variables
in the scope panel increase,
2:43
it may be difficult to keep track of
what you actually want to look at,
2:47
in the watch panel you can press the add
expression button, to add your variable.
2:51
I'm adding original, the watch panel
isn't limited to variables either,
2:57
as it can be used for
any JavaScript expression, for
3:03
example, I could check and
raise length over time,
3:07
deeply nested value something like,
request.params.
3:11
.userString.
3:18
Any JavaScript expression can be put here.
3:21
Let's just have the variable
original monitored for now.
3:24
To remove the request.params.userString
3:27
click on the minus symbol
right at the end here,
3:32
to execute the line of code work
currently on, click the step over button.
3:36
Which is a dot with an arrow around it.
3:41
As you can see, original has updated
the value in the watch panel.
3:47
And in the scope panel tell you.
3:53
Another way to interact with variables
is going to the console, and
3:55
typing in JavaScript code there.
4:00
For example the original,
is equal to the string joel.
4:02
You can even overwrite the value too.
4:09
I can set original, to equal Andrew.
4:12
Once you're done with your experiment
hit the resume script button.
4:21
Now the response is finished.
4:26
And werdna, which is Andrew backwards
is on the web page not Joe backwards.
4:30