Developer Tools Console

[00:00:00]
>> Brian Holt: Think the first thing to say is congratulations, for many of you, you probably just wrote your first bit of code, right? That is executing in a browser. So you can see here if you've seen that 6,000 you are having code that is successfully being run in the browser.

[00:00:13]
And everything we're gonna do is just kind of variations thereof. I mean, variables are kind of the most fundamental concepts of programming in general. So this is really great, this is good progress.
>> Brian Holt: So that's what this is right here, this console. Whenever I say console.log here, wherever my experiments.js is, whenever you do that, this gets output here into this console in your browser.

[00:00:43]
This is very useful for debugging purposes. Cuz if you're going through and you're writing something, and something's not going the way that you expect it, you can put a console.log in there. It's like, what is actually contained in this variable at this point, right? So if I come down here and say, let's just make this let for a second.

[00:00:59]
And say, yearlyRent = 1, right? What do you think is gonna be output their on line 4? So if I go check my browser .what do you think is gonna be put into the console?
>> Speaker 2: 1?
>> Speaker 3: 6,000.
>> Brian Holt: Still gonna be 6,000. And saying that's gonna be 1 is a totally valid thought.

[00:01:22]
I try not to trick people, that was definitely a trick question, so sorry.
>> Speaker 3: I deserved it.
>> Brian Holt: Yeah, first of all, I hate teachers that try and trick you and give you trick questions, so I hate myself right now.
>> [LAUGH]
>> Brian Holt: So you have to remember this is executed procedurally, right?

[00:01:38]
So this goes from line 1, line 2, line 3, line 4. And line 4 here, when line 4 executes, yearlyRent was 6,000, right? And so now if I go down here and say console.log(yearlyRent) again, it'll say 6,000, then it'll say 1, right?
>> Brian Holt: As I said, this is very useful for debugging purposes, right?

[00:02:03]
And when I say debugging, what I mean is fixing my broken shit. [LAUGH] That's what I actually mean here.
>> Brian Holt: So to this day, I use console.log probably dozens of times a day. There are other more sophisticated debugging tactics. And I eschew all of them in order just to debug things by putting them out into the console.

[00:02:32]
Okay, any questions about that?
>> Brian Holt: Another thing that's kinda useful here. So let's say I was confused about both monthlyRent and yearlyRent, I can put actually, monthlyRent, yearlyRent. So notice this is a comma right there. And you can see here now if I refresh the page. By the way, when I refresh the page, I'm hitting Cmd+R, in Windows it's F5 or you can just click this little rotationally thing there.

[00:03:07]
>> Speaker 3: Ctrl+R works too.
>> Brian Holt: Does it?
>> Speaker 3: Yeah.
>> Brian Holt: I did not know that, that's cool. And it's forcing the code to reexecute, right? If I don't refresh the page, then the code does not reexecute. Now notice here that I have 500 and 600, so it's actually logging out both monthlyRent and yearlyRent, right?

[00:03:26]
So it's useful you can put multiple things in there. I was just showing you here that if you wanna see both monthlyRent and yearlyRent on the same line, you can just separate them by commas, right? And then that way you can see here that I'm doing 500 and 600.

[00:03:42]
So monthlyRent is 500, right? And yearlyRent is 600, right?
>> Brian Holt: So that's useful for debugging as well.