Debugging AIM

Browser-based debugging

Chrome

1. Right-mouse click on the page and select Inspect Element. You should see the screen split, with several panes on the bottom. These will allow you to view the content and stylings of each element on the page, as well as step through the javascript source.
2. Click on the Sources tab to view the various sources associated with adapt-it-mobile. You might need to click Cmd+O to open one of the files.
3. Click on a line number in the source (javascript) to set a breakpoint. The toolbar in the right-hand pane gives you the standard debugging actions, and the right-hand pane itself will show the call stack, let you set watch expressions, look at variable values, etc.

Safari

1. If you haven't already, open up Safari > Preferences > Advanced and check "Show Develop menu in menu bar". Close out the preferences and reload the index.html page.
2. Right-mouse click on the content and select Inspect Element. Unlike Firefox or Chrome, Safari's inspector is a separate window that's similar to Xcode in its layout. Files are on the left column, selected file in the middle, inspector on the right. Click on the Debugger in the toolbar to set breakpoints, etc.

Emulator-based debugging

Android

I've just done some cursory debugging to track down a pesky path error so far. Console log messages are viewable through Android's logcat utility, but need to be filtered out by the application using it. Here's the command to view all the console.log commands that cordova apps produce (debug or higher):

adb logcat CordovaLog:D *:S

iOS

The steps here are similar to running in the browser. Once you type either cordova emulate ios or run AIM through XCode, you'll be using Safari's inspector:

1. If you haven't already, open up Safari > Preferences > Advanced and check "Show Develop menu in menu bar". Close out the preferences and start the iOS emulator (either from Xcode or the command line).
2. Once AIM launches in the iOS emulator, go back to Safari and select Develop > iOS Simulator > index.html. You should see Safari's inspector window display.

Using the PhoneGap Developer Application

The folks at PhoneGap have created a developer app that serves your application. This kind of works, except that some of the plugins don't work the same way they do on the device. Caveat tester I suppose.

1. Head over to http://app.phonegap.com/ and follow the instructions to install the application on your computer.
2. Launch the PhoneGap Developer application and drag AIM's source folder (e.g., ~/dev/adapt-it-mobile) to the PhoneGap Developer application window.
3. At the bottom of the PhoneGap Developer app, make a note of the IP address it's serving AIM on.
4. On your Android or iOS device, install the PhoneGap app from either the Google Play store or the iTunes store.
5. Launch the PhoneGap app on your Android or iOS device. The little robot guy should prompt you for an IP address to connect to. Enter the IP address from step 3 and click Connect.

Again, not everything work exactly like it does on the device. But this is a quick way to see changes you're making in the app.

Debugging on a device

Android

the logcat command also works for devices running in developer mode that are connected via USB to your computer. Under your Android Settings > System > Developer options, select USB debugging. Note that on newer devices, the Developer options menu is hidden by default. To display it, you'll need to go to Setings > About tablet (or phone) and click on Build number 7 times. Seriously. Once you've done this, you can connect a USB cable and start AIM. There are a couple commands that I've found:

1. adb logcat CordovaLog:D *:S This displays the CordovaLog messages. (If you are using an older version of AIM that uses the crosswalk browser, the command would filter for the Chromium browser like this: adb logcat chromium:D *:S).

2. adb shell logcat > log.txt This pipes the console log messages to the file log.txt in the current directory. This does seem to work, but gives you a lot of extra log messages besides those coming from AIM.

Remote Debugging

Android also has the option of remote debugging apps through Chrome (and a USB cable attached to the device):

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

This is as far as I've needed to go; if I need to debug down in iOS I'll add that info here.