Debug a PhoneGap app running in Emulator using WebStorm - ios

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.

Related

Can you build a react-native iOS app using WINDOWS?

Can you build for iOS with react-native on Windows?
Or does it require xcode?
If so, any work arounds?
I dont want to work on a mac... or a mac vm.
I think the app you create with react-native will work with iOS but you might just have to develop it without an iOS SDK. (essentially, you can't really see the app in a virtual iOS device whilst developing).
However, i think if you develop the app for android using android studio SDK with react native, the app should also work with iOS as well. It's just that you won't really be able to see the app in development on a virtual iOS device.
Another option is to use expo when using react native. Essentially, it displays your app on your iphone so you can technically do app development whilst viewing the app on an iOS device, but I don't think its that great as you can only see it on your phone, whilst I prefer to use a virtual device on my laptop.
You can view documentation for expo in the react native docs here:
https://facebook.github.io/react-native/docs/getting-started
I'd recommend you to just develop the app for android using the android SDK from Android studio. This also works with expo or react native CLI. Although you may have to develop the app in a virtual android device, I think the app also works with an iOS device (it may just look a little bit different e.g. a button in android will look different to a button on iOS)
Here's a tutorial that really helped me with learning React-Native:
https://www.youtube.com/watch?v=NuZOwsmzcro
Just follow the steps and make sure you install an android SDK. Then once you get to around "9:25", instead of starting up an iOS emulator from an iOS SDK, start up the android one from android SDK, then hit the button "a" to choose android and you're all set!
The short answer is NO. iOS apps need to build on a Mac. However, if you have a cheap old Mac, or even a Mac cloud account, you can effectively do the equivalent while (almost) never touching the Mac. Of course, this assumes that it has been setup up once, and builds via Xcode or Xcode command line. Once that is done, you can automate it so that you're working and testing only on the PC.
For example, I once took over a React Native project where the previous developer did something similar. Because it was a generic interface, he coded on his PC, then tested via the Android emulator without ever testing for iOS. At that point you can simply push code to GitHub (manually, or with something like Fastlane or a user script). Separately, you have a script on that old Mac or online Mac-as-a-service that checks periodically and builds when the code changes. There were some times when the Mac needed special attention, but for the most part, it worked solely on one machine.
Namely, you can not run IOS Simulator on windows. But you can access a virtual IOS machine and run Simulator from windows virtually as a solution..

Can I debug installed hybrid ios app from windows

My phonegap app is crashing randomly in some ios devices, not happening from phonegap client.
Is there a way to debug an installed ios app with a windows pc ?
Debug a Cordova app is a pain. Since the app is running inside a browser-like, all native debuggers are unuseful. In you specific case, I can suggest you to use Weinre, a remote tool able to show you something as the app is running and you can maybe catch the bug you're seeking.
You can start reading this link or this link and maybe google WEINRE.
Since your iOS app is crashing, most probably the issue will be with the Native Code.
BTW, you can try checking this tool - GapDebug

Debugging PhoneGap on Device

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.

Enable iPhone (with iOS7) debug console from Windows

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.

Debugging Cordova (PhoneGap) code on iOS

I'm working on an app I want to host in iOS via Cordova (PhoneGap). I've run into some problem when I try to access the device.platform and device.version properties. I'm not sure what the problem is. Either way, I can't figure out how to peek into the code to get a better idea of what's going on.
I thought I could just fire up the .html in the desktop version of Safari, however, that didn't provide any insights. In short:
How do I debug code running inside of Cordova?
Any ideas why I can't just do a "alert(device.platform);"?
Thank you!
Since iOS 6 you can just enable the Develop menu in Safari and use Safari Web Inspector to remotely debug Cordova app in either iOS Simulator or USB attached devices. If you've used Chrome's debugger you'll feel right at home.
as well as Weinre, there is also iWebInspector which is useful and perhaps better on ios.
http://www.mobilexweb.com/blog/debugging-web-safari-phonegap-iphone-ipad
I think it maybe only applies to the simulator but thats fine for most cases anyway. It is more Xcode and iOs debugging solution in my opinion .
I use nifty debugging tool called Weinre, which is a lifesaver when debugging cordova( phonegap) apps. It basically is a remote debugging tool resembling usual webkit developer tools available in Chrome and some other browsers.
Make sure that Cordova is loaded before you try to call device.platform. Cordova is loaded when deviceready js event is triggered.

Resources