Sencha Inc. | HTML5 Apps

Blog

Remote JavaScript Debugging on Android

November 05, 2010 | Helder Correia

Developers often run into debugging hurdles when testing web pages for Android mobile devices. And, while the Android Developers Guide provides a solution, it’s a bit cumbersome and complex. So, many web developers often turn to tools like Firefox’s Firebug or Webkit’s Web Inspector because they are easy to use, powerful, and convenient. However, what developers often find when using these tools is that the end result is quite different on the actual device. We decided to create our own solution — a tool based on the standard solution proposed by the Android team, but much simpler to use. We call it RemoteJS, a tool that enables you to debug your JavaScript code while running on an Android device or emulator from your workstation.

How To Build RemoteJS

Building the application is a fairly straight forward process. First, confirm that you have Qt framework installed. Then, download the RemoteJS source code from our brand new Android Tools repository on Sencha Labs. Build the desktop application as follows:
git clone git://github.com/senchalabs/android-tools.git
cd android-tools/remotejs/src/desktop
qmake && make
Next, all you need to do is install the Android SDK, plug your device in (or launch your emulator), and you’re ready to go. Here’s a screenshot of the RemoteJS tool running next to an emulator, inspecting an example from Sencha Touch:

Desktop version of RemoteJS for Android

The program automatically installs a package with the same name on the device.  This tool will actually be the one loading your page, instead of the Android browser.  This doesn’t represent any concern from the developer’s perspective, since the web engine component that is used is exactly the same on both applications. For further details on how it works and the implementation details, please refer to the README. To open a specific URL, just enter it on the console.  If you don’t include the protocol, only addresses starting with “www” will be validated.  If you have more than one attached device, you’ll be presented with a list to choose from.  Similarly, it will detect when you disconnect the device already being used.  It will then fall back to the only attached device left, if that’s the case, or wait until you connect one again. Please note that in order to actually get some output back, you need to make use of console.log.

Scriptable Remote Debugging

We thought that since the GUI version worked so well, we could write something similar that would run headlessly.  The main goal was to automate page regression tests, taking full advantage of Python, the chosen implementation language.  For that, an Android Debug Bridge (adb) Python module was written, which allows for very flexible scripting from your host. Naturally, a shell version of RemoteJS was also written on top of the adb module.  It listens for JavaScript commands on stdin and output results to stdout.  Here’s the tool in action, debugging another Sencha Touch example:

Shell version of RemoteJS for Android

Coming Up

The source code is changing constantly, and we plan to extend the capabilities of these tools.  You’re more than welcome to contribute in any way. With the adb Python module, it will be possible to remotely automate the injection of recorded events on the device and grab screenshots at any point.  This will allow automated verification of behavior consistency along time. Stay tuned and please feel free to clone our android-tools public repository to play around with the tools and code.  All is available under the MIT license.

There are 14 responses. Add yours.

Immobilier

4 years ago

Wow !

How many people are working in Sencha labs ?

You are releasing a lot of projects !

This tool seems great, thank you.

Arno.Nyhm

4 years ago

its also working on iPhone?

Helder Correia

4 years ago

@Arno.Nyhm: iPhone support might come in the future.  For now, this is only for Android.

Ronald Widha

4 years ago

awesome stuff guys!

ddenis

4 years ago

nice Helder!

Tnainani

4 years ago

Grt stuff guys!

I was wondering if you can pass JavaScript file to the remotejs and get output back?

for example

$remotejs < test.js

or

$./remotejs.py < test.js

Helder Correia

4 years ago

@Tnainani: you can try “compiling” your long JS code into a single line file. That should work, but can’t guarantee that it will do due to the way this tool works. That’s, among a couple other factors, is because of the size limitation of the string you can input as an address to a browser. A better approach would be compiling your code down to a file that isolates all logical blocks in one short enough single line (i.e. an entire ‘if’ block goes into one single line, same for ‘while’ and ‘for’ loops, etc). Finally, you could just open a web page that contains your code, and then you could inspect it. Could that work for your use case?

Tnainani

4 years ago

@Helder: Thanks for the tip. Yup, that works for now.

Timo

4 years ago

Does RemoteJS support window.applicationCache ? I keep getting null back. Does it support jQuery completely?

Pierre-Antoine LaFayette

4 years ago

Cool tool smile

frank

4 years ago

Really powerful!

Matt Hansen

4 years ago

It looks like the structure of Qt may have changed.  When I follow these steps, I get an error stating:


qmake && make
g++ -c -m64 -pipe -O2 -fmessage-length=0 -O2 -Wall -D_FORTIFY_SOURCE=2 -fstack-protector -funwind-tables -fasynchronous-unwind-tables -g -Wall -W -D_REENTRANT -DQT_NO_DEBUG -DQT_WEBKIT_LIB -DQT_GUI_LIB -DQT_NETWORK_LIB -DQT_CORE_LIB -DQT_SHARED -I/usr/share/qt4/mkspecs/default -I. -I/usr/include/QtCore -I/usr/include/QtNetwork -I/usr/include/QtGui -I/usr/include/QtWebKit -I/usr/include -I. -o remotejs.o remotejs.cpp
remotejs.cpp:24:20: error: QtWebKit: No such file or directory
remotejs.cpp: In member function ‘void RemoteConsole::openUrl(const QString&)’:
remotejs.cpp:246: error: ‘fromUserInput’ is not a member of ‘QUrl’
remotejs.cpp: In function ‘int main(int, char**)’:
remotejs.cpp:298: error: ‘QWebView’ was not declared in this scope
remotejs.cpp:298: error: expected ‘;’ before ‘webView’
remotejs.cpp:299: error: ‘webView’ was not declared in this scope
remotejs.cpp:300: error: ‘QWebSettings’ has not been declared
make: *** [remotejs.o] Error 1

Blue

3 years ago

Gee whiz, and I tohguht this would be hard to find out.

moncherion

3 years ago

This tool seems very powerful

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.