How to debug a website on Android? - android

I don't have an Android phone or tablet, and it seems that on some Android devices using stock browser my website is stuck for half a minute until it loads.
I've been testing with various emulators found online like BrowserStack, etc. The browser is just stuck for a while. That's not the case for iPhone or desktop.
How can I debug this issue? How can I see a developer console or errors or figure out what's causing the slowness?

You can use Remote Debugging with Chrome for Android if the problem happens on this browser (which is the default browser on recent Android versions)
How to use Remote Debugging with the emulator
If the issue only occurs with the legacy Android browser, you might be able to get some information by monitoring the http requests with Fiddler
How to use Fiddler with Android

These links will help you debug code in general without having a physical android.
Android studio user guide on debugging: Start, Projects and Tools.
Google developers page.

Related

Web development on Android tablet - no dev tools?

Suppose you wanted to do web development on an Android tablet. There are some options available for code editors etc. One thing I can't get around is that Chrome for Android doesn't have dev tools. It doesn't even allow to disable the cache. Are there any other browsers that have the basic console and inspect element functionalities?
Please note that it doesn't have anything to do with remote debugging. I'm looking for a way to develop with an Android tablet only.
The only thing that comes to mind is BrowserStack, but it would be slow as hell especially on a mobile device.
Look at these features requests for both Firefox and Chrome. Sadly, nobody seems to really care, given that remote debugging solves the problem when you have a computer next to your tablet.
https://bugs.chromium.org/p/chromium/issues/detail?id=817837&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
https://bugzilla.mozilla.org/show_bug.cgi?id=1434065
In the meantime, you can :
use a service like Browserstack with the devices (ex. Galaxy S9) that offer native debugging (the devtools are on your side, communicating with the remote mobile device)
use that modified version of chromium and the accompanying hack : https://github.com/laem/chromium. Building a stable and fast version of Chrome is time and resource consuming, any help appreciated !
The best solution would obviously be to build Chromium with the devtools integrated, but I don't have enough knowledge : is it just an "if (!android) import DevTools" line to remove ? Or would it need lots of adaptations to work ? It's all HTML and JS as far as I know, so it shouldn't be that hard to get the console, debugger and inspector to work.

How to debug and view HTML ans CSS source code for Android default browser?

I always have issue with the CSS styling in the default Android browser while building my responsive website. What I usually do was doing trials and errors on pc until the problem was solved.
There is a tool for chrome browser:
https://developer.chrome.com/devtools/docs/remote-debugging
but chrome usually display fine for me just that I need a debugging tool for the default Android browser. Is there any solution for this?
I'm not aware of any way to test on the old android browser using remote debugging, as new devices nowadays (Anything post 4.0) have chrome installed by default on Android.
One method you can use to help with testing responsive/mobile sites is using Chrome's mobile emulation tool
Either select a device on that list, or fake out the user agent with something from this page http://www.useragentstring.com/pages/Android%20Webkit%20Browser/

Phonegap Android viewing console logs

I have this Phonegap application I'm working. Unfortunately, I having problems pertaining to a particular feature at the moment. I tried deploying on any iOS device, the error is present. Though by default, we programmers, should solve this problem right away. But I was wondering how I could see console.logs("..."); on Android.
I've search for related answers regarding this. Most of the answers mostly suggests I should use WebInspector using jshybugger. That won't be a problem unless I will be building the project on a level below API L19 (Kitkat) and maybe as low as API L10 (Gingerbread).
Using the AVD emulator was also a suggestion, yet I can't find a way to boot the emulator properly on my computer. And as we all know, Android Emulator is a hell of a snail compared to iOS Simulator.
Unlike for iOS I could just use the Safari Device Inspector to view the console logs and resources. I was hoping for a similar feature without using jshybugger and can be supported by at most Android API L10?
console.log should appear on the adb, you can see it on eclipse or on android monitor (monitor comes with the android sdk)
Or you can use this online debugger, it creates a javascript script that you put in your index and then you can see your phone debugger there. You can do it locally too using weinre

Debug Sencha App in Mobile Browser

Good Day!
I am a newbie to the mobile tech. I have a question hope you can give me some tips or help.
My problem right now is i have a sencha app. I try deploy it using android eclipse.
1.How can i debug it from mobile?
Note: I already installed a chrome dev tools from my laptop, but the problem is that when the application launch in my mobile it doesn't use a browser.
2. How can i call my sencha app in the chrome browser mobile.
Thank you in advance.
Sincerely yours,
Jhon
Are you mainly trying to access the same dev tools that the Chrome browser gives you? If so, there are a few solutions out there. For Android you can use weinre for remote debugging:
http://people.apache.org/~pmuellr/weinre/docs/latest/
In fact, PhoneGap had a hosted instance of this online a while ago, last I remember (quite a while ago) it was down for a long time, but I just checked and it appears functional:
http://debug.phonegap.com/
It will probably run slower than your own weinre, but it saves you the trouble of dealing with setting up on your own server.
If you are working on iOS there is actually a rather nice way built-in to iOS/OSX. You need a machine with OSX on it, plug in your iOS device or run the iOS simulator, and then open Safari on your laptop/desktop. Safari has a develop menu, allowing you to open debugging tools (inspector, console, etc) for your remote devices.

How can I debug the Google Analytics Tracking Code on a mobile device

We are currently seeing a problem where mobile devices that surf to our website don't seem to get picked up, not with page view or in realtime or in the events tracking. This all happened since March 15th but we are only now really starting to notice it. Debugging the analytics code snipped based on this https://developers.google.com/analytics/resources/articles/gaTrackingTroubleshooting was no problem on desktop but how do you do that on a mobile device. Android Phone or iPhone. Is there any way to debug the tracking code on the phone to make sure it works? We had been successfully using ga.js with async snytax without problems for a good long while.
For testing on iOS 6 and later you can plug your iPhone into your desktop and use your desktop version of Safari as described here by Apple. You can then see the results of the ga_debug.js.
Android has a similar tool, however, it does require you to install the Android SDK.
I'm not too sure about other phone operating systems, but that covers the main two in your question :)

Categories

Resources