Tutorial ~ Debugging
To understand how Jangaroo code is loaded into the browser, you can use any JavaScript debugger. Since it is the "mother of all JavaScript debuggers", we use Firebug for Firefox in the following. So if you do not already have it, grab the Firebug Firefox add-on.
When loading the hello-world example with Firebug enabled (press F12 and enable Script debugging), you can see the list of all loaded JavaScript files:
Jangaroo takes care of automatically loading the scripts of all dependent classes, even from other modules. By default, the *.classes.js files of all modules mentioned in the section of your pom.xml and their transitive module dependencies are loaded. For hello-world, these are just two modules: the Jangaroo Runtime, and the Jangaroo browser API library.
If you select one of the four JavaScript files, you see the complete generated
code of one module, without white-space or comments. So how do you get the
debug version of the generated code we saw earlier? Simple: just add
#joo.debug to the URL and reload the page (F5). After that, the list of
scripts looks like so:
Each of the JavaScript files (save jangaroo-application.js, which contains the runtime core that bootstraps class loading) contains the generated JavaScript code of one ActionScript source file, line by line, including white-space and comments. So if you want to set a break point at source position HelloWorld.as line 14, you select joo/classes/HelloWorld.js (try typing "hel..." and Firebug will drill down on the JavaScript file names) and set the breakpoint in line 14! Reload and Firebug will stop in the JavaScript code, where you can inspect variables, study the stack, etc.:
Obviously, this example is very basic (after all, it is "hello world"!) and contains a lot of overhead considering its limited functionality. However, when your JavaScript code grows along with your application requirements and your client-side logic becomes increasingly more complex, the Jangaroo tool set together with your IDE's ActionScript 3 / Flex support will help you keep your code readable, maintainable, and extensible.
Read more about the Jangaroo language features to learn how Jangaroo supports you in achieving these goals.
