Telerik blogs

We recently discussed the powerful capabilities of our simulator if you use Icenium Graphite or the Icenium Extension for Visual Studio (if you use Icenium Mist, you get the choice of what's available via the desktop browser's developer tools as well). Debugging in a simulated environment is an important step in developing hybrid mobile apps - but there will inevitably come a time where you need to debug on the device. Apple supports remote debugging for iOS 6+ devices (using Safari's developer tools) - but what option do you have if you need to remote debug on an Android device? Lucky for you, there is jsHybugger.

Overview

jsHybugger actually supports three different remote debugging scenarios:

  • jsHybugger Library - for when you have a native Android app that uses a WebView
  • jsHybugger App - installed as an app to your Android device, and used to debug web pages that run in your device's default browser
  • jsHybugger Plugin - added as a custom plugin to your Apache Cordova-based project, allowing you to debug your hybrid mobile app

We're going to cover that third scenario - since we want to look at using jsHybugger to debug an app built with Icenium.

Setup

jsHybugger's documentation has the specifics of everything you need to get started. I was impressed to see Icenium-specific setup instructions in their documentation as well. jsHybugger supports connecting to a remote debug session wirelessly (using a shared network), or via USB using the ADB Chrome extension. I chose the wireless option. Here are the steps I followed:

  • Download the zip
  • Upload the zip (in this case I was using Mist) to the Plugins folder in my Icenium Project (the gif screenshot below shows this - the zip is automatically extracted to the Plugins folder. If you're using Visual Studio, you can extract the archive and then drag the folder into your Solution Explorer, dropping it in the Plugins folder):

  • Next, run a build for Android and install the .apk onto your device and open the app.
  • Find your device's IP address on your network - and ensure that your desktop/laptop is on the same network as your device.
  • Open Chrome to http://{Your Device IP Address}:8888. jsHybugger's documentation tells you to include your license file in the res/xml directory of your application. I forgot this step, and was pleasantly surprised to find that they will prompt you to upload your license when you first try to connect to the device. I uploaded my license, and then was able to see the following page:

Note the options across the top: Elements, Resources, Network, Sources, Timeline, Profiles, Audits and Console – all the debugging power you'd expect when using Chrome to debug desktop websites! The jsHybugger Team is currently working on Timeline and Network support (it's part of an EAP release at the moment – it should be out around November 1st). They graciously provided me access to the EAP so you can get an idea of what's coming soon.

Debugging

These tools are probably familiar to you - that's the beauty of this approach, leveraging desktop tooling and knowledge and extending it to debugging mobile apps.

Elements

This might be old news to you – the Elements tab lets you inspect the DOM (including CSS) of you application. Hovering over elements will result in them showing a selection highlight on your device (a very handy feature letting you know which element(s) you're selecting). Changes to the DOM and CSS will be reflected on your device in real time.

Resources

The Resource tab allows you to view all of the files loaded in the WebView (markup, images, fonts, etc.), and it allows you to inspect local storage like cookies, Web SQL and IndexedDB.

Network

While this isn't available in the current release of jsHybugger, it will be soon. The Network tab allows you to inspect requests made by the app to external resources, including the request headers/data as well as the amount of time the request took to complete.

Sources

This is where I spend most of my time! The Sources tab let's you open JavaScript source files, set breakpoints, step through code, add watch expressions, inspect the call stack and more. If you have a runtime JavaScript error when the app is deployed your device, this tab will be the main tool you use to track it down.

Timeline

When testing desktop websites, I use the Timeline tab in Chrome to inspect render & paint events. However, the jsHybugger team mentioned a couple of important caveats to be aware of when using the Timeline in jsHybugger:

  1. Minified JavaScript files (i.e. *.min.js) are excluded from instrumentation by default, which might lead to gaps in your event timeline. To obtain a complete recording of all events, minified libraries have to be replaced by their non-minified equivalent during the debugging session.
  2. Due to technical limitations, there are a few event types that the jsHybugger event timeline does not support. These include:
    • Rendering events
    • Painting events
    • Scripting events of the following type:
      • Animation Frame Fired
      • Cancel Animation Frame
      • GC Event
      • Request Animation Frame

Despite the lack of render & paint event support, you can still capture touch events, timer events and more.

Profiles & Audits

The Profiles & Audits tabs are currently not suppported in jsHybugger.

Console

As you'd expect, the Console tab gives you a JavaScript console in which you can interact with your app at runtime.

Seeing It In Action

Here's a short video showing how easy it is to get jsHybugger setup and running:

Wrapping Up

The jsHybugger team also mentioned that they are currently looking at supporting CPU profiling on the Profiles tab. Further support for Profiles and Audits is yet to be determined at this point. Overall, I think that jsHybugger is the best option for remote debugging hybrid mobile apps on Android devices at the moment. The soon-to-be-added support for Timeline and Network, on top of the features already present, has definitely landed it a place in my tool kit.


About the Author

Jim Cowart

Jim Cowart is an architect, developer, open source author, and overall web/hybrid mobile development geek. He is an active speaker and writer, with a passion for elevating developer knowledge of patterns and helpful frameworks. 

Comments

Comments are disabled in preview mode.