Debugging

The best solution for client-side debugging is Firebug. It’s a plugin for Firefox. You can download and install from here

Once you have it installed, Appcelerator provides you with a couple of options. First, you can append ?debug=1 to the end of your URL, and it will cause the Appcelerator Platform to print out debug level logging to the Firebug console. In larger applications, it generates a significant amount of data, which can make troubleshooting an issue difficult.

You can now add ?debug=2 to the end of your URL to only see messages that are generated by your application. ?debug=1 logs everything within Appcelerator, which can make it a little difficult to use when all you want to see are messages.

You can also leverage Appcelerator’s message-oriented architecture to create a simple wildcard-based logger while you’re in development mode. Here are two examples:

<app:script on="r:~.* then execute">
	Logger.info("Received remote message type: " + this.type + " data: " + this.data);
</app:script>

This script above will log all remote messages to your console. The next script does the same but for local messages only.

<app:script on="l:~.* then execute">
	Logger.info("Received local message type: " + this.type + " data: " + this.data);
</app:script>

Firebug also provides a useful console view that makes it easy to view the contents of both Appcelerator request and response messages. Here’s a screenshot of the Firebug Console view of an Appcelerator response message:

Safari

Safari comes equipped with a Javascript debugger. Instructions for how to enable it can be found here

You can also download Firebug Lite, which will allow you to log information to the Firebug browser console, but it will not allow you to use the ?debug=1 option. You can get Firebug Lite here

IE

If you must debug in IE, then you have three options. You can download Firebug Lite (see above in Safari section) or you can use Javascript alerts (not great I know), or you can use a copy of Visual Studio that supports web debugging (simply attach to a running IE process and away you go).

Here’s an example of using javascript alerts:

<app:script on="l:my.message then script[alert('received message with data' + this.data)]">
</app:script>

This example will generate an alert when your application message is received.