One of the projects I was recently involved with had me setup an unsusal enviroment — debugging an embedded device that ran Adobe AIR. There are not a whole lot of specifics that I can talk about for that particular project, but one of its aspects I can talk about — debugging the AIR and Flex apps remotely.
Most developers are used to the enviroment where they have a single computer where they run their app, and if something breaks, they can launch the debugger and on the computer and debug the app. When you are working with embedded devices, mobile devices, or simply devices that don’t have Windows/MacOS running on them, debugging can be a pain. Unfortunatly, the documentation for AIR (and Flex) is pretty poor at telling you how to set this up — and the IDE fights you if you don’t know exactally what you are doing.
Adobe AIR (or the Flash Player) will need to be started in a debug mode. On most normal operating systems, this happens by having the Debug Flash Player installed and a flag called via the command line (ADL) or URL (Flash). As the debug player is loading the SWF file (yes, even AIR files have SWF files), it will attempt to make a TCP/IP connection on ports 8050 (Trace Statements / Console) and 7935 (Debug Connection). As soon as both of these connections have been made, frame 1 of the SWF is started and the app starts to load. Trace statements are sent via port 8050 — anything sent to this socket is displayed in the console view (try telnetting to localhost port 8050 to see how this works!). The data over port 7935 is a bit more complicated and sends some binary blobs.
Once the app is loaded (frame 1 has started), you can control the application via the debugger. You can do remote stops, pauses, etc., just like normal. The line-break works as well. However, if these connections fail to the debugger, your application most likely won’t load, or it may take a LONG time to load (I’ve had it sit there for over two minutes before it timed out).
Setting up a Remote Debugging Session for AIR
Back to my case. I had an embedded device that has no keyboard, no mouse and displays to a large display. Setting up the debugging session to this device is fairly complex :
- Create your app as you normally would. Do some debugging locally to make sure the app loads and things work as expected on a computer (if possible), but you do need to launch the app in debug mode at least once.
- Compile the app to a .AIR or .AIRI file (depending on your need). Store this .AIR file on your desktop.
- You may be wondering about this step, because you can only create .AIR files by making release builds! We will address this issue in a future step.
- Rename the .AIR file to .ZIP. In Windows 7 and Vista, if you use the GUI, make sure you are showing file extensions or it may not work.
- Use Windows Explorer to open the ZIP file. Do not extract the contents, just open the ZIP for browsing. DO NOT USE WINZIP or WINRAR. Essentially, if you use a compressor that uses the real PKZIP alotherim rather than the generic ZIP libraries, they will complain that the .ZIP file is corrupt.
- Delete the .SWF file located in the root of the .ZIP file. This should tbe the same name as your project.
- Go to your project folder within your Flash Builder workspace (mine is located under C:\Users\<name>\Adobe Flash Builder 4\), and find the bin-debug folder. Within this folder you will find a SWF file, with the same name as the file you deleted. Copy this file into the root of your ZIP file.
- Close the ZIP file and rename it .AIR again. Copy the .AIR file to a USB jump drive, to transport it to your device.
- (Windows 7/Vista only) — Disable your built-in Windows firewall. There is no way around this step — just make sure to re-enable it when your done.
- Turn on the device, and install the .AIR file. Since it will share the same namespace as your non-debug app, you may need to uninstall your older version first. On the Adobe TV Reference Hardware that was passed out at MAX, you do this via the “Marketplace” app.
- Back on your computer, go into Flash Builder, and click the drop-down Debug icon on your toolbar. It looks like a green amoeba. On this drop-down, Click on Debug Configurations.
- Click on your debug configuration for your current project, and copy the text in the Project: text input.
- Click on the Web Application tab, and create a new configuration. Paste the name into the Project: text input. You cannot use the Project Selector.
- Uncheck the “Use Default” in the URL area of the dialog box. Type in about:blank as the URL.
- If you are using the Adobe TV Reference Hardware handed out at Adobe MAX, launch the DevMaster application and fill in the IP address of your computer. Enable Trace statements and Remote Debugging.
- Launch the debugger on your computer. The debugger will wait about 3 minutes or so for a connection, so you have time to get things setup on the device.
- Finally, launch the .AIR application on the device. If you are not on an AIR for TV kit, you will need to know the command-line to launch the player in debug mode. The debug player will connect with your computer and all will be good. You can now use line-breaking, conditional-breaking, trace outputs, etc. to help with your debugging.
The nice thing about this technique is that it pretty much works in all senerios where you want to debug on a remote machine. This includes even when you want to run your code on a Mac, yet you have your development platform on a Windows machine. I’ve also done similar setups when I first was debugging Android based applications (although with the later versions of Flash Builder that are now in Beta, this is much easier). Now if we could just get debugger players for the Wii and the GoogleTV, I could debug on pretty much any platform 🙂