Rapid Titanium WebView debugging with Chrome Developer Tools

Rapid Titanium WebView debugging with Chrome Developer Tools

by Feb 14, 20151 comment

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.

 

The Chrome developer tools device perspective

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.

The Chrome Developer Tools inspector with on-device preview

 

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.

Edwin

Edwin

February 14, 2015

More like this delivered right to you:

Sign up for our Newsletter to get our latest posts plus invitations to our events and access to future whitepapers.

Related Posts

7 Tips for Utilizing Amazon Alexa to Engage with Customers

7 Tips for Utilizing Amazon Alexa to Engage with Customers

Amazon first released Alexa virtual assistant and smart speaker Echo in late 2014. An in-home virtual assistant is an impressive tool, but creating a seamless user experience with it can be a challenge. So how do companies overcome this challenge? What engagement can...

How to Engage Customers With QR Codes and Augmented Reality

How to Engage Customers With QR Codes and Augmented Reality

When one of our clients approached us with the idea of building an entirely new customer engagement app for their grocery stores, we were very excited. Their goal was to build a mobile application that customers could use to learn about products, find them in the...

Ready to drop us a line?