Mobile
Article

Debugging Cordova Apps with DebugGap

By Jay Raj

For debugging a web application in a desktop browser, there are a myriad tools available such as Chrome’s developer tools or the Firefox firebug add on. Native application development have IDEs that provide integrated debugging tools. But hybrid applications that use a web view have always been harder to debug.

Debuggap is a tool to debug cross platform mobile apps. It’s easy to use and get started. All you need to do is download the package, include a JavaScript file and run the app on a device or emulator.

It can debug apps across different mobile platforms and is supported on Windows, Mac & Linux.

Getting Started

To start using DebugGap on your desktop, download the relevant package and unzip it.

Navigate to the unzipped folder and change the access permissions.

sudo chmod -Rf 777 ./DebugGap-x.x.x

Run the debug executable.

cd DebugGap-x.x.x
./DebugGap

On MacOS and Windows there is an Application file in the folder, so double click it to start the debug executable.

You should now see the remote debug screen.

Remote Debug Screen

Click connect to listen for clients.

Adding DebugGap to an App

To demonstrate the DebugGap, I’ll be using the Expense Manager app from the Creating an Expense Manager App with Apache Cordova tutorial.

First, install cordova.

sudo npm install -g cordova

Clone the source code from GitHub.

git clone https://github.com/sitepoint-editors/ExpenseManager.git

Navigate to the project directory and add the respective mobile platform. I’m using android.

cd ExpenseManager
cordova platform add android

From the DebugGap unzipped folder, copy the debuggap.js from the client folder and paste into ExpenseManager/www/js . Include debuggap.js in ExpenseManager/www/index.html as script reference.

<script src="js/debuggap.js" type="text/javascript"></script>

Build the cordova project.

cordova build

Once the build is complete, run the app on the android emulator.

cordova emulate android

You should be able to view the application running in the emulator with a blue spot.

Corodva App With Debuggap

Click on the blue spot and you should be able to see 4 options.

DebugGap Options

Select config and enter the IP address on which you are running DebugGap. In this case since we are running the app on an emulator, so you need to enter the IP address as 10.0.2.2, port as 8085 and click connect. It will connect to DebugGap listening on the localhost server, port 8085.

Connect Details

Once connected you should be able to see the client in the DebugGap listener screen.

Listener Screen

You can have multiple clients connected to DebugGap.

To get started with debugging the app, double click on the client in the debug listener window and you will see a window similar to the chrome developer console. Return to the mobile app, click on the blue spot and select inspect. Click on any element in the mobile app and it should be reflected on the elements tab in the debugGap listener window.

Element preview

Clicking on the blue spot provides an option called ‘Nodes’ which shows the DOM elements as nodes. DebugGap has a console which renders access to the mobile browser console for error message debugging.

That’s pretty much it! DebugGap is simple, but offers useful features to dig behind the scenes of hybrid applications running on a real (or emulated) device that are sometimes hard to access.

Conclusion

In this tutorial, we saw how to use DebugGap to debug mobile applications. It’s a handy tool for quickly inspecting mobile app elements.

Have you ever used DebugGap for debugging your mobile applications ? What was your experience like? Or have you used any other tools for debugging? We would love to know you thoughts, suggestions or experiences.

More:
  • nick

    this is really cool,I like it.

  • Bruno Seixas

    Simple yet powerfull piece of software. I use Ghostlab but this seems like a very possible alternative.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Mobile, once a week, for free.