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.
jsHybugger actually supports three different remote debugging scenarios:
We're going to cover that third scenario - since we want to look at using jsHybugger to debug an app built with Icenium.
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:
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.
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.
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.
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.
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.
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:
Despite the lack of render & paint event support, you can still capture touch events, timer events and more.
The Profiles & Audits tabs are currently not suppported in jsHybugger.
Here's a short video showing how easy it is to get jsHybugger setup and running:
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.
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.