Sharing Top Content from the Angular-sphere.

Debugging AngularJS Apps from the Console

Pocketed: Debugging AngularJS Apps from the Console

  • When building AngularJS apps, it can be challenging to access data and services hidden deep in our application through the Javascript console in Chrome, Firefox, and IE.
  • Here are some simple tricks we can use to inspect and control a running Angular app through the browser Javascript console, making it easy to test, modify, and even program our Angular app in real-time:

    We can access any scope (even isolated ones!)

  • Sometimes we need to see what the scopes look like on the page to effectively debug our app.
  • To access the instance of a controller for a given directive from the console, just use the function:

    This last one is more advanced and not used as frequently.

  • With a few simple tricks we can access the data for any scope on the page, inspect the scope hierarchy, inject services, and control directives.

When building AngularJS apps, it can be challenging to access data and services hidden deep in our application through the Javascript console in Chrome, Firefox, and IE. Here are some simple tricks we can use to inspect and control a running Angular app through the browser Javascript console, making it easy to test, modify, and…

@imjohnsward: Pocketed: Debugging AngularJS Apps from the Console

When building AngularJS apps, it can be challenging to access data and services hidden deep in our application through the Javascript console in Chrome, Firefox, and IE. Here are some simple tricks we can use to inspect and control a running Angular app through the browser Javascript console, making it easy to test, modify, and even program our Angular app in real-time:

We can access any scope (even isolated ones!) on the page with a simple JS one-liner:

Or for isolated scopes:

targetNode

is a reference to an HTML Node. You can grab one easily using

Sometimes we need to see what the scopes look like on the page to effectively debug our app. The AngularJS Batarang is a Chrome extension that shows the live scope hierarchy and has some other really helpful features.

We can grab a reference to any service using the

injector

function of element where

ngApp

was defined, or indirectly though any element with the

ng-scope

class:

We can then call methods on that service just like we could if we injected it.

Some directives define a controller with certain additional (often shared) functionality. To access the instance of a controller for a given directive from the console, just use the

function:

This last one is more advanced and not used as frequently.

Chrome has a ton of nice shortcuts for debugging browser applications from the console. Here are some of the best ones for Angular development:

Thanks to @zgohr for this tip!

With a few simple tricks we can access the data for any scope on the page, inspect the scope hierarchy, inject services, and control directives.

So the next time you want to make small tweaks, check your work, or control an AngularJS app from the console, I hope you’ll remember these commands and find them as useful as I do!

batarang is known to not work with ionic. or maybe it was fixed and im doing something wrong?

Yep using ng-inspector as well. Bataran has a few versions and they’re all over the place in terms of consistency. Half the time Batarang says there are 0 scopes on the page…I gave up and moved on to ng-inspect

Debugging AngularJS Apps from the Console

Comments are closed, but trackbacks and pingbacks are open.