Check out a free preview of the full Mastering Chrome Developer Tools course:
The "Variable Scope" Lesson is part of the full, Mastering Chrome Developer Tools course featured in this preview video. Here's what you'd learn in this lesson:

Before moving on to the solution to the second challenge, Jon takes a step back and reviews the Scope area in the debugging window. He then answer a couple audience questions about some of the inconsistent behavior of the developer tools.

Get Unlimited Access Now

Transcript from the "Variable Scope" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Speaker 2: One question from Dimitri is can you talk about the scope tab?
>> Jon Kuperman: Yeah, sorry I missed that before. So basically the scope tab, just lost it. At any point is just going to show you what you have in global and what you have in local scope. So global scope will just show you like a list of all the global variables, all the global properties that you have access to.

[00:00:26] A local scope can help you for those that have done Kyle Sampson's class here on understanding closures. So it'll help you understand what you locally have access to. This is going to be another great way to kind of help you understand the language a little bit better. So if you're like you have function fu and then inside you have bar and you've a break point in bar local scope will show you all of fu still.

[00:00:46] So it's just kind of like understanding what you have access to at this point in time. Hope that helps, let me know, if that's not clear enough. There were a couple of things, again, like it's just some finicky things, I think some people are like having jQuery obviously black boxed and it was still landing in jQuery.

[00:01:06] I'm not really sure. The only thing that seemed to kinda help was, like classic turn it off and on again, kind of approach of make sure all your break points are removed. So we're like kind of going in here and deselecting all these, closing all these files, refreshing the app and trying again.

[00:01:23] So if you're if you're getting stuck something like that you might wanna try that. We did have one that I couldn't figure out. Yeah, any other questions?
>> Speaker 2: Yeah from Richie. Are there any useful console commands that you use while debugging?
>> Jon Kuperman: Yeah. So when doing this kind of step through debugging I don't use the console additionally.

[00:01:47] The console API is pretty nice though, so you have access to more than just console.log so you have access. The next are two examples from how we're gonna look at console.time when you can actually see how long things take to execute. There are console warn and console error.

[00:02:07] I don't really use them, but those do exist. So yeah, I probably just use console log, console time and then the step through debugger, those are probably the only things that I use.
>> Speaker 2: Okay, and then.
>> Speaker 2: There's a threads panel just above the watch panel. I don't see it on mine.

[00:02:25]
>> Jon Kuperman: Yeah, so that is another finicky lovely thing. So that's reserved for web workers if you're doing service workers like and it's like maybe they're just different versions of Canary. For web workers if you're doing service workers and it's maybe they're just different versions of Canary. It's an experimental panel that they're messing with.

[00:02:40] I'm not gonna have time to cover service workers say, but they're really cool. You should check them out, but that's what that's gonna be for.