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
Let's review how to start the debugger, step into, step over and out of programs.
Learn more
- StringBuilder from Java SE tutorial
- StringJoiner JavaDoc (Great examples in the doc!)
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
So we've got a pretty
good looking project, but
0:00
it has a slight problem from
maintenance point of view.
0:02
There aren't any tests and
I was looking through the code a bit and
0:04
there doesn't seem to be too many comments
about the trickier bit of the code.
0:08
Really not even very sure what it's doing,
0:12
let alone if it's doing what it
was originally intended to do.
0:15
So here's what I think we should do.
0:18
Let's take a look at one of those issues
that our client filed for us to fix and
0:20
see if we can't try to walk through that
code to track down and remove the bug.
0:23
We'll do this by using the debugger.
0:27
Remember, this tool's name is
derived from the active debugging.
0:30
Removing bugs, which remember, this is
based on that Grace Hopper story of
0:33
fixing a problem by removing
an actual bug from the machine.
0:38
Sometimes in order to get the work done,
you just got to dive in.
0:42
Are you ready to take the plunge?
0:45
Okay, so
let's look at the project on GitHub.
0:48
Over here let's look at the Issues tab.
0:51
Our clients added a few issues here and I
wanna take a look at this first one here,
0:55
change the number of
examples on the home page.
0:59
Okay.
So
1:01
currently we're showing five
example terms on the home page, but
1:02
three would probably be better.
1:05
Also while you're in there can you
verify the count, the numbers seem off.
1:06
Sure.
Let's do that.
1:09
So let's take a look at
the home page first, right?
1:10
So let's go.
1:13
I've got, let's make sure that
our server is running here.
1:14
So yeah.
One of the things to do here is
1:22
to make sure that you kind of
know what's happening first.
1:23
Before you get in there,
so let's take a look.
1:28
Okay, so the home page,
these must be the terms here right, so
1:30
there's five JDK, YAGNI, SDK,
JRE, Java EE and eight more.
1:35
So this number must be what
they're talking about being off.
1:41
And this is five right?
1:43
One, two, three, four, five, okay.
1:44
Also check this out,
I don't think those are the same.
1:46
Cool, each time you come in
they're kind of random, right?
1:49
Every time I refresh we're getting
different versions of them there.
1:52
Okay, that seems doable.
1:55
Let's see if we can find that code.
1:58
So if we come here, that's the home page
and that's typically called index, right?
2:00
So we'll do shift, shift and
we'll just start typing index.
2:04
IndexController, beautiful.
2:07
Okay and, look right here,
in the request mapping for
2:09
forward slash, that sounds good.
2:13
So we wanna look at this code, we can walk
this code, try to figure out what is going
2:15
on with the issues and
we can do it by ourselves and
2:19
keep all the state in our brains,
but we don't need to, right?
2:22
The debugger can actually run this
line by line and we can pause it.
2:25
Now to pause it, what you do is you
place what's known as a break point and
2:28
you do that by clicking over
here in the gutter area.
2:31
So see I put a little stop sign there.
2:34
So what this means is if the server
is kicked off in debug mode,
2:37
when this line is run, things will pause
and wait for us to move until it's ready.
2:40
Want to do it?
2:44
Cool.
So
2:44
I'm gonna stop the existing
running server.
2:45
I'm gonna come up here under Run and
I'm gonna choose Debug.
2:47
Okay so now things are up and running and
now this is not yet paused, but
2:54
if we come over here and I refresh the
home page, right, some I'm gonna make it
2:58
go through that request mapping,
boom it paused right away.
3:02
You'll see here that
the line is highlighted and
3:06
this is what's ready to be run.
3:09
It's known as the execution point.
3:10
It hasn't yet been executed and
3:12
you can see everything here,
down here is in scope.
3:14
These are the variables that
are in scope currently, right?
3:17
So there's model came in.
3:19
These update as we move line to line.
3:22
So let's watch what happens.
3:24
So this line that we're on currently is
going to create a new string builder.
3:25
So let's allow that to happen.
3:30
Now, I'm going to do this.
3:32
I'm gonna,
down here in this debugger line here.
3:32
I'm gonna click this
step over button here.
3:34
And this instructs the debugger,
to execute the line and
3:36
move on to the next one.
3:40
So I press it and you'll see that the line
moves down to this FlashCard line here.
3:41
And if you look down
in the variables here,
3:46
you'll see that there's the ctaBuilder.
3:47
Which is the new string builder.
3:49
And of course if you're unfamiliar with
StringBuilder you can always use help,
3:51
just like you always could in the editor.
3:54
So if I come to StringBuilder here and
I press F1,
3:56
we'll see the help pop-up,
a little hard to grab.
3:58
But you can kinda read through here.
4:02
So, basically,
4:05
what these notes are getting at here is
that you'll find a string builder approach
4:05
found in loops where you're
trying to put strings together.
4:09
Now the reason that you'd want to use
this over a regular string concatenation,
4:11
you know where using the pluses,
this for memory purposes and
4:14
usually it's used to help increase
overall code readability.
4:17
Remember each time that you concatenate
a string using the plus sign,
4:21
in memory you were creating a brand new
string, which in a tight loop can get
4:24
pretty expensive as the old strings need
to get destroyed and things like that.
4:28
So I'm assuming that this string builder
4:32
is being used to build up the text that
was supposed to change on the home page.
4:36
I'm not quite sure what
this cta is just yet.
4:39
I know that cta stands for Chicago Transit
Authority, but that doesn't make any sense
4:43
in this area, so, but I'm sure
we'll find out what it is shortly.
4:47
I'm not gonna worry about it.
4:50
So looking at our current
execution point here,
4:52
it looks like it's just
gathering random cards and
4:54
I'm assuming, again I'm assuming,
that this five here is the number, right?
4:58
Cuz there's five cards that are out there.
5:02
But why don't we validate that?
5:04
Cuz we can, all right?
5:05
We're here.
We can do that.
5:06
So, I'd like to see the way that
this code uses this argument.
5:07
So, what I can do is instead of,
before I was doing step over,
5:10
which stepped over the line.
5:14
But you can actually step
into this method call.
5:15
So, I'm gonna do that.
5:17
I'm gonna click Step Into.
5:18
And you'll see here that I've
opened up a new file for us.
5:21
It's FlashCardServiceImpl.
5:24
I did this automatically.
5:26
We're in this getRandomFlashCards here.
5:27
And if you look down here in
the variables, you'll see this P.
5:30
That's for parameter, right?
5:33
So it was passed in.
5:34
And you'll also notice that the editor
is starting to be decorated.
5:36
This isn't in the file itself.
5:38
This is just written here
on the screen for us.
5:40
So it says amount is five.
5:41
Okay, so this first line here looks like
it goes and it finds all of the cards,
5:45
which is good.
5:48
So let's go ahead and we'll step that.
5:49
Okay, so
it looks like there's eight cards.
5:52
Okay, see it says cards size = 8 and then
we look down here and there's size = 8.
5:54
Then at quick glance, it shuffles them.
5:59
Right, it just does a shuffling.
6:02
It gets the first whatever amount was
passed in, it gets the first five.
6:04
Cool, that makes sense.
6:08
Yeah.
6:09
And then it creates a new list.
6:10
So, that's cool.
6:12
We should be good if we
change that to three.
6:13
That should work, right?
6:14
Now, since we don't need
to walk through this code,
6:15
cuz we just did kind of in our heads.
6:18
We kinda know what it's doing,
we are not really interested in it.
6:19
We can actually step out.
6:22
This kinda makes sense if
there's a lot of code there,
6:23
that you're like I understand
now what it's doing.
6:25
So, you can step out.
6:28
That's what this little arrow here
with pointing up at the angle there.
6:28
And that step out, moves us back to
where we were before we stepped in.
6:34
So, nice.
6:38
Now we're back where we were and
we can do a step over.
6:39
Cool.
And now we can see that there
6:43
are five cards.
6:44
And this is pretty cool.
6:46
Since there are cards I can now
highlight this and it will show,
6:47
just like down below in this little
plus thing, and I can open them up and
6:50
I can take a look at each one of them.
6:54
It's pretty handy it's
nice to have that in line.
6:56
So I could actually go and
change this five to three right now, but
7:00
I need to restart the server
to make things take effect.
7:03
But, for now, let's keep walking through
this code cuz I am dying to know what this
7:06
ctaBuilder is doing.
7:10
Now, you might have seen
the hotkeys we moused over these.
7:11
Step over is a great one to know, it's F8.
7:15
So if you press F8 on your keyboard,
you can just kind of move and
7:18
keep your vision on the screen, right.
7:21
So this next line here, we're going to
loop through each one of the cards.
7:23
This one is going to use
the append method to append and
7:27
you can see that it's going
to refresh your memory about
7:30
is the term here that it's gonna do and
it's going to append to that.
7:33
That's nice.
7:36
And then, wow, what is this doing?
7:36
So check this out.
7:40
When you don't know what's happening,
if you highlight, let's go ahead and
7:42
I'm gonna highlight this card.size here.
7:45
And you can press Cmd+Shift+F8, and
it will show you what's going on.
7:47
There's a setting that I have turned on
here that you might not have turned on and
7:54
I wanna show you cuz it's one of my
favorites and I always turn it on.
7:58
So if you come into
a IntelliJ Preferences and
8:01
you come down to Build, Execution,
Deployment and then Debugger and
8:04
then Data Views, there's this option here
for Show value tool tip on code selection.
8:08
So If you don't want that on,
you can do it with that command.
8:13
See, I always forget which is
why I have that turned on.
8:18
Cmd+Shift+F8.
8:20
So that will kick that off.
8:23
It's called a quick evaluate, but
it's super nice because I want to know,
8:24
it's calling a cards.get on
cards.size minus 1 which is 4.
8:29
What does that mean?
8:33
So what is cards.get?
8:34
You can highlight it all and see that
it does a quick evaluate across it and
8:37
I know, it's the last card.
8:41
So this is for to avoid the Oxford comma.
8:44
[LAUGH] Wow that could be
documented a little bit better?
8:46
Or maybe even use the new StringJoiner
class, see the teacher's notes.
8:50
Oaky, so we get it.
8:55
It goes through in and
it appends each one of these terms and
8:55
we don't really want to walk through it.
8:58
So we could add a new breakpoint
after this loop right?
8:59
So we could go down here and
put a new breakpoint in here, but
9:02
we might not want that breakpoint later so
why kind of litter up our breakpoints.
9:05
So there's another thing that you can do,
just click here and
9:10
you click Run to Cursor
which is this one here.
9:12
Boom, so all those lines ran,
and it came here and stopped.
9:16
Okay so it says refresh your memory about,
ba, ba, ba, ba, ba.
9:19
It's gonna append, and
it's gonna get the current count, and
9:22
it's gonna put in the total count there.
9:27
Refresh your memory about and eight.
9:32
And it's gonna append more.
9:35
Weird.
9:36
They're right.
9:37
It is off right, it's not eight more,
cuz theres eight total cards and
9:38
then it's gonna add cta.
9:42
By calling ctaBuilder.toString,
9:44
this is how you can do the build
pattern on the on the builder there.
9:45
Now we finally are creating the string.
9:49
[LAUGH] What is this cta?
9:50
Inquiring minds want to know.
9:52
Maybe something's in the template.
9:54
Let's take a look at the template, right,
so it's gonna turn this index template.
9:56
So if I do Shift+Shift, index.html.
9:59
Where is cta, call-to-action.
10:04
[LAUGH] I get it, we're building
the call to action on the page, cool.
10:06
So I think we got the fixes
at our disposal.
10:11
We're gonna change that thing to three,
10:15
and we're gonna make that
thing count properly.
10:16
Let's just stop the server like usual.
10:19
And I'm gonna take a quick break,
and I'm swing back and
10:22
fix this method with what we've
uncovered through our debugging.
10:24
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