1. Compile, Build, and Debug
CIS 136 Building Mobile Apps

2. Debugging
You WILL have bugs

3. Debugging
To debug on the device, you must activate developer options which allow USB debugging
Go to “Settings” – General, and tap on “About”.
Here, tap on “Software information” and then tap on “More”.
You will find the option of “Build number” in “More”, tap on it 7 times to activate the developer options
A new menu option will become available in the General Settings
In the Developer Setting, check the option to Allow USB Debugging

4. Using Chrome Inspect on Android
Hybrid apps can leverage Chrome's remote debugging features
To do so:
Connect the Android device to the PC using a USB cable
Open Chrome on your computer and in the address bar, go ahead and type in Chrome://inspect
The dev tools for devices window will open
Confirm that the discover USB devices is checked.
Your device should prompt to allow USB debugging from your computer (you might have to go to your app settings, and uncheck/recheck usb debugging)
The device and the App should display in the Chrome://inspect window
Click inspect, and the Chrome dev tools will now open

5. Using Chrome Inspect
With the Inspector open, load the Index page by clicking CTRL and O
This functionality is only available when the app is compiled in in private mode (not for release)
We don't want to give away our code!
With these tools, the app can be run, logic tested, bugs resolved
Using the console its easy to resolve any CSS issues, JavaScipt errors, and whatever other issues arise

6. Setting Breakpoints to examine code, check logic paths

7. Viewing data in memory

8. Weinre
Web Inspector Remote is another tool to enable debugging on the device
To use it, debugging must be enabled before the App is compiled
The application will be queued for a new build which will have WEINRE debugging available that we can access from our compute
Once created and installed on the device the debug feature of PhoneGap Build can be used.

9. Weinre Once installed, press the debug button in PhonegapBuild
A new window will open weinre and the Target will point to the app
it's not as quite full fledged debugger as Chrome tools
it gives a live view of the DOM and access to the JavaScript console, but no break points or traces are available
The JavaScript console can give clues about errors (press Target)
Can flip over to Elements and start to see our application running on the device
Can see network activity
To disable it, go back to Settings, turn off the checkbox, go ahead, click Save, and it will now rebuild your application with the WEINRE debug features turned off.

10. Using Weinre

11. WEINRE

12. Third Party Tools
Another popular tool is GapDebug from Genuitec, available for both OSX and Windows

13. Hydration PhoneGap Build has a feature called hydration
Instead of having to recompile the app after every change, hydration instead creates a special native binary that acts as a container for the app
When the app is launched in the device, it checks the PhoneGap Build to see if there's a newer version of the available
If there is, it then updates the app
You don’t need to go through the process of reinstalling the application.

14. Hydration
To enable this feature, go to the App Setting page and click on Enable Hydration.
Then go ahead and click Save and the app will be rebuilt with this feature enabled
Install this version and launch the application
It will take some time to initialize and launch
When a code change is made, and the app is launched again, it takes a bit longer
a screen will be presented asking if we want to update or install the new version
Updating downloads and installs new code
The main advantage of this solution is it reduces the reinstall times that occurs during the normal development cycle

15. Hydration

16. Wrapup Only choose one debugging method – do not mix and match
A setting made for WEINRE will cause Chrom Inspect to fail
Make sure all debugging features are disabled when you build your release version of your application