Any Web Developer worth their salt is already familiar with the awesome Chrome Developer Tools package that ships with Google’s Chrome Browser. What you might not know is that Android 4.4 introduced a powerful new native debugging tool for native Android/HTML5 hybrid apps that allows you to attach Chrome Developer Tools to a Web View running on a physical android device. As part of our continuing mission to help you tame the Mobile Monster, we’ve taken the liberty of wrapping the code to enable this functionality in a Titanium-ready mobile module. To make use of this new functionality in Titanium, you will need :
- A laptop with the Google Chrome Browser
- A phone running Android 4.4+ (and a charging cable)
- An app built with Titanium SDK 3.4.1.GA +
Getting Started
First, download the pre-built module below.
[ No module needed on Android 4.4.x+ ] (update)
To make use of the module within your Titanium project, you just need to un-zip the module into your modules folder, and add it to your modules tag in your tiapp.xml. We recommend only including this module for the development deploy type, since this is purely a debug tool.
com.shockoe.debug.webview
Now, just build your app to an Android 4.4+ device, and you will be able to attach chrome developer tools to any web view within your app.
Attaching Chrome Developer Tools
Once you have your app on your test device, and have your test device connected to your development laptop, open Google Chrome and type chrome://inspect into the address bar. This should open you up in the devices tab.
Then just click inspect. A normal Chrome developer tools window will open, allowing you to inspect your element as normal. In addition, you can click the new icon in the top-right of the screen to get a live preview of your WebView directly within the inspector window.
And that’s it. You now have a full-featured Chrome Developer Tools window attached to your Titanium app’s WebViews, allowing you to use all of the same web development tools that you are familiar with from normal HTML/CSS/JavaScript apps to develop Titanium/Mobile Web hybrid apps.
Sign up for the Shockoe newsletter and we’ll keep you updated with the latest blogs, podcasts, and events focused on emerging mobile trends.