Tuesday May 14, 2013

Develop Mobile Web Applications On Your Android Device

This blog post introduces another exciting new feature in the upcoming NetBeans IDE 7.4. Namely, JavaScript debugging and visual CSS editing on Android devices. So without further ado, let's see how it works.

As a prerequisite, you will need an Android 4.x device. Let's do some setup steps that you only need to do once. First, install the Chrome browser on the device. The Chrome browser is available in the Play store.

Chrome browser for Android 4.x in the Google Play store

Next, you will need to turn on USB debugging both at the system level and in the Chrome browser, which can be done in Android's Developer options in the phone settings. Note that on Android 4.2 and newer, Developer options is hidden by default, so we need to unhide it first. To do that, go to Settings > About phone option in settings, and tap Build number seven (7) times. Then return to the previous screen, and you will find Developer options.

Once Developer options are present, you will see the USB debugging checkbox inside this category. Make sure it is checked.

Next, open the Chrome browser, go to Chrome settings, and under Advanced > Developer tools, check the Enable USB Web debugging checkbox.

Turning on USB debugging in Android Turning on USB debugging in Chrome on Android

We will also need to set up the Android SDK and point NetBeans to it. In NetBeans, go to Tools > Options (or NetBeans > Preferences on Mac OS X), choose Miscellaneous > Mobile Platforms, and specify the location of the Android SDK. In case you don't have the Android SDK installed on your machine, the dialog provides a convenient link to the SDK's download page. This completes the one-time setup.

Setting the Android SDK location in IDE options

Now, to start developing your web application on your Android device:

  • Connect your machine and the Android device with a USB cable
  • Connect your developer machine and the Android device to the same Wi-Fi network (this is necessary so the device can access the web server running on your computer)

As our testing application, we will use the AngularJS Phone Catalog application that is bundled as a sample in NetBeans, but you could of course use any HTML5 application - or a Java web application or a PHP application, as described in a prior blog post

To run the application in Chrome on your Android device, click the new browser switcher icon in the main NetBeans toolbar, and select Android Device (Chrome).

Switching to Chrome browser on Android device

Next, just run the application, and the application will open in Chrome on your device.

Let's now see how we can tweak the style of this application directly on the device. You will notice that in the IDE, a couple more windows opened: Browser DOM and CSS Styles. The Browser DOM window displays the real DOM tree as rendered by the browser on your device. When you select elements in this window, the CSS Styles window refreshes to show the CSS styling information for the currently selected element.

Browser DOM and CSS Styles windows

More interestingly, as you select (or hover over) elements in the Browser DOM, the current element will be highlighted in the page on your device.

Hovering over Browser DOM elements highlights the element on your device

Next, we will want to select elements on the device in order to change them. If we were using the desktop version of Chrome, we could do this by turning on Inspect in NetBeans Mode using the menu item provided by the NetBeans Connector for Chrome. But as Chrome for Android does not support extensions, we will do this using the Inspect Mode in the Browser toggle button at the top right of the CSS Styles window.

Turning on Inspect Mode

Once Inspect Mode is on, the interaction now works in the other direction: tap elements in the page on your device, and both Browser DOM and CSS Styles windows will be synchronized. Once we have selected the element whose style we'd like to modify, we can just do so using the bottom part of the CSS Styles window (Property sheet), and the change will be reflected live on the device. For example, this is the result of increasing the font size of the description text from 13px to 22px.

Modifying CSS style with NetBeans on a mobile device

Note that this example is illustrative only - in a real world example we would likely use media queries to achieve good appearance on both mobile and desktop clients. Speaking of which, media queries (as the main tool to do responsive web design) are supported in NetBeans' visual CSS editor.

Next, we may want to debug the application. For example, to see what happens when we click on an individual item in the list of phones in our application, we will place a breakpoint on line 16 in controllers.js. But in order to tap the item, we first need to turn off Inspect Mode using the toggle button in the CSS Styles window. Then after tapping the item on your device, the IDE will stop on the breakpoint.

Debugging JavaScript on the mobile device

Now we can inspect the variables, step through the code, see the call stack, and in general use all the features of the NetBeans JavaScript debugger.

All this support will be included in NetBeans IDE 7.4, which will be released later in 2013. However, you can already try this out now in a recent nightly build of NetBeans 7.4.


This is the blog of the NetBeans client-side web team, which develops the support for HTML5 applications in the NetBeans IDE.


« May 2013 »