Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we'll pause the execution of our program and use various tools to inspect and modify values in our running program.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up