13 Replies Latest reply on Mar 3, 2015 11:09 AM by ibuziuk

    Debugging Ionic Project With CordovaSim and Livereload

    phancox

      I have a Cordova project using the Ionic framework that has been imported into JBoss Developer Studio 8.0.2.

       

      CordovaSim will connect to the livereload server but doesn't seem to be picking up any changes.  Should this be working?

       

      THANKS

        • 1. Re: Debugging Ionic Project With CordovaSim and Livereload
          phancox

          Looks like it's a problem with my specific project  Created a new project from the ionic starter template and all works fine.

           

          When I make a change to a source file I can see some reload activity on the console and typically get the exception below.  The application still appears to work in CordovaSim but without the change.

           

          Exception in thread "JavaFX Application Thread" org.eclipse.swt.SWTException: Widget is disposed

            at org.eclipse.swt.SWT.error(SWT.java:4441)

            at org.eclipse.swt.SWT.error(SWT.java:4356)

            at org.eclipse.swt.SWT.error(SWT.java:4327)

            at org.eclipse.swt.widgets.Widget.error(Widget.java:476)

            at org.eclipse.swt.widgets.Widget.checkWidget(Widget.java:348)

            at org.eclipse.swt.widgets.Control.forceFocus(Control.java:1075)

            at org.jboss.tools.vpe.cordovasim.events.RippleInjector.inject(RippleInjector.java:68)

            at org.jboss.tools.vpe.cordovasim.events.RippleInjector.access$1(RippleInjector.java:55)

            at org.jboss.tools.vpe.cordovasim.events.RippleInjector$1.run(RippleInjector.java:44)

            at com.sun.javafx.application.PlatformImpl.lambda$null$164(PlatformImpl.java:292)

            at com.sun.javafx.application.PlatformImpl$$Lambda$137/1010931249.run(Unknown Source)

            at java.security.AccessController.doPrivileged(Native Method)

            at com.sun.javafx.application.PlatformImpl.lambda$runLater$165(PlatformImpl.java:291)

            at com.sun.javafx.application.PlatformImpl$$Lambda$120/1686100174.run(Unknown Source)

            at org.eclipse.swt.internal.win32.OS.DispatchMessageW(Native Method)

            at org.eclipse.swt.internal.win32.OS.DispatchMessage(OS.java:2549)

            at org.eclipse.swt.widgets.Display.readAndDispatch(Display.java:3759)

            at org.jboss.tools.vpe.cordovasim.CordovaSimRunner.startCordovaSim(CordovaSimRunner.java:114)

            at org.jboss.tools.vpe.cordovasim.CordovaSimRunner.main(CordovaSimRunner.java:91)

          • 2. Re: Debugging Ionic Project With CordovaSim and Livereload
            maxandersen

            This should work - does it happen if you restart cordovasim ?

             

            if you can give us some steps to reproduce that would be great!

            • 3. Re: Debugging Ionic Project With CordovaSim and Livereload
              ibuziuk

              Hey, Peter.

              CordovaSim will connect to the livereload server but doesn't seem to be picking up any changes.  Should this be working?

              Oh, yes - this should work. I have tested latest ionic (v.1.3.2) todo app against 8.0.2 and everything seems to work just fine on windows.

              Nonetheless, I have created an issue for CordovaSim - [JBIDE-19087] Debugging Ionic Project With CordovaSim and Livereload - JBoss Issue Tracker

              It would be great to get more info about the issue - project / environment etc..

               

              P.S. I posted a blog with a demo video for CordovaSim and BrowserSim some time ago that covers livereload and debugging stuff for JavaFX - JBoss Tools - Brand new BrowserSim / CordovaSim features

              Also there is a known javaFx issue coupled with the debugger API - https://javafx-jira.kenai.com/browse/RT-38918 and [JBIDE-18526] CordovaSim: Debugger doesn't work properly with the last JDK 8u20 - JBoss Issue Tracker

              Basically, Oracle JDK 8u11 and below should be used for debugging (I do hope it will be fixed soon).

              I do hope it could help you in the future development ^

              1 of 1 people found this helpful
              • 4. Re: Debugging Ionic Project With CordovaSim and Livereload
                phancox

                Thanks Ilya for opening the issue on the JBoss Issue Tracker.  Would you prefer to continue the conversation here or there?  Personally I would prefer here as I'm fairly new to this sort of development and there is a reasonable chance I'm just doing something stupid.  Perhaps move to the issue tracker when we have a bit better idea as to what is happening?

                 

                The issue persists if I restart CordovaSim and is 100% reproducible with this project.

                 

                I am using 64-bit JDK 8 Update 31 and haven't yet come across any issues related to that.  Project is using Ionic Crosswalk browser integration but I don't think that is relevant as it is mostly to do with the apk build I think.

                 

                My project was originally based on the ionic sidemenu template.  I have started a new sidemenu project that works with live reload and I have started adding pieces to it from my own project until livereload breaks :-)

                 

                I am using a WebSQL database initialised in app.js  Added this to original sidemenu and it still works fine though it complains about database initialisation on subsequent reloads.  Never the less the reload works.

                 

                I think the issue has something to do with pages that use the database information.  If I don't enter any of these, live reload works.  However, once I have visited one such page, live reload fails from then on.  Perhaps it is an issue with usage of promises?

                 

                I can make the project available if you would like to look into it?

                 

                REGARDS

                Peter

                • 5. Re: Debugging Ionic Project With CordovaSim and Livereload
                  ibuziuk

                  Let's continue the conversation here. I will update the issue myself once we will sorted out the problem.

                  I would really like to get the project ;-)

                  The issue persists if I restart CordovaSim and is 100% reproducible with this project.

                  Peter, what do you mean by "restart"? And what os are you using?

                  Apparently websql might be the root of the evil.. However, the stack trace with the "widget disposed" looks strange

                  Does the project work on the real device?

                  • 6. Re: Debugging Ionic Project With CordovaSim and Livereload
                    phancox

                    When I say restart, I meant close down CordavaSim and restart from the "Run as" menu.  In the debugging I've been doing I have noticed that simply hitting "Refresh" from the CordovaSim "Platform" menu doesn't appear to clear everything.  e.g., if I do things that don't break the reload, then do something that does and "Refresh", the things that didn't break livereload before don't work now unless I do a full restart of CordovaSim.  Treat that diagnosis carefully as reproducing exact scenario is difficult.

                     

                    OS is Windows 8.1 x64 and project works fine on device.

                     

                    THANKS

                    Peter

                    • 7. Re: Debugging Ionic Project With CordovaSim and Livereload
                      ibuziuk

                      Peter, I played with the project for a while and the livereload seems to work fine with the debugger - http://screencast.com/t/DkFDS7k4P

                      However, I faced issue with "maximum call stack size exceeded error". Could you please write exact steps to repro (the page navigation order)?

                      • 8. Re: Debugging Ionic Project With CordovaSim and Livereload
                        phancox

                        I'm beginning to think this exception was due to Chrome getting itself into a state?  This morning I have hardly been able to reproduce the exception and cannot reproduce it at all at the moment.

                         

                        Earlier I had a similar issue with getting "TypeError: 'null' is not an object (evaluating 'localStorage['_db_data_' + name]') on line 262 for undefined" on every CordovaSim start whether Livereload Server was started or not; and the code was exactly the same.  Most of the application was then broken.  Nothing seemed to work until I rebooted the computer and everything was back to "normal".

                         

                        It is looking as if CordovaSim is not handling WebSQL databases correctly on a livereload.  The application will use Sqlite on a device but will use WebSQL in a browser (e.g., ionic serve) or CordovaSim.  The database is opening and populating correctly when CordovaSim is first launched but after a livereload the exact same database open that worked on initial launch fails with "TypeError: 'undefined' is not a function (evaluating 'window.openDatabase("pocketgp", "1.0", "Pocket GP", 1000000)') on line 39 for http://localhost:60261/js/app.js"  At this point livereload is still working on screens that don't require the database.

                         

                        If a "Refresh" is performed from the CordovaSim "Platform" menu, the application is back to working as normal but changing a file no longer triggers a livereload.  Perhaps this is a different issue?  Is livereload supposed to continue working after a "Refresh" from the CordovaSim "Platform" menu?

                         

                        Ah ha!!! Just tested the last statement by launching a fresh instance of CordovaSim and hitting the refresh button immediately after it loaded.  Then changed a file and livereload crashed with the "Widget is disposed" exception.

                        • 9. Re: Debugging Ionic Project With CordovaSim and Livereload
                          ibuziuk

                          Hey, Peter.

                          Ah ha!!! Just tested the last statement by launching a fresh instance of CordovaSim and hitting the refresh button immediately after it loaded.  Then changed a file and livereload crashed with the "Widget is disposed" exception.

                          Got it! I have created a separate issue for that with your screencast^ - [JBIDE-19091] Cordovasim: Livereload stop working after pressing 'Refresh' button from the Platform toolbar  - JBoss Iss…

                           

                          In terms of the original issue. Just want to sum up everything we know:

                          1. It's not coupled with debugging / chrome

                          2. Web sql db has local storage implementation under the hood. The issue with evaluating 'localStorage['_db_data_' + name]') on line 262 for undefined might be coupled with javaFx implementation of  it. Basically, javaFx has localstorage support only from JDK 8. It seems to be somehow coupled with localstorage initialization in javaFx. However, now I can't repro it. It looks like sometimes localstorage stop working for javaFx. Need to investigate it more properly. Please, let me know if you will be able to figure out steps to reproduce.

                          3.  Basically,  livereload stop working on the pages with websql (even if the localstorage is working correctly). Technically it works, but after refresh only the blank screen is shown. So it's not coupled with the livereload itself (even when the manual refresh is performed only blank screen is shown).

                          I guess it could be coupled with the fact that ionic loses it's state on refresh. I want to check it on the real device by adding <a href="javascript:location.reload(true)">Refresh this page</a> to the different pages and test it.


                          Will let you know once I check everything ;-)



                          • 10. Re: Debugging Ionic Project With CordovaSim and Livereload
                            phancox

                            2. Web sql db has local storage implementation under the hood. The issue with evaluating 'localStorage['_db_data_' + name]') on line 262 for undefined might be coupled with javaFx implementation of  it. Basically, javaFx has localstorage support only from JDK 8. It seems to be somehow coupled with localstorage initialization in javaFx. However, now I can't repro it. It looks like sometimes localstorage stop working for javaFx. Need to investigate it more properly. Please, let me know if you will be able to figure out steps to reproduce.

                            This only started occurring this morning, even with the same code I've never seen it before.  I think the debugger got into an infinite loop, throwing exceptions on the console, and I had to force kill JBoss and CordovaSim.  When I restarted JBoss and CordovaSim this error kept occurring and practically none of the application worked.  I know closing Chrome is usually insufficient to totally restart it so I rebooted the computer.  After this that error stopped occurring and everything was back to the normal errors I was expecting.  Although this wasn't a scripted scenario, I'm reasonably sure this is what happened; causing me to think that perhaps Chrome had gotten its local storage corrupted?

                             

                            3.  Basically,  livereload stop working on the pages with websql (even if the localstorage is working correctly). Technically it works, but after refresh only the blank screen is shown. So it's not coupled with the livereload itself (even when the manual refresh is performed only blank screen is shown).

                            The blank screen is probably due to $urlRouterProvider getting an error invoking the service that returns the promise allowing the application to enter the state.  Which is probably also why after a reload, all menus end up at the default url.

                             

                            It seems that "window.openDatabase("pocketgp", "1.0", "Pocket GP", 1000000)" works when CordovaSim initially loads the application or refreshes it; but not when a livereload occurs.

                            • 11. Re: Debugging Ionic Project With CordovaSim and Livereload
                              ibuziuk

                              I have sent PR for [JBIDE-19091] Cordovasim: Livereload stop working after pressing 'Refresh' button from the Platform toolbar  - JBoss Iss…

                              We might as well include the fix into the upcoming 8.1.0 release. For now workaround is to disable and enable livereload manually afrer "Refresh"

                              I think the debugger got into an infinite loop, throwing exceptions on the console..

                              After this that error stopped occurring and everything was back to the normal errors I was expecting

                              I'm reasonably sure this is what happened; causing me to think that perhaps Chrome had gotten its local storage corrupted

                              Hmm... That's getting interesting - this might be the clue. I will investigate it more properly.

                               

                              In terms of my testing on the device:

                              I had some problems with crosswalk compatibility - http://snag.gy/QOamJ.jpg

                              Basically, I was able to build and run the app only after it's removal.

                               

                              As I said in the previous comment I added the following refresh link (in order to emulate livereload) to the several pages : <a href="javascript:location.reload(true)">Refresh this page</a>

                              I was able to reproduce the same behaviour (blank screen after refresh) on the real device - http://screencast.com/t/j4anPYQaZadW

                              So, CordovaSim works just like the device - it's an ionic refresh side effect. From one hand it's not expected from ionic developer perspective to refresh the page and it could be treated as an edge case.

                              From the other hand CordovaSim emulator needs to do it due to livereload. I will try to get in touch with ionic guys, describe thesituation and get their opinion. I hope we will handle it somehow ;-)

                               

                              • 12. Re: Debugging Ionic Project With CordovaSim and Livereload
                                phancox

                                You won't be able to build an Ionic project with standard Cordova tools as it alters the build process in order to include the Crosswalk browser.  You'll need

                                • npm install -g ionic
                                • set BUILD_MULTIPLE_APKS=true
                                • ionic platform add android
                                • ionic browser add crosswalk

                                I'll send you an email with the name of someone in the Ionic team who might be able to help.  Perhaps we can look forward to even further integration of Ionic into JBoss Developer Studio :-)  I've spent quite some time deciding on my technology stack for mobile development and JBoss Developer Studio and Ionic are both cornerstones.

                                • 13. Re: Debugging Ionic Project With CordovaSim and Livereload
                                  ibuziuk

                                  Hey, Peter.

                                  Just wanted to give a heads up.

                                  I have reproduce the same livereload issue (blank screen on some web pages after refresh) via pure ionic using its LiveReload feature via "ionic serve" - Live Reload All the Things: Ionic CLI's Latest Features. I pinged ionic guys on their IRC channel, but they haven't replied yet. So, have created an issue for the ionic team - bug: Livereload via "ionic serve" does not work properly (loosing back button, state etc.)