16

I absolutely love how I can just do ionic upload and instantly get my app on my iphone!

But how am I supposed to debug it? I'm on windows and all options I have found require to be on OSX.

1) Safari 6 remote debugging - Safari for windows was discontinued at 5.1

2) XCode - nope, on windows

3) ionic emulate ios -l -c -s nope, on windows

I have a Mac on standby listening for build requests via vs-mda-remote service from the Visual Studio Cordova Tools so I'm able to build and deploy to a live device like that, however this is super time consuming.

If this was somehow integrated with ionic view 

 ionic upload -l -c -s

my life would be complete. Okay okay maybe we can do without the live reload for now, but is it possible at all???

To clarify, I'm aware of ionic serve, however I'm talking about debugging ON THE PHONE using the IonicView mobile app. I have an issue that ONLY happens on the phone via IonicView app, but cannot be replicated in the browser.

parliament
  • 21,544
  • 38
  • 148
  • 238
  • 1
    At the moment you cant debug on Ionic View. Also, ionic view doesn't have all the plugins - so if you use anything like sqlite plugin it wont work on Ionic View :( – TimoSolo Jul 08 '15 at 07:39
  • I used to debug specially when application consumes *native plugins* by running app `ionic run android` on attached usb device and *GapDebug* rescue me to dubug. – mumair Apr 20 '17 at 04:59
  • This might help https://stackoverflow.com/a/50342731/5677886 – Yerkon May 15 '18 at 05:20

4 Answers4

7

I don't know why, but i thought GapDebug is much better known. GapDebug brings you all the features you need to debug your application in a very smooth and easy way. It works on Mac OS X but also on a Windows Computer.

UPDATE:

GapDebug was discontinued in 2016 with version 2.4.0 as the final release. It works for apps running on Android and iOS 9 and earlier but not on iOS 10 and up.

See Genuitec to Discontinue Development of GapDebug .

Link to last Windows GapDebug 2.4.0 installer.

Community
  • 1
  • 1
Sithys
  • 3,655
  • 8
  • 32
  • 67
  • No problem, you're welcome. As far as i know it's the greatest tool for application debugging!! – Sithys May 28 '15 at 14:57
  • Yeah the UI is very inuitive. Honestly the ONLY thing it's missing is a GapDebug mobile app to make it easier to deploy. IonicView solved this via `ionic upload` and open it in their app, literally takes 5 seconds. For GapDebug there's the whole process of provisioning and signing an ipa which in my case requires a Mac on standby for building the package (takes over a minute). It's not as easy to deploy as `ionic upload` but it's closer to the metal, so to speak. – parliament May 28 '15 at 15:05
  • Unfortunately I realized this also doesn't have a live DOM? Meaning I can't make changes to neither the html or css (makes sense, since it's packaged up in the ipa). So you can't preview live changes to elements like you would in chrome debugging tools. In that case it's a bit cumbersome and I'm still looking for a solution for IonicView lol got excited too fast. – parliament May 28 '15 at 15:15
  • You're able to do this?! Just right-click on the part you want to change and select "Edit as HTML" or just double-click the part you want to change – Sithys May 28 '15 at 15:17
  • You're right, I missed it because you actually have to have the ROOT node selected (there's a bunch of folders nested under it that are static files, that's where I was). Good call :) – parliament May 28 '15 at 15:19
  • I take it it's not possible to edit javascript through here? That would solve the whole issue of needing to recompile a full ipa for small testing changes. I know you can change variable values while on breakpoint, but would be amazing to do some real editing (chrome debugging tools allows this, and I think I saw that GabDebug uses chrome tools under the hood). – parliament May 28 '15 at 15:23
  • Select the folders on the left side and open up the folder "scripts". Normaly all .js files should be inside it and are editable. :) – Sithys May 28 '15 at 15:36
  • but does that actually do anything? I edited a string assignment and then I took a breakpoint trip around the new value and the variable still gets assigned to the old string. – parliament May 28 '15 at 15:48
  • I'll try out later. Afaik it takes effect – Sithys May 28 '15 at 17:16
  • You could also consider using the ripple emulator (http://ripple.incubator.apache.org/) coupled with something like chrome dev tools. Ripple has many draw backs (like no support for custom plugins) but it is great for simple projects. – laughingpine Jun 04 '15 at 18:31
  • @laughingpine I need it as close to the device as possible, specifically to test in-app browser plugin, which ripple has no support for. – parliament Jun 09 '15 at 19:32
  • Well.. the "Full Cross-Platform Support" is a lie. It should read "full commercial platform support" because Linux is just not supported - only paid OSes. Dislike it.. – Matthias Hryniszak Jan 08 '16 at 12:25
  • what's the difference between this and chrome://inspect ? – Mawardy Jan 20 '17 at 00:57
  • GapDebug is discontinued and does not work with iOS 10+ – Max Al Farakh May 05 '17 at 14:07
1

Above answers about ionic serve and GapDebug are fantastic, But there is another way to debug ionic application running on android device by using Chrome browser.

Yes chrome, all you have to do is type chrome://inspect, make sure your phone is USB connected with enabled Developer Options, and see the magic!

Note: If you are using Chrome to inspect/debug, then must close GapDebug

enter image description here

For iOS (Ionic, PhoneGap, Cordova) apps debugging on Safari, please check this post.

mumair
  • 2,768
  • 30
  • 39
0

If you've installed the Ionic CLI using npm, and it has been successfully added as a PATH variable to your Windows environment, you will have access to the ionic serve command. This spools up a localhost server on your machine for testing your app in a web view.

To check for bugs, simply open your browser's inspector and check for errors logged to the console.

http://ionicframework.com/docs/cli/install.html

http://blog.teamtreehouse.com/install-node-js-npm-windows

Caleb Faruki
  • 2,577
  • 3
  • 30
  • 54
  • 3
    thanks but I'm aware of this and have been using it, I'm specifically looking to debug the app on my phone using the IonicView mobile app as I mentioned. I'm trying to debug an issue in my app that only occurs when run through IonicView, and cannot be replicated in the browser. – parliament Jun 07 '15 at 06:17
  • You should report this bug to the DriftyCo guys. They're pretty fast about addressing these issues. https://github.com/driftyco/ionic/issues – Caleb Faruki Jun 09 '15 at 20:18
  • 2
    The question was aimed at phone testing, not local testing. Although the local environment does work for testing, there are still things that need to be debugged on device that local testing won't catch. – Justin Feb 18 '16 at 14:44
0

Intel XDK and the Intel Live View app allow debugging of an iOS device from Windows.

https://software.intel.com/en-us/intel-xdk

You have to sign your own version of the live view app and it gives you instructions for that.

Then you can just plug in your iPhone. Intel XDK will detect it. Click the debug tab, and it will deploy and debug your app.

Ryan How
  • 1,027
  • 1
  • 9
  • 6