Phonegap iOS Webview Console & Debugging

Phonegap is a great and powerful piece of technology, which makes building apps that allow for dynamic content, that can be housed all in the one area, a complete no-brainer. The huge problem I have had in the past is there is no way to debug your ‘site’ once it’s in the phonegap environment, without using god awful alerts or something terrible like that. For example if you want to leverage the awesome power of the cordova device level apis you won’t be able to just launch your site in a chrome or safari and test it.

For the life of me I couldn’t work out how to get my console.log(…); commands to show up in the xcode console, though there is a plugin for cordova that supposedly does this (https://github.com/apache/cordova-plugin-console). All of this introduces an obvious problem, one which has plagued me for months until I stumbled upon an answer buried deep in maze of answers on stackoverflow, which if I can find it again, I’ll link to at the bottom.

Anyway, there is now a feature in Safari developer tools in which you can set the developer console to connect to the iOS Emulator (and installed apps on your Mac OSX machine) and debug the webview within your app. Simply turn on the Developer menu in the Safari preferences, and once your app is running in the iOS Emulator a menu item will appear in the Safari Developer menu which will allow you to choose the webview to debug.

Safari-iOS-Emulator-Debug

 

EDIT: this can also be achieved in the Chrome developer console also when you have a device  connected or AVD open on your machine!

Let the world know