Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Tools for debugging JavaScript applications are really important. Being able to interactively explore an application’s methods and associated data while it is running can make development a lot faster, easier, and more fun. Because angular is unique in some very important ways, developers have built tools to make debugging angular apps easier. We’ll take a look at tools for Chrome and Firefox in this video.
-
0:00
In the last video, you got to see a little bit about how scopes work in Angular.
-
0:04
In this video, we're going to install two really useful tools to explore scope and
-
0:09
debug Angular applications.
-
0:12
These tools will make your life a lot easier as an Angular developer, and
-
0:16
will help you to understand the technology better and better.
-
0:20
I have my browser open in front of me, and
-
0:22
as you can see, I do all my development in Chrome.
-
0:26
Firefox is also a great option for you to develop with.
-
0:30
I'll now introduce two Angular plug-ins that you can use in Chrome and
-
0:34
then I'll introduce one that can be used in Firefox.
-
0:37
The two plug-ins you should use in Chrome are ng-inspector and AngularJS Batarang.
-
0:43
You can install both of them by going to preferences.
-
0:48
Extensions.
-
0:49
And then get more extensions.
-
0:54
Here's ng-inspector.
-
0:57
Here's AngularJS Baderang.
-
1:02
After you have ng-inspector installed,
-
1:05
you'll have an icon in the top of your browser window that looks like this.
-
1:10
Click it and let the magic begin.
-
1:13
With ng-inspector, I can see all of the scopes and
-
1:16
associative variables right on the screen.
-
1:19
In our to-do list app, things are pretty simple so far.
-
1:22
We have our main controller.
-
1:25
And we have our hello console function.
-
1:28
Additionally, there's one more thing you've not seen yet, the root scope.
-
1:32
We'll take a look at root scope in the next video.
-
1:35
For now let's get the rest of our tools installed.
-
1:38
After you've installed Angular JS Batarang,
-
1:41
you'll have an entirely new tab in your developer tools.
-
1:48
In this tab there are some useful tools for
-
1:50
advanced debugging strategies that we won't go over in this course.
-
1:54
What I do want you to be aware of is what I find to be one of Batarang's most useful
-
1:58
features, the ability to access Angular variables straight from the console.
-
2:03
To do this, let's click on an element In the elements tab.
-
2:09
Now I have access to the scope by typing it into the console.
-
2:16
Notice when I have the main controller element selected,
-
2:18
I have access to the hello world method.
-
2:23
However, when I move outside of the main controller scope.
-
2:29
There's still a scope associated with the body tag,
-
2:33
but I no longer have access to the hello world function because I'm not
-
2:38
within the main controller where the function is defined on the scope.
-
2:45
Jumping over to Firefox, there's a plugin called AngScope which is really useful.
-
2:51
To use it, you need to install Firebug and then you need to install AngScope itself.
-
2:57
When you're finished, your add-ons tab should look like this.
-
3:02
There's AngScope and there's Firebug.
-
3:05
With AngScope installed,
-
3:09
when I Ctrl Click on an element, I'm able to say inspect angular scope.
-
3:16
Now I have access to an element's scope and I can see any associated functions.
-
3:24
The other way to grab an element, is to select it directly from the HTML tab.
-
3:29
Ctrl + click.
-
3:36
And I have access to the same exact set information.
-
3:41
Just like our Chrome tools, I can now get a look at how our values and
-
3:45
methods are being assigned in the scope.
-
3:48
I hope you've enjoyed a little bit of exposure to some of the super important
-
3:52
tools you have access to as a developer.
-
3:56
Remember, finding ways to make software developement easier and
-
3:59
faster is really important.
-
4:01
As a developer,
-
4:02
how you work can often times be as important as the things you're working on.
-
4:07
Next we're going to take a deeper look at the concept of scope in Angular.
-
4:12
Great work so far.
You need to sign up for Treehouse in order to download course files.
Sign up