I am building a hybrid app, with AngularJS, Cordova, Restangular ond client side and Python with wsgiref.simple_server on server side. I am not doing anything special, this is very simply requests like this:
Restangular.one('/devices').get().then(function (response) {
viewModel.devices = Restangular.stripRestangular(response.devices);
});
I set baseUrl for Restangular:
.config(function(RestangularProvider){
RestangularProvider.setBaseUrl('http://192.168.54.102:8000/');
})
And when I use it on local computer with Chrome browser, everything is fast, works normal. But when I use it on Android on Phonegap developer app on device or install app on device with Android, it works crazy slow. It looks like it is send to server with big delay, cause it takes some time as I see debug server log on server side. It occurs also when python application with server is not in debug mode, for example when I start it normally after install on local computer. As I see some people has this problem, does anybody found a solution or a reason, which causes very slow HTTP requests in hybrid application? Thank you in advance for every answer.
Since you are a hybrid developer, I am sure you are familiar with the Chrome DevTools. For me on a Mac, hit cmd + option + i, or go to View -> Developer -> Developer Tools.
The really great thing about Chrome in recent history is it now works with Android WebViews too. Hybrid developers haven't always had this convenience, and had to debug essentially handcuffed using tools like Weinre.
Now we can use the DevTools directly in the Chrome browser while your Android device is connected by ADB from a new tab calling chrome://inspect
Here is some more detailed information on how to do this if you get stuck.
From here open up the network panel and see how long your requests are taking. If they are showing a significantly longer amount of time to load here, the issue has nothing to with Angular, Cordova, Restangular or probably even Hybrid architecture at all. I would check your network and performance elsewhere on the device.
If this is definitely not the issue, I would use the Timeline tab in the DevTools to see what is taking so long between your browser receiving the information and your device displaying it. If there is any significantly longer process taking place in between, you will see it here.
Related
I have a JavaScript app running in my desktop Chrome browser which is reading and writing to Firebase. I'd like to get a sense of how much traffic it uses (vs any local caching) and I figured I could just watch in the Chrome Inspector.
I'm not seeing any such traffic. I assume I need to tweak some Inspector setting, but it looks like I have everything turned on and nothing filtered.
How can I see this traffic? (For my current simple needs, I'd much rather do so in Chrome, and not have to fire up WireShark)
Firebase uses a websocket to communicate with clients. In the devtool's networking tab, filter by "WS" (websocket) and you should see the connection that Firebase is using.
There is a great extension for Chrome called 'GTM/GA Debug' that has a readout for Firebase hits. When using the extension in Chrome Dev Tools, look at the tab named GA4F (Google Analytics for Firebase). It is very helpful for debugging.
I'm trying to develop a Chrome App that will work together with a Chrome Extension that I already created, wherein the Chrome Extension will send information to the Chrome App.
For this communication I thought use the WebSocket locally, in Chrome Extension I managed to make the Client, but now I'm having difficulty in creating the Server in the Chrome App, because I wanted to make as simple as possible without having to install something beyond of the Chrome App.
Among the first Google results there is a sample app from Chrome team: Http WebSocket Server.
You've got to understand that making a server in Chrome Apps is difficult; you are given access to a raw socket, and you need to fully implement the protocol that a particular server must use. Even a HTTP server is non-trivial, WebSockets is even less so.
So: it's possible, but it's not simple unless you're using an existing library.
Just to add to the accepted answer:
There is a Chrome Extension already in the Chrome Web Store: Web Server for Chrome.
And it is opensource: GitHub Link. You can use it as a library to your Chrome App.
Cheers!
From previous projects I know that Apple's Captive Network Assistant (aka WISPr client, too) runs a restricted browser, see How can I debug the browser in Captive Portal? and Ajax on Captive Network Assistant on iOS and OSX.
My hotspot is running a angularJS web page. On a Windows Phone 8.1 and an OS X Lion my angular page works fine. On my iOS 8.3 there must be a JavaScript error somewhere in the code, because I can see the angular variable expressions {{myVar}} in the code which means the angular framework isn't loaded properly.
Any idea what could be the cause?
Solved
Cause has been found, not by me but a friend of mine. Turns out that the CNA browser (WISPr client) doesn't allow the use of the browser's local storage. Whenever you try to write some data into the local storage, the application crashes.
Thus, the solution is either to switch from local storage to normal cookies or to do a user agent detection in JavaScript and exclude CNA browser (WISPr clients) from the use of the local storage.
Many thanks #chedabob, the idea of checking if JS is enabled led to the local storage check. Really appreciate your support.
You could possibly use WeinRe to remotely debug it, however if the root of your problem is the Captive Portal view isn't running Javascript, this probably isn't going to help
https://people.apache.org/~pmuellr/weinre-docs/latest/
I am currently working on a HTML/JS application that will be embedded in an iOS and an Android app. Because the android app is not yet finished I am testing this on the chrome browser in Android. I fixed all issues there but when I open the same web app in the native browser nothing really works as expected.
So my question is : Is there a way to debug in a native browser on an android device?
In chrome this was pretty easy with remote debugging.
(Please do not advice me to use 'log' statements for debugging because that's not what I am looking for here)
And just to spill my guts : the Samsung Tablet's native browser is the only device that's causing me a headache!
Typing about:debug in the address bar of the native browser will toggle the 'Debug' options in the settings menu.
The 'Show JavaScript Console' option will allow you to see JavaScript errors in your webpage.
NB I believe the JavaScript Console will only be displayed if there is an error.
HTH
Nick.
The new Samsung Internet browser (I think you meant this browser with "Samsung Tablet's native browser") is now based on the Chromium browser and thus supports its remote debugging interface.
Enable USB debugging on your device as described here.
Then connect your device via USB (Oh, surprise!).
Visit chrome://inspect on your computers Google Chrome browser and you will be guided to create the connection:
Then you just have to click on the devices inspect link and an developer tools window will pop up.
More info like why there is an Samsung Internet Browser at all can be found here.
You can easily debug your web application with Web Inspector Remote (weinre).
Look at this post in order to find out how to install and use weinre.
I hope it will help you if this question is still actual.
If you have updated your device you can go to settings -> Debug -> 'Remote Debug Enable'
Once enabled you can debug the native browser just like you can debug chrome.
You can try vorlon solution too, it has a nice web interface & very easy to install
& It's free
But if you can't see clear console errors with volron, you probably want to use #Nick's solution, sometimes complex errors prevents even vorlon or weiner from catching them. So once you fix blocking these issues, probably volron will start catching them properly
I have written a phonegap application, and it performs a pretty simple task, it gets some JSON from a YQL link, and then displays it nicely to the user. This works excellently when I run it using Google Chrome on a Desktop, but, my client tells me that it does not work on his device which is Android 2.3. What can be going wrong? I'm using phonegap build to build to app, and they tell me that it is given internet permission, but, when my client puts the APK on the phone (its not on the market yet), does he need to do something special for it to access the internet?
Thanks a lot,
Dhaivat
in phonegap, allow external host : Open phonegap.plist -> external host and add your url or * to allow all
within the phonegap app the webapp runs under the file:// protocol - this might affect things.
you should test this at least on an emulator yourself - clients usually screw up anything some might screw up when testing ;) best would be to test on an actual device tho.
I'm not sure if this will help but I had a similar problem testing my app here:
https://stackoverflow.com/questions/17496104/json-wordpress-feed-not-appearing-in-android-studio-emulator-using-phonegap
I needed to change access origin to ="*"/ in my config.xml