When I first started developing for mobile, my primary debugging tool was inserting
alert() calls like it was 1999. It was nostalgic for about 30 seconds. My DevTools skills, honed during days of watching Paul Irish videos and years of memorizing keyboard shortcuts, were useless for mobile.
But things have come a long way since then. With the advent of remote debugging, I can now use the same developer tools I know and love from the desktop on mobile devices—even on Web views embedded within native apps.
Since there are already guides on remote debugging scattered around the Internet, my goal here is to consolidate that knowledge, and to present it in the context of hybrid application development (Web apps packaged in a native container).
In this article you’ll learn the best remote debugging approach for each of the three major mobile platforms: iOS, Android, and Windows Phone. You’ll see how to take a native-packaged Web app, and perform common debugging tasks such as inspecting elements and console logging.
For these examples I’m using a hybrid app I developed using Telerik AppBuilder: GifThself. GifThyself lets you build animated gifs with your device’s camera and share them. You can get the source to follow along at https://github.com/tjvantoll/GifThyself.
Apple added the ability to remote debug iOS applications in iOS6. To use it there are a few prerequisites. First, go to the Settings app on your iOS device. There, navigate to Safari –> Advanced, and toggle on the Web Inspector switch.
In desktop Safari, go to the Safari –> Preferences… menu, select the Advanced tab, and ensure the Show Develop menu in menu bar check box is checked.
Because it requires Safari, remote iOS debugging is not available on Windows. For Windows users, your best option is weinre, which we’ll discuss momentarily.
Next, connect your iOS device to your development machine via USB and open the app you wish to debug. But be aware of one important restriction: iOS remote debugging is only available for apps built with a
Development provisioning profile—not Ad Hoc, and not Distribution. If you use Telerik AppBuilder, you can import a Development profile and select it when performing a build, as the following screenshot shows:
When you open an iOS app that was built using a development provisioning profile, it is immediately available as an inspectable application in Safari’s Develop menu.
Although Chrome for Android has had remote debugging for some time, remote debugging wasn’t available for PhoneGap/Cordova developers until quite recently, when Android 4.4 switched their WebView to use Chromium.
Like iOS, there are few prerequisites to use it. First, go to Settings –> About phone on your Android 4.4+ phone (Or Settings –> About tablet on your Android tablet). Next, as ridiculous as this sounds, tap the Build number seven times. You’ll get a tooltip message that congratulates you on becoming a developer. No, I’m not kidding.
Once you are a developer, head back to the main Settings page. There is a new Developer options menu option. Click it, and then check the USB debugging check box.
Only apps that have a debuggable flag are candidates for remote debugging. If you’re using a Cordova version 3.3 or higher, you must add
android:debuggable="true" to the
<application> element in your
AndroidManifest.xml file. If you’re using Cordova 3.2 or under, you must enable WebView debugging with some custom code.
If you are using Telerik AppBuilder, make sure that LiveSync is on when you perform your build. When it is, AppBuilder injects the necessary code to make remote debugging possible automatically.
Now connect your Android device via USB, and open the app you wish to debug. On your desktop, open Chrome and navigate to
about:inspect. Check Discover USB Devices and you’ll see your application appear.
Click the Inspect link to open the Chrome DevTools for your app. From here you can use the DevTools functionality you know and love.
Need to debug older Android devices (< 4.4)? Check out jsHybugger; it provides most of the Chrome DevTools functionality for these older devices.
Unfortunately, there is no official way to use remote debugging on Windows Phone apps; you cannot connect Internet Explorer to Mobile Internet Explorer for instance. Therefore you must resort to a 3rd party solution, the most elegant of which is weinre.
weinre is short for WEb INspector REmote. It’s built on the WebKit Web Inspector, and is specifically designed to work remotely; therefore it’s great for Windows Phone, as well as any platform where native remote debugging is not available (BlackBerry, iOS on a Windows development machine, and so forth).
weinre runs on top of Node.js. Assuming you already have Node.js installed, to get started, just install it from npm.
> npm install -g weinre
weinre works by creating a debug server that acts as an intermediary between the debug target (i.e. your app) and the debug client (i.e. your development machine). To start a debug server, run
weinre with the
--boundHost option set to your development machine’s IP address. My machine’s IP address is 10.0.0.13, so I run the following:
> weinre --boundHost 10.0.0.13 2014-04-04T16:44:28.723Z weinre: starting server at http://10.0.0.13:8080
ipconfig getifaddr en0to get your IP address on Macs, and
ipconfigto get it on Windows.
The output of running
weinre tells you the URL to access the development server from. In my case, this was
http://10.0.0.13:8080. Visit this page in your browser of choice, and scroll to the Target Script section. The debug targets need to use the
<script> tag listed to communicate with the debug server. Copy the
<script> into your app’s HTML. You can change the hash portion of the URL to give the target a meaningful name. Here I use “windows”:
Next, launch the app on your device. Then, back on your development machine, navigate to
http://[ip-address]:8080/client/#[target-name]— in my case
http://10.0.0.13:8080/client/#windows. You should see the app with the
<script> tag inserted listed as a target.
Click the target, then use the menu at the top to view the functionality that weinre offers. The contents of the various tabs should look familiar. For instance, here I select a paragraph on the Elements tab, and see it reflected live on my Windows Phone device: