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.
1
| sudo chmod -Rf 777 ./DebugGap-x.x.x |
Run the debug executable.
1
2
| 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.
Click connect to listen for clients.
Adding DebugGap to an App
To demonstrate the DebugGap, you can use the Expense Manager app from the Creating an Expense Manager App with Apache Cordova.
First, install cordova.
1
| sudo npm install -g cordova |
Clone the source code from GitHub.
1
| git clone https://github.com/sitepoint-editors/ExpenseManager.git |
Navigate to the project directory and add the respective mobile platform. I’m using android.
1
2
| cd ExpenseManagercordova platform add android |
From the DebugGap unzipped folder, copy the debuggap.js from the client folder and paste intoExpenseManager/www/js . Include debuggap.js in ExpenseManager/www/index.html as script reference.
1
| <script src="js/debuggap.js" type="text/javascript"></script> |
Build the cordova project.
1
| cordova build |
Once the build is complete, run the app on the android emulator.
1
| cordova emulate android |
You 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.