AngularJS : tools and debug

This entry was posted by on Vendredi, 19 octobre, 2012 at

Debugging

JavaScript debugging is now well implemented in most of the browsers. The Chrome Developer Tools are the most obvious example. It has become really easy and convenient to use and actually allows to consider complex JavaScript developments. This video shows you how to interact with the API AngularJS using Chrome Developer Tools .

There are complementary tools:

Batarang

To make life easier in the hierarchy of scopes that can quickly become complex, a chrome extension let visualize them: batarang. Easy to locate the reason for the non-visibility of one of your variables.
Let’s take a look to the screencast which explains how to use this extension:

ExceptionHandler

All exceptions are catch by $exceptionHandler service which by default applies a $log.error() of stack trace. You can change the behavior by injecting your own implementation. In this example the implementation sending the trace to a HTTP POST (see “Networks” tab in your Chrome Developer Tools to see the POST run).

And do not forget Dean’s tips and tricks to avoid or find errors.

IDE

WebStorm IDE and Sublime Text 2 have AngularJS plugins with mainly content-assist feature:

WebStorm

Easy installation because plugin is developed by John Lindquist from the JetBrains team, so it is available in the main repository. Just go to Settings => Plugins => Browse and select AngularJS repositories to install.

Sublime Text 2

If you installed the package controller the plugin installation is very simple. There are 2 plugin now:

With all these development tools you can becomes as productive and maintainable as with Java :)

  • Clueless Joe

    Plus de news JS/Angular depuis octobre 2012 ? Snif ;)