Normally I'm a JEE guy but these days I'm working on a mobile app. I chose PhoneGap because there are not so many needs to UI and I thought this would be the easiest way to serve the app on many platforms.
I'm wondering if my setup is good and if it's possible to get console output when running on the device. I'm working on MacOS and iPhone6.
I installed PhoneGap and Cordova via npm and serving the files with phonegap serve.
For local debugging I'm using the chrome plugin "Ripple".
For debugging on the device I'm using the PhoneGap Developer App from the AppStore, together with weinre on my Laptop to get some debugging data. In weinre I can see everything except console outputs. Is this normal? Or any idea how I could get the console to weinre, too?
I also found some tutorials on the web using XCode and some native iPhone emulator but didn't get this working yet. Which way is the more preferable way of debugging on device?
You don't need any tool for debugging cordova app. For iOS just start the app in stimulator and start safari. In safari go to Develop > 'your pc name' > ios simulator.
http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
For Android run the app in your device and in the chrome go to http://chrome://inspect/#devices
Weinre is quite old and should not be be used anymore, instead, you want to use the remote debugging tools in your browser. For iOS, you can use Safari to debug your Cordova app. I've got a full article here, https://dzone.com/articles/overview-mobile-debugging, but the process involves doing one setting on your mobile device, and then simply opening up Safari and going to the debug menu. You can also do this with Chrome and Android apps.
Another option is GapDebug (https://www.genuitec.com/products/gapdebug/) which lets you do iOS and Android together in one Chrome tab.
Related
I have developed a mobile app for IOS, Andriod and Windows devices. The application was developed with Phonegap.
I am running into a few issues while testing. Everything works perfect on Android, Windows and iPad, however once the app is on an iPhone 7 with operating system 11.2.5 there are a few "quirks". For instance select menus are self selecting and causing the app to crash. This only happens on the iPhone.
I am trying to debug this using weinre to debug, and I am unable to successfully get the iPhone to connect.
Is there options to see a console log, web inspector to find these errors?
Any help is greatly appreciated.
Phonegap serve and weinre.
Running both. I was able to pin point the issue..
Needed to update plugins.
I'm trying to debug my website, but Apple are douches. What do I do to enable the debug console if I don't have a Mac?
I installed Safari and the latest iTunes, but my iPhone doesn't show up in Safari developer thing.
You can try option of using Telerik AppBuilder (Windows client) as a replacement on Windows for Safari debugger on Mac when remote debugging. There's a nice blog post about the steps to do it in link below. I'd rather not repost the info as there are also screenshots and it's a lot of text. But essentially, you install app, open it, connect device via USB, then you can find it in the app and open up the developer tools/debugger for it. For non-public websites, you'll have to open up port 80 with some firewall configs documented in the post.
http://blog.falafel.com/Blogs/josh-eastburn/2014/03/04/ios-web-inspector-on-windows-with-telerik-appbuilder
The tool requires a license or you can use the trial, which becomes a basic edition afterwards. I think the basic edition will still allow you to do the debugging. I'm going to try it out myself.
You can also try these iOS apps too, you can find them in the iTunes App store. They give you a built in developer tools feature (right on iOS no remote debug) that mobile Safari doesn't offer.
MIH Tool - basic edition
https://itunes.apple.com/us/app/mihtool/id584739126?ls=1&mt=8
HTTPWatch Basic
https://itunes.apple.com/us/app/httpwatch-basic-http-sniffer/id658886056?mt=8
I gave them a try and they're at least better than the mobile Safari you get on iOS, unless one needs to target full mobile Safari compatibility. I'm guessing the pro/paid editions of those apps give you more/better features.
iOS Debugging with Safari is a featuere of the new Safari. As Safari for Windows is a outdated Version of Safari, debugging is not Implemented.
So debugging with Safari is only possible on a mac!
min requirements are: OS X 10.8 iOS 6
More Infos:
Safari Remote Debugging on Windows
Since that Question was asked i found another neat way to debug stuff on a not accessible Platform:
http://people.apache.org/~pmuellr/weinre-docs/latest/
It works like this:
You add the weinre.js to your project
You set up weinre on your main platform (pc)
Starting your project results in sending the Debug Information from your project to your Platform
It's not that easy to run and understand, but once it works its pretty nice.
Did you set up your phone to allow remote webview inspection?
http://moduscreate.com/enable-remote-web-inspector-in-ios-6/
As an alternative to Weinre, you can try Vanamco's Ghostlab as well, it supports JS console and parallel testing on multiple device.
Android 4.4 uses chromium, I'm trying to use chrome dev tools to debug my app. However, I cannot find my app in the ADB console (yet the device is detected, and I can see chrome tabs on my device). Any idea how to enable debugging for my app?
Here chrome-remote-debugging it says that in order to configure web view for debugging one needs to call setWebContentsDebuggingEnabled - does trigger.io do that?
I've been testing out Phonegap Build, using a similar workflow as outlined here:
Tutorial: Developing a PhoneGap Application
I can build, and deploy to my devices, but cannot get remote debugging to work through Safari, as described in the answer here:
Could you tell be debug process in Phonegap iOS application?
I have no problems debugging the app through the mobile browser, but the installed app itself does not show up in Safari's develop menu.
I am transferring my app to my phone through xCode, and have enabled debugging in the Phonegap build interface, but the Weinre debug service seems to be down. Ideally I'd like to get this working through Safari, could anyone share their debug workflow?
thanks
When you say "native app", you actually mean the Phonegap app deployed to your device?
Here is how I do it. It works on both iOS Simulator and actual device:
Open Settings > Safari > Advanced and make sure "Web Inspector" is enabled
Connect the device and deploy the Phonegap app using Xcode
Wait for the app to launch and navigate to Safari on my desktop, then find my device name in the develop menu
Make sure Web Inspector is enabled in Settings > Safari > Advanced > WebInspector.
Is there a way to debug the javaScript of a PhoneGap based iOS app within WebStorm while the app is running in the iOS emulator? The problem is that some of the events (like 'deviceready') need to be fired to enter certain code paths that I want to debug.
It is all described here in great detail:
http://www.tricedesigns.com/2013/01/18/my-workflow-for-developing-phonegap-applications/
It is a great article that every phonegap starter should read, as it describes how you can set up your development environment.
I have many options:
Phonegap simulator
iOS emulator remote debugger
remote debugging on the actual device
It won't integrate with webstorm but the debugging tools described above are much more powerful anyway.