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
Join me in this exciting video as we harness the power of ChatGPT, the AI coding assistant, to debug our code. Discover how AI can revolutionize your debugging process and help you squash those pesky bugs in record time! Whether you're a seasoned developer or just starting out, this video showcases the potential of AI-driven debugging.
ChatGPT
- ChatGPT website
- This video's ChatGPT History
Resources
- Build the RSVP App in DOM Scripting By Example
- Debugging JavaScript in the Browser
More Treehouse content
Click here for more AI content
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
[MUSIC]
0:00
Hi, I'm Laura, an instructor
here at Treehouse, debugging.
0:09
It's an essential part
of being a programmer.
0:13
We've all been there spending hours
tirelessly hunting down those
0:16
elusive bugs.
0:20
But you know what?
0:21
That feeling of triumph when you finally
conquer them is absolutely priceless.
0:22
However, I understand that sometimes
you're in a time crunch or
0:27
simply need some extra help.
0:31
That's where ChatGPT comes in.
0:33
Say hello to your new debugging companion.
0:36
Whether you're a seasoned developer or
0:38
just starting on your coding journey,
ChatGPT is here to lend a virtual hand,
0:41
helping you navigate those pesky
issues that can slow you down.
0:46
In this video, we'll ask ChatGPT
to help us debug an RSVP app.
0:50
If you'd like to follow along, make
sure to download the project files and
0:55
open them up in your favorite text editor.
0:59
Let's get started.
1:01
Currently, we're dealing with five
bugs that are causing unexpected
1:03
behavior in our RSVP app.
1:08
Bug number one, when I check or
1:10
uncheck the check box to confirm a guest,
nothing happens.
1:12
Ideally, the list item should
highlight when confirmed, and
1:17
lose the highlight when unchecked.
1:21
Moving on to bug number two, clicking
the checkbox to hide those who haven't
1:23
responded doesn't work as expected.
1:28
Instead of hiding unconfirmed guests, it
incorrectly highlights them as confirmed.
1:30
Now let's address bug number three.
1:36
Whenever a new name is omitted,
1:38
it mysteriously appears as text
instead of the actual name entered.
1:40
Definitely not the behavior
we're aiming for.
1:45
Which brings me to bug number four.
1:48
When I click the Edit button
to update a guest name,
1:51
the original name doesn't
appear in the input field.
1:54
This can be confusing and
needs to be more user friendly.
1:58
Lastly, we have bug number five.
2:02
Clicking the remove button
throws an error in the console.
2:04
Yikes, we definitely need to fix that.
2:08
Now, here's where ChatGPT
comes to the rescue.
2:11
We'll leverage the power of ChatGPT
to assist us in locating and
2:14
resolving these pesty bugs.
2:19
When debugging with ChatGPT,
it's important to strike a balance between
2:21
providing enough information and
avoiding overwhelming it.
2:26
My preferred approach is to
begin by describing the bug.
2:29
For example, I'm facing a bug in my code
where nothing happens when I check or
2:33
uncheck the checkbox to confirm a guest.
2:38
I expect the list item to
highlight when confirmed and
2:41
lose the highlight when unchecked.
2:45
To help ChatGPT pinpoint the bug and
provide specific guidance,
2:47
I'll share the relevant code.
2:52
In the app.js file, I'll copy
the event listener responsible for
2:54
handling the confirm checkbox.
2:59
And say to ChatGPT,
here's the event listener that handles
3:02
a confirmed checkbox,
followed by pasting the code.
3:07
Considering that this bug has something
to do with how I interact with the HTML,
3:11
I'll also share a sample
of the HTML code for
3:17
the list item from the index.html file.
3:20
I'll copy one of these list items and
tell ChatGPT,
3:24
here's a sample of how
the HTML looks like for
3:28
a list item, and paste the HTML code.
3:33
Let's take a look at ChatGPT response.
3:36
It also believes that my
code seems correct but
3:39
offers some pointers on what
to investigate further.
3:43
Firstly, suggest ensuring that the ul
variable is correctly assigned.
3:46
However, this cannot be the issue
because I have other event
3:51
listeners on the ul variable
that are functioning properly.
3:55
Next, ChatGPT suggest verifying
that the event listener code
3:59
runs after the ul tag has
been loaded into the DOM.
4:04
Since the ul tag is in the HTML file,
which loads before the JavaScript,
4:07
this cannot be the cause
of the problem either.
4:13
Lastly, it recommends checking the CSS
styles for the responded class.
4:16
However, this cannot be the issue because
our app initially loads correctly with
4:22
the confirmed guests highlighted and
the unconfirmed guests not highlighted.
4:27
Unfortunately, these suggestions
don't provide a solution.
4:31
However, ChatGPT does
provide a working example,
4:35
let's compare their
JavaScript code to ours.
4:39
Immediately I noticed that the list
item variable in their code has
4:43
an extra .parentNode at the end.
4:47
Let's add that to our code.
4:50
So on line 81, I'll add.
4:52
parentNode and save the file.
4:55
Now I'll reload our RSVP app, and test
to see if this modification fix the bug.
4:57
Fantastic.
5:03
When I uncheck the confirm box,
Ruby loses its highlighting, and
5:04
when I check it again,
the highlighting comes back.
5:09
Since ChatGPT didn't identify this
mistake, I'll let it know about the error
5:12
and ask for an explanation of why
this modification resolved the issue.
5:17
None of the suggestions you
provided resolved my bug.
5:22
However, I noticed that in
the working example you shared,
5:26
the list item variable
had an extra .parentNode.
5:30
I added that to my code and
it fixed the bug.
5:33
Why did adding the .parentNode to
the listItem variable solve my problem?
5:36
It apologized for the oversight and
5:43
proceed to explain why adding
the .parentNode fix the bug.
5:45
It turns out that since the checkbox was
inside a label element, my original code
5:49
was mistakenly adding the responded class
to the label tag instead of the li tag.
5:55
This clarifies why the highlighting
behavior wasn't functioning as expected.
6:01
So by adding the.parentNode twice,
you correctly navigate from
6:06
the input element to its parent label
element and then to the li element.
6:11
All right, let's do this again and
as ChatGPT to help us with the next bug,
6:17
where the invitees aren't filtered when
I check those who haven't responded.
6:22
Like we did before, I'll start by
letting ChatGPT know what our bug is.
6:27
I have another bug in my code.
6:33
When I click the checkbox to hide those
who haven't responded, instead of hiding
6:35
all the invitees who haven't responded,
it highlights all invitees as confirmed.
6:40
Let's now give ChatGPT the code
associated with this bug,
6:45
in app.js, I'll copy the event
listener that filters out
6:50
guests who haven't responded and
tell ChatGPT.
6:55
Here's the event listener that filters
out the guests who haven't responded and
6:59
paste the code underneath.
7:04
This time ChatGPT was able to
immediately point out my mistake.
7:07
It indicates that the issue
is in the if statement or
7:12
I check if the list item has
a class name of responded.
7:16
In the if statement,
7:20
I'm using the assignment operator
instead of the equality operator.
7:21
This explains the bug.
7:25
I was accidentally adding the class
name responded to every list item,
7:27
which explains why all invitees were
highlighted when I clicked the checkbox.
7:32
Instead, I should be
using three equal signs
7:37
to properly check if the list item
has a class name of responded.
7:40
Now let's save our changes and
check if this resolved our bug.
7:45
I'll refresh the page and
click the checkbox.
7:49
Nice, it worked like a charm.
7:52
The unconfirmed guests
are now hidden as expected.
7:54
And when I uncheck it,
all invitees appear.
7:58
Let's continue our debugging
journey with bug number three.
8:01
Whenever a new name is submitted,
8:05
it reads as text instead of the actual
name entered, I'll go back to ChatGPT and
8:07
write another bug in my code is when
I add a new invitee to the list.
8:13
The name appears as text
instead of the name submitted,
8:18
here's the function in my code
that creates a list item.
8:22
And in app.js I'll scroll down and
copy the function that
8:26
creates a new list item and
add it to our ChatGPT prompt.
8:31
All right, according to ChatGPT, the issue
in my code is when I create the span
8:35
element for the invitees name,
it seems that I accidentally set the text
8:41
content to the string text instead
of using the actual text variable.
8:45
Oops, let's fix this mistake.
8:50
So on line 59,
where I'm creating the span element for
8:54
the invitees name, ChatGPT is correct
in pointing out that I'm passing in
8:57
the string text instead of the variable
text that the function takes in.
9:02
I'll remove the single quotes
around text and save the file.
9:07
Now let's go back to the RSVP app, refresh
the page and add bro to the invitees list.
9:12
It worked perfectly.
9:19
Moving on to the last two bugs.
9:21
They involve the edit and remove buttons.
9:24
Currently clicking the edit button
displays an empty input field, but
9:27
what we actually want is for
9:32
the person's name to appear in the input
field to provide easier editing.
9:34
When attempting to remove an invitee,
it seems nothing happens on the surface,
9:39
but if we check the console,
an error is thrown.
9:44
This is our first bug
that throws an error.
9:47
This additional information should
help ChatGPT in pinpointing the issue.
9:50
I'll copy the air for reference.
9:55
Fortunately, both the remove and
9:58
edit buttons are implemented
under the same event listener.
10:00
This gives us an opportunity to test
if ChatGPT can help us solve both
10:05
bugs in one prop.
10:10
I'll tell ChatGPT there
are two more bugs in my code.
10:11
When I click the Remove button I get
this error and paste in the error.
10:15
Two when I click the Edit button
the input field is blank instead
10:20
of displaying the name of the invitee.
10:25
Now in App.js,
I'll scroll all the way down and
10:29
copy the entire event listener that
handles the remove, edit and save buttons.
10:32
Back in ChatGPT, I'll add to the prompt.
10:39
Below is a code that manages both of
these buttons and paste the code below.
10:42
All right,
let's address the remove button first.
10:49
ChatGPT suggests modifying the remove
action to remove the parent ul element,
10:52
which doesn't seem right.
10:58
Removing the ul element will
remove all invitees from the list,
11:00
which is not the desired behavior.
11:04
If we want the Remove button to remove
only the specific invitee associated
11:07
with it.
11:12
We'll provide ChatGPT with more
information about this bug shortly, but
11:12
let's see what it suggests for
the edit button first.
11:17
ChatGPT points out that the reason the
edit button isn't functioning correctly
11:20
is because I'm setting the inputs
text content property instead of
11:25
the value property.
11:29
Let's give this a try, on line 106,
11:31
I'll make the change from
input.txt content to input.value.
11:34
I'll save the file and
check if this resolved the issue.
11:40
When I click the Edit button now
the name appears in the input field.
11:44
Great.
11:48
Now let's return to
the Remove button issue and
11:49
provide ChatGPT with more information.
11:52
I'll type, your suggestion for
the edit button issue worked, but
11:55
your suggestion for
the remove button issue did not.
11:59
I do not want to remove the ul element.
12:03
I want to remove the li element,
that is the parent of the button element.
12:06
Here's the JavaScript code again.
12:11
I'll copy the event listener once more and
paste it into the prompt.
12:14
To provide more context, I'll also
share a sample of the HTML structure.
12:19
I'll add, and here's a sample of the HTML.
12:25
In the index.html file, I'll copy the ul
tag along with the first list item.
12:29
I'll paste them into the prompt and
include the closing ul tag.
12:36
It apologized for the confusion and
now it suggests rather than passing
12:41
the li as an argument, I can directly
access it within the function.
12:46
Let's give this a try.
12:50
On line 99,
I'll remove the li parameter so
12:52
that we're referring to the li variable
defined outside of the function.
12:56
I'll save this change.
13:01
Back in the RSVP app,
I'll refresh the page and
13:03
attempt to remove Ruby from the list.
13:06
It worked like a charm.
13:09
Fantastic.
13:10
And there you have it folks
with ChatGBT guidance,
13:12
we successfully debugged our RSVP app.
13:16
Now it's important to note that debugging
with ChatGBT may require a bit of back and
13:18
forth.
13:24
If ChatGBT doesn't get it right
on the first try, don't worry.
13:24
Describe your bug in a different way and
provide additional information.
13:28
In case ChatGPT suggestions
still don't address or issue,
13:33
here's one of my favorite tricks.
13:37
Simply close the chat and start a new one.
13:39
Since ChatGPT can remember chat
history starting fresh can
13:42
often help resolve any hangups.
13:47
Remember, the key is to work with ChatGPT
13:50
as if it's another developer
helping you debug.
13:52
If you don't fully understand why
a particular suggestion fix the bug
13:56
don't hesitate to ask ChatGPT for
an explanation.
14:01
If you'd like to see how we would
debug this RSVP app in the browser,
14:04
check out our debugging JavaScript
in the browser workshop.
14:09
Additionally, if you're interested in
building the RSVP app or exploring more
14:13
DOM scripting examples, are DOM scripting
by example course is a fantastic resource.
14:18
I added a link to both in the teachers
notes, happy coding and happy bug hunting
14:23
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