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
We'll look at a couple more features that are handy to know about: breaking when the DOM changes, and watch expressions. Watch expressions in particular can lead to a lot less typing by letting you "bookmark" values you want to keep track of.
Covered in this Video
- DOM-change breakpoints
- Watch expressions
Google Chrome's DevTools Documentation
DevTools has great documentation. Take time to work on some of the tutorials here to build on your knowledge!
RSVP App with New Bugs
Download a version of RSVP with different bugs from the ones we fixed in this workshop.
Below is a list of bugs in this app:
- Checking the box to hide unconfirmed guests hides confirmed guests. Unconfirmed guests stay visible. Unchecking the confirmed box unhides confirmed guests.
- Submitting new names to the list results in guests named "span" rather than the name submitted. Also, the new list item's children all have the wrong names.
- Clicking "Save" when editing a guest's name does not work.
- Clicking a remove button makes the button itself disappear.
- Checking a box to confirm an individual guest doesn't highlight the list item.
Note that fixing the bugs listed here may uncover other bugs that need attention. See if you can find and fix those bugs too!
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
There's just one last
bug we need to squash.
0:00
Watch what happens when
I click the edit button.
0:03
You can see that an input field appears,
but the name is not filled in.
0:08
This bug seems to be connected
to a change in the DOM,
0:13
the moment the input element
is added to the list item.
0:16
We can set break points that
trigger when the DOM changes.
0:20
First, let's find this list item in
the Elements tab by right-clicking and
0:24
choosing Inspect.
0:29
Now we can right-click on this
li element and choose Break on.
0:33
There are three options here.
0:37
We could break whenever
an attribute was changed on the li.
0:40
For example, when a class name is added or
0:44
removed from the element, or
when the element is removed entirely.
0:47
For example,
after we click the remove button and
0:52
the invitee is deleted,
the li element is removed.
0:56
In this case, we want to know when the
span with the person's name is removed or
1:01
an input is added.
1:06
Neither of these directly
change the li element.
1:08
Instead, they affect elements
nested inside the li.
1:11
These are referred to as
subtree modifications.
1:15
So we'll choose that.
1:19
A blue dot on the left indicates the break
point was just added to this DOM element.
1:22
It's hard to see, however, so I'll click
off this element to show it more clearly.
1:28
Let's test this out.
1:33
I'll refresh, Click the edit button.
1:34
And notice the program freezes on line 94.
1:41
This is just before the program
inserts the input element to the DOM.
1:45
At this point the element has been created
and is ready to be added to the DOM.
1:51
Let's look at the element to
find a clue about the bug.
1:55
I'll open my console by
pressing the escape key.
1:59
I'll type the constant input and
hit enter.
2:04
Can you spot the problem?
2:10
The name is placed inside
the input element, but
2:12
we actually want its value
property to point to the name.
2:16
Let's fix it in the console.
2:20
And now we'll step forward.
2:31
Now the name appears the way it should.
2:34
So we need to set the input's value,
not its text content.
2:37
Let's fix the code.
2:42
Down on line 93,
we want to change this to value.
2:46
I'll save this and preview in the browser.
2:51
Great, we fixed the bug.
2:57
Before we wrap up,
let me give you one last tip.
3:00
In this case, logging the value of
the input to the console may have
3:03
been the clearest way
to see the current bug.
3:07
There are oftentimes you may find
yourself typing a variable over and
3:10
over again as you try to debug a program.
3:14
You can alleviate this
with watch expressions.
3:18
I'll add the bug back into the program.
3:21
And switch back to dev tools.
3:26
Because I want to track the value
stored in the input element,
3:28
I can tell dev tools to watch that value.
3:32
Click Watch above the call stack and
then press the plus sign.
3:35
Now I'll type input.value and hit Return.
3:41
You can type any expression
here by the way.
3:48
That would include variable names,
3:51
equality checks, or
object properties as I'm doing here.
3:52
Anything that produces a value can
be monitored with watch expressions.
3:56
Let's see how this works.
4:01
To trigger the DOM break point,
I'll first refresh and
4:03
we'll need to start from the Elements tab.
4:07
When I click the edit button, we can see
that input.value holds an empty string.
4:10
If I go and fix the code.
4:18
And put value here instead,
Save and switch back.
4:24
Now with when I refresh and click edit.
4:32
You can see input.value
holds the correct name.
4:36
If you're just typing
a variable three times,
4:40
watch expressions may not save you time.
4:42
But if you have to cycle through 20 or
4:44
more times,
you'll be glad to know about this feature.
4:47
In this video,
4:51
you learned how to set of breakpoint
on a change to a specific DOM element.
4:52
You also learned how to use watch
expressions to eliminate the repetitive
4:57
typing of a variable.
5:01
Now I've introduced to you
some of the basic JavaScript
5:03
debugging features available to you.
5:06
The next time you need insight into
what's happening in a JavaScript project,
5:09
save yourself some time and frustration.
5:14
Take advantage of some of these time
saving features of dev tools we
5:17
covered here.
5:20
There are also many more features
I couldn't cover in this workshop.
5:22
So, check out the teacher's notes for
a link to the documentation.
5:25
If you'd like some more practice
with what you learned here,
5:29
try breaking the application yourself.
5:33
Or, better yet, having a friend break
the app and see if you can debug it.
5:35
Sharing snapshots of workspaces in
the Treehouse community would be a perfect
5:41
way to do this.
5:45
I'll get things started by providing
a version of the app with different
5:46
bugs than we fixed in this workshop.
5:50
Look for
a link to that in the teacher's notes.
5:52
That's it for now.
5:55
See you later and have fun.
5:56
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