Debugging Appcelerator Applications
by Andrew ZuercherPurpose
The ability to debug applications is critical when things go sideways on you. I understand that for some of the developers out there learning a new framework can be challenging. Appcelerator provides developers with the tool-set to drastically reduce the amount of javascript code that they need to write and to be honest I think that the more you use the framework, the less you will need to debug applications as you familiarize yourself with the syntax.
Alerts
Prior to logging, alerts were the best way to display state during execution (showing you how old school I’ve been). Nonetheless, sometimes this is just easier since it blocks execution until you confirm. When you do this, you may want want to display objects. Lets take for example the following
1 | alert(myobject); |
You make get an alert that shows:
Well that isn’t very useful. If you want a nice string representation, use the following
1 | alert(Object.toJSON(myobject)); |
Now you’ll get a nice JSON representation.
Logging
Safari and Firefox both provide you with the ability to view logging in the console. For firefox, you need to install firebug. If you are a safari user, you can use webkit (from the Debug menu, click “Show Javascript Console”). Both of which make available a console that displays log statements.
In firefox you can do the following in javascript
1 | console.log("wassup"); |
I suggest however that you dont do that! Instead make use of the abstracted Logger
1 | Logger.info("wassup"); |
This will not only show up in Firefox, but also in Safari’s console.
On another note, you can use the debug=1 parameter in your URL and you will see a ton of appcelerator messages (ex: http:localhos:8080/myapp?debug=1). I will caution you that it will almost look like spam given the amount of detail that is logged, but nonetheless its there if you want it.
You can also expand the Get and Post statements in firefox which will let you know what you have sent in your request and the JSON result that was returned from the server.
In-line Debugging
Lets say that you have an error in your app:script. Well in Firefox, you can take a look at the console and that will give you some pretty good feedback, however its going to be some cryptic text and you can’t step through it. You have 2 options that will enable you to step through the code:
- can make a call to a javascript function from your app:script (I normally define a project specific javascript file and put my functions in it)
- define a $MQL in your javascript file - app:script goes away
Here is scenario 1:
1 2 3 | <app:script on="r:someevent.response then execute"> Myapp.dosomething(this.data); </app:script> |
and the corresponding javascript
1 2 3 4 5 | Myapp = Class.create();
Myapp.dosomething = function(data)
{
//code here
} |
For scenario 2: alternatively you could just define in your javascript file
1 2 3 4 | $MQL('r:someevent.response',function(type,msg,datatype,from)
{
//code here
}); |
The downside of this is that your implementation is not colocated in a single html file, but the upside is that you can debug it. Note that if you are not using content files, then you could alternatively define the above in a script element instead (a little cleaner), however if its a large app, then you really will want to decompose your app and use content files.
IE Specific Debugging
To be honest I’m not a huge IE fan, but it makes up an install base of 80% of the market. Chances are that pretty much everyone out there is using IE if you are building an application that appeals to the general public. To this end, Microsoft has made the .Net Developer Studio available for debugging your applications. The steps are pretty simple:
- install .Net Studio and create a project
- add your javascript files to your project
- start IE with your app’s url
- in Visual studio, select debug process and select your iexplorer.exe (sometimes it wont attach, but just keep trying and you should get there eventually)
For understanding styling, I suggest downloading the Internet Explorer Developer Toolbar. This will allow you to inspect individual elements (using the hover) and then setting styling attributes on your elements. This is much better than changing your html and reloading your page, especially for large applications.
Firefox (Firebug) Specific debugging
As with IE, you can use the firefox plugin to step through your code.
- load your app
- open firebug
- click script and select the html or javascript file and set your breakpoints
As with IE, using the Inspect module in firebug is very useful for styling your application.
Wrap Up
In this article we covered a bunch of ways that you can get down to the details in your application
- alerts (and displaying objects as strings)
- logging (appcelerator debug mode, custom log statements, ajax payloads)
- in line javascript debugging and styling
For many this may be an obvious repeat of the mechanisms that they currently use as web developers, but hopefully it will uncover some of the tactics that are used.
-andrew
this blog is cross posted at:
http://zuerchtech.com/2008/2/21/debugging-appcelerator-applications
Tags: appcelerator, debug, ria