Running Android Simulator (AVD) on Desktop [Mac]

Testing and debugging app or website on a real device is always a win. Most of the times, we are lucky to test on some of the friends devices. That’s when running an AVD — Android Virtual Device is much help and is better than nothing. Hence process is not so straightforward this post was born.

Edit 2015/02/20: Android Studio might be an easier option to setup](http://aniteration.blogspot.sk/2014/07/getting-ionic-and-android-studio-up-and.html _blank), but the my path would look more like export PATH="$PATH:~/Library/Android/sdk/platform-tools:~/Library/Android/sdk/tools"

Installing Android emulator

To install the emulator, you’ll need to download the Android SDK first, you probably have already done that. Extract the zip, put the files somewhere you like, I’ve put them to my ~/Applications, renamed to Android SDK, just to look human. I’ll refer to it as ~/Applications/Android SDK in the future.

In order to run any virtual android device you need to install platforms and system images for target versions of Android you plan to test against. Open up Android SDK Manager by running ~/Applications/Android SDK/tools/android:

  • in Terminal: $ ~/Android\ SKD/tools/android
  • in Finder you need to overcome the “android” can’t be opened because it is from an undefined developer pop-up alert by running ity by right-clicking in finder Open. You’ll be able to run it anyway.
Android SDK Manager

When sort by API level, select e.g SDK Platform Android L Preview (latest) and the ARM EABI v7a System Image to test against the device running latest Android.(That should be it, I say should, because, you might need to update your Java, or maybe there are some other dependencies I haven’t run into. If so please leave a comment for future readers. Thanks.)

Creating your first AVD

Still in the Android SDK Manager, choose Tools > Manage AVDs... from the application menu:

Manage AVDs... in Android SDK Manager

Click Create… button, fill information about your desired device and you’re set. In the list of your existing Android Virtual Devices you’ll see your new device listed.

NOTE TO MYSELF: DO NOT USE SPACES IN NAME OF THE DEVICE. It disables the Create button!

Note: In my case, I needed to enlarge the window to see errors in the footer otherwise hidden, where you’ll be notified about invalid characters etc.

Creating a Nexus 5 AVD running Android 4.0

Resources:

Inspect Any Website Using Weinre

Website Inspectore Remote is what stands for Weinre name. It’s a local-hosted node.js app allowing us to inspect remote website as you’re used to in the Developer Tools. Weinre borrows most of the visuals and logic from the Webkit Developer Tools so you’ll feel home right away. It’s simple to install using NMP, so I go through this install process.

$ sudo npm -g install weinre

Resources:

1. Run Server

$ /usr/local/share/npm/bin/weinre

2. Inject javascript to the website to debug

<script src="http://10.0.2.2:8080/target/target-script-min.js"></script>

3. Inspect

Open Weinre in desktop browser.

Done.

Polyfill Object.defineProperty for old Android browsers

I was lucky to discover console logs running the $ ~/Android\ SKD/tools/monitor [from Terminal]. It sayid:

08-06 21:44:09.286: W/browser(190): Console: TypeError: Result of expression 'Object.defineProperty' [undefined] is not a function. http://10.0.2.2:8080/target/target-script-min.js#anonymous:1474

I’ve found great set of polyfils, located the Object polyfil and only picked the portion I needed and Weire target appeared. Here’s the polyfill.

<script>
if (typeof Object.defineProperty === 'undefined') {
    Object.defineProperty = function(object, name, descriptor) {
        object[name] = descriptor && descriptor.value;
        return object;
    }
}
</script>

If you have other tips, please share in the comments bellow.

Happy debugging

Resources: