In the last video, you got to see a little bit about how scopes work in Angular.

In this video, we're going to install two really useful tools to explore scope and

debug Angular applications.

These tools will make your life a lot easier as an Angular developer, and

will help you to understand the technology better and better.

I have my browser open in front of me, and

as you can see, I do all my development in Chrome.

Firefox is also a great option for you to develop with.

I'll now introduce two Angular plug-ins that you can use in Chrome and

then I'll introduce one that can be used in Firefox.

The two plug-ins you should use in Chrome are ng-inspector and AngularJS Batarang.

You can install both of them by going to preferences.

Extensions.

And then get more extensions.

Here's ng-inspector.

Here's AngularJS Baderang.

After you have ng-inspector installed,

you'll have an icon in the top of your browser window that looks like this.

Click it and let the magic begin.

With ng-inspector, I can see all of the scopes and

associative variables right on the screen.

In our to-do list app, things are pretty simple so far.

We have our main controller.

And we have our hello console function.

Additionally, there's one more thing you've not seen yet, the root scope.

We'll take a look at root scope in the next video.

For now let's get the rest of our tools installed.

After you've installed Angular JS Batarang,

you'll have an entirely new tab in your developer tools.

In this tab there are some useful tools for

advanced debugging strategies that we won't go over in this course.

What I do want you to be aware of is what I find to be one of Batarang's most useful

features, the ability to access Angular variables straight from the console.

To do this, let's click on an element In the elements tab.

Now I have access to the scope by typing it into the console.

Notice when I have the main controller element selected,

I have access to the hello world method.

However, when I move outside of the main controller scope.

There's still a scope associated with the body tag,

but I no longer have access to the hello world function because I'm not

within the main controller where the function is defined on the scope.

Jumping over to Firefox, there's a plugin called AngScope which is really useful.

To use it, you need to install Firebug and then you need to install AngScope itself.

When you're finished, your add-ons tab should look like this.

There's AngScope and there's Firebug.

With AngScope installed,

when I Ctrl Click on an element, I'm able to say inspect angular scope.

Now I have access to an element's scope and I can see any associated functions.

The other way to grab an element, is to select it directly from the HTML tab.

Ctrl + click.

And I have access to the same exact set information.

Just like our Chrome tools, I can now get a look at how our values and

methods are being assigned in the scope.

I hope you've enjoyed a little bit of exposure to some of the super important

tools you have access to as a developer.

Remember, finding ways to make software developement easier and

faster is really important.

As a developer,

how you work can often times be as important as the things you're working on.

Next we're going to take a deeper look at the concept of scope in Angular.

Great work so far.