AngularJS Debugging Tips & Tricks

  • May 15, 2017
  • 1004

Post name

AngularJS Debugging Tips

Programming, math and libraries. Doesn’t make any sense? Let’s sort this out.

Today we’re talking about frontend developers’ favorite Angular JS. Why favorite? Well, it is really useful in many aspects of its work. First of all, AngularJS (designed as an open source code library) is targeted at working with a single page website / single page application (e.g. world-famous Wikipedia).

An amazing feature of this JavaScript framework is decreasing pressure on servers by relocating certain services, which leads to “lightening” of the web-application. And when it’s light it works and loads faster. And a proper work makes clients happy.

AngularJS is an example of declarative programming usage, as it is the best one for building user interfaces. And here comes math as all that is built on the algorithms, formal systems & logic. But even super-attentive people (and programs) may miss something. Then the code does not work as it is supposed to.

There are some tips & tricks how AngularJS can be debugged.

Debugging, Debugging and Once More Debugging

The toolset was built in 2009 and since then had a lot of improvements. As Angular is aimed in making everybody’s life easier we need to learn more about debugging itself. The latest update in the bugs fixed went out on July 22th, 2016. Main debugs were related to $animate, $compile, $injector, $jsonpCallbacks, $timeout, copy, modules, ngAnimate, ngMocks, ngOptions, ngTransclude.

Moreover, after upgrading to Angular 2, debugging became much easier and understandable (as here any change goes from parents’ components to children’s due to unidirectional data flow implementation).

Angular debugging may be divided into certain categories which are methods and extensions. Now let’s look a bit closer and learn more about problem fixing.

Angular debugging methods

Methods

controller(name) – controller may be identified with the help of the JS construction function and is used to enhance Angular Scope. ng-controller attribute is found in the Document Object Model (DOM). By default it retrieves controller which is connected with thengController directive. When the name is given as camelCase directive one, the controller for such directive is to be retrieved (for example ‘ngModel’).

inheritedData() – similar to data(), only searches through the DOM till a value / the top parent element is found. If you need to get data connected with element $scope, the inheritedData() method may be used on this element.

isolateScope() – retrieves an isolate scope in case one was attached directly into the current element. Must be performed only on elements containing a directive which starts a new isolate scope. When you call scope(), the element gives back the original non-isolate scope. Debug Data is a must to be enabled.

Angular framework

scope() – is used to retrieve the scope of the current element / its parent. Keep in mind that scopes are settled hierarchically which imitates the Document Object Model of the application. Debug Data is must be enabled.

injector() – retrieves the current element’s / its parent’s injector. We use this method when $injector service’s dependency problem occurs.

Extensions

Batarang – is the Angular extension for Chrome and is loved and known by people because it shortens debugging from angular.element($0).scope() to $scope. Moreover, Batarang works really simple. You only need to install it and the extension will collect debugging info about the requested page.

Angular debugging extensions

ng-stats – is good for fixing performance issues. It shows digest/watches situation of your app. The library is made of the plain script in order to make up a chart. With its help the directive angular-stats (a part of angularStats module) is created. Using angular-stats you can locate angular stats into special places on a page that is specified.

ng-inspector – uses alike tools with Batarang to study the hierarchy of your app via walking the scopes, and is compatible with Safari, Firefox and Chrome. As the extension, ng-inspector works in real time and helps understand, develop and debug Angular apps.

These are by far the most popular AngularJS debugging tricks. You are welcome, but not limited, to use them if you feel like you noticed any mistake in the code or in the app working flow.

 

Read Also:

Get Free Website Audit Checklist

and exclusive monthly tips & tricks for your digital business right to your mailbox!

Comments