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.xRun the debug executable.
cd DebugGap-x.x.x
./DebugGapOn 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.
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 cordovaClone the source code from GitHub.
git clone https://github.com/sitepoint-editors/ExpenseManager.gitNavigate to the project directory and add the respective mobile platform. I’m using android.
cd ExpenseManager
cordova platform add androidFrom 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 buildOnce the build is complete, run the app on the android emulator.
cordova emulate androidYou should be able to view the application running in the emulator with a blue spot.
Click on the blue spot and you should be able to see 4 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.
Once connected you should be able to see the client in the DebugGap 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.
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.
Jay RajJay is a Software Engineer and Writer. He blogs occasionally at Code Handbook and Tech Illumination.
