I implemented gulp-angular-templatecache-ionic to my Ionic app, which made my application run significantly faster in my desktop chrome browser, but when I build and deploy (ionic run android) this application to my device (LG Nexus 5x) it is still slow, it looks like nothing has changed, as if the built android version does not use the angular template cache.
I followed this article: http://tombuyse.com/improving-the-performance-of-your-ionic-application/
Any ideas or suggestions how to debug?
Thanks!
In order to debug your WebView app please follow this guide from google
https://developer.chrome.com/devtools/docs/remote-debugging
If your android version is less than 4.4, then you cannot debug through the chrome devtools.
you can instead run an emulator via the adb emulator, you'll need the android sdk and the adb tool.
read more here: https://developer.android.com/studio/run/emulator.html
The default android emulator/simulator is slow, and also need the HAXM accelerator, you can download the Genymotion simulator which is a replacement for the default android emulators, and run faster, also doesn't need to change anything in your hardware configuration
https://www.genymotion.com/
Related
I'm working on an Ionic/Cordova cross-platform application and I'm struggling a little bit with the debugging.
Debug can of course be done directly from the browser by running ionic serve and then using the browser developer tools, but some behaviors happen only on real devices.
Adding a detailed guide to do this..
Make sure your android device has Developer mode on, and USB debugging is enabled in the developer settings on your device. You can google to activate this.
Device connected via USB, both system and mobile device connected to same wifi network..Use command
ionic cordova run android -l --external
After app has installed and started up on device, open this link in your chrome browser
chrome://inspect/#devices
If all was done correctly, you will see your device name and app name there with an option to inspect. This will open the chrome developer console exactly similar to the web one.
Now you can debug the app right on the device. Add breakpoints, edit html and see the logs as well.
Reference
Yes, you can use Chrome and Safari DevTools to connect to your device and debug the HTML/JS/CSS, as long as you don't build a release version (cordova build android ---release). It does take some initial setup since it's disabled by default.
Or you can use Android Studio or XCode to debug the plugins etc.
Note that you can only debug iOS apps with a Mac (or using Google's iOS WebKit Debug Proxy). Android apps can be debugged from any OS with Chrome (for HTML/JS/CSS) or Android Studio installed.
Official Cordova debugging guide
A simple way could be using logcat, take a look to this answer Debugging a WebView (Ionic) app on Android via logcat.
I wonder whether it is possible to test a Cordova project made with Intel Xdk on an Android emulator rather than a device on USB or the Intel embedded emulator.
Yes. You will have to install and run the APK file you build onto the Android Emulator. Although, I would recommend you build without Crosswalk (meaning, uncheck the "optimize with Crosswalk" build settings option) if you are going to run your app on the Android emulator.
However, it's usually a lot faster to just install it directly onto a real Android device and use remote CDT over USB to debug the app. See this doc page for help setting up remote CDT on your system.
Of course, there are some system-level debugging things you can do on the Android emulator that can be difficult or impossible to do on a real device, depends on your device.
There are many examples of questions about how to speed up the android emulator. Here's an example: Why is the Android emulator so slow? How can we speed up the Android emulator? Some of the solutions are, "Use a different emulator". But, can cordova be configured to use these different emulators? If so, where do I configure this? By default, cordova is looking for an AVD (android virtualization device).
Install Genymotion then run:
cordova run android
Cordova recognizes Genymotion as a device not an emulator.
I make an app via Phonegap which is working fine. But only on Android 4.4, of course it is because of the new browser engine which is rendering the page since 4.4.
But now i want to make the App suitable for lower versions. And the only solution i've found so far is build the applikation and then run in an emulator. Cause i use "Phonegap build" it takes like 5-10min to check if my change in the Css sheet works.
I hope there is a better way to do it.
Is there any emulator for old android browser?
From the Cordova project Weinre
Set up
sudo npm install -g weinre
weinre --boundHost -all- <!--for all other than localhost-->
<script src="http://<your ip address>:8080/target/target-script-min.js#anonymous"></script> <!--include on all pages to be tested-->
You can create all the AVDs (Android Virtual Devices) you want, with the android version and hardware you want. But AVDs are slow.
You can use genymotion too, genymotion creates virtual machines with android images in VirtualBox. They are fast and almost as reliable as real phones, if you don't want to spend a lot in devices, this is the way to go.
Microsoft has created something like genymotion, if you use windows you can test it on the latest visual studio.
Reference: Genymotion how to debug with Chrome Dev Tools
I'm also trying to get chrome developer tools to work with a genymotion emulator. However, when I follow all of the steps recommended (including at the above link), I don't get the "inspect" link. See: http://neu14.com/demos/screenshot.png
Note: I found out that the default browser on the android devices, at least on most of the prior os versions is not Chrome. Finding an apk to download for Chrome android compatible versions, without an actual google play account, is quite challenging?
It took me ages to get the remote debugging working on Genymotion as I couldn't install Chrome on it without the Google play store which isn't installed by default.
Finally found this video so thought I'd share. It explains how to install this virtual device which has the play store ready installed. Once that was set up and I could install Chrome and set up remote debugging.
Won't work with the default android browser though as you said, but its a step forward!
Hope that helps
I know my answer is little late, but I thought it may be helpful for someone
1) In the device, go to dev settings/ dev tools and enable USB debugging.
2) Start your app on genymotion (for instance if you are using ionic framework, then launch the app using "ionic run android"
3)Go to you chrome and try running "chrome://inspect"
4) Also , please ensure that you have android 4.4 or above version. Else it wont work. I spent quite a lot of time because i was using android 4.3 version.
Hope this helps
I found it far simpler to use a product like Ghostlab (https://www.vanamco.com/ghostlab/) (paid product).
It will let you connect to the site running on your host machine, from the Genymotion emulator. You can then launch chrome dev tools from your host machine.