Skip to main content

Debug Phonegap Build Apps

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

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

Step 1

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.

phonegap build debugging

 

Step 2

After clicking save you will have a new debug button in you app details page.

 

Phonegap build debugging 2

 

Clicking on the debug button will open up winre debug client in a new tab, it will show no targets as of yet.

 

debug phonegap build 3

 

Step 3

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

 

debug phonegap build 4

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.

 

debug phonegap build 5

 

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.

 

Conclusion

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:

 

Full Course Curriculum : Click here

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

  • Pingback: Phonegap Build Beginner Course - pointDeveloper.com()

  • Mohd Waseem

    i am fresher in phone gap .we know about functionality of phone gap . i am facing problem in implement of api in program.

    i m not able to understand how json data will convert in phone gap format .
    please help me. how can start implement api in phone gap

    • If you are receiving data from an api, you just have to use it as you do in the web.
      If you want to store the data you have to use a plugin to store it.
      Depends on what are you trying to do.

%d bloggers like this: