Today’s tip came out of a chat I had with the brilliant Aaron Saunders (@aaronksaunders). Thanks Aaron!
First, a little backstory. Appcelerator’s new Alloy framework provides an MVC-like development architecture for your Titanium mobile app development projects. In essence, Alloy is a preprocessor. You create views (in XML and CSS-like files), controllers, and models, which are all parsed and processed when you build your app. During the build process, the Alloy preprocessor creates the kind of “traditional” Titanium code you might have written in the past. That generated code is what ends up running inside your app.
The lines on which you set your breakpoint (in the source Alloy files) don’t correspond to the actual Titanium JavaScript that ultimately runs within your app. And without jumping through enormous hoops, you can’t set breakpoints in the generated code and run that code. In my testing, setting a breakpoint on an Alloy source file results in the debugger stepping line by line through your entire app’s code. Not very helpful.
Cue Aaron’s tip. You can add a statement to your code that will be treated like a breakpoint. Here’s an example:
// $.table represents a TableView
$.table.addEventListener('click', function(e) {
// this is the 'magic' line:
debugger;
alert('You clicked row ' + e.rowData.id);
});
With that debugger statement in your code, do a debug build. Click this button:
Your app will compile and load into the simulator/emulator. When you click a row in the table, the debugger statement will be hit, the app will stop and the Studio debugger view will be activated. From there, you’ll have access to all the normal breakpoint debugging features offered by Studio. Key point: the correct line in the source file is highlighted! Breakpoint debugging is back with Alloy.
