In this tutorial I will talk about how you can debug apps using tools that PhoneGap build service offers. There are platform specific tools also which you can use to debug your apps but the focus of this tutorial is to make use of the debugging tools provided by PhoneGap build service.
The platform specific build tools are tools that you would need to install on your computer for each different platform for them to work. But with Phonegap build debugging you can debug your app without having to install anything.
The PhoneGap Build Debugger uses Weinre which is pronounced as “wine ry” and is an abbreviation for WEb INspector REmote. The way that this works is that when you enable debugging in PhoneGap the build process will build you app after injecting a weinre script. This script is what makes the debugging work. You will however, need to have internet connection enabled on your device and you PC for PhoneGap Build debugging to work.This form using weinre is done using the PhoneGap build servers.
You can also setup weinre locally to work with you local wifi network, I won’t be covering that in this tutorial as our focus is on PhoneGap build.
Enabling Debugging in PhoneGap Build
As shown in the image go to settings after logging into your PhoneGap Build dashboard, select the app that you are working with. If you have multiple apps, just click on the app name that you want to enable debugging for. Then go to settings and enable debugging by clicking the checkbox. Then click save. You can also upload your app again from here as well if you want. Make sure you click save at the end.
After clicking save you will have a new debug button in you app details page.
Clicking on the debug button will open up winre debug client in a new tab, it will show no targets as of yet.
Now it’s time to install and launch the app in an emulator or a device. Make sure that the emulator or device has internet connection enabled. When you launch the app you will see the target get some value in green text as shown
Clicking on the elements section above will result in open of the dom tree which you can use to view all the dom elements as shown below.
Also, notice that there are other tabs at the top such as network, console , etc. These are the standard tools that you see in the browser’s developer tools.
The debug tool offered by PhonGap build is there if you need it. But it requires you to have an internet connection active to use it. You have to download and install the built app from PhoneGap build. This may be a deal breaker for some people as it is a slow and monotonous process. On the other hand if you setup a debugging environment you will have all the debugging tools available to you but those tools will be platform specific and will need some setup on your part for each platform.
The debug tool in PhoneGap build really shines when you don’t have a development environment setup on your system. But if you are planning on doing any serious development I recommend you take the time and setup the local debugging tools for the platform you wish to build for as it makes debugging that much faster.
Watch Video Tutorial Here: