I'm building my first backbone.js app, and was a bit disappointed with the performance in chrome, but figured I'd optimize when I got further along.
I just tried viewing the app on my tablet (touchpad running android 2.3.7), and I don't get ANY of the javascript elements loading. I don't know if this is because of a bug, or maybe my backbone files are too large??
Any idea what would cause this, and how I would go about debugging?
The console on the desktop shows no errors.
apparently you can use console on android as well with a certain tool called logcat
you can find more information on this link:
http://developer.android.com/guide/webapps/debugging.html
You could try to use WEINRE.
The setup might be kind of a challenge, but when it works, it does work great.
It gives you the webkit inspector on your computer screen, live connected to the app on your device.
Jonathan Stark gives a nice intro in this video: http://www.youtube.com/watch?v=4nL6xey13fE
Edit: If you don't like weinre, you could always use RIM's RIPPLE.
Ripple emulates most devices' mobile browsers. I don't really like it though because the ux-emulation you get is often way of the real thing.
Related
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.
As responsive design and mobile web development become the norm, like others I suspect, I find myself testing and bug fixing on a wide range of mobile and handheld devices. Traditionally, errors in the CSS with layout or presentation were made substantially easier to fix using things like firebug or the chrome dev tools. Even JavaScript errors could be picked up and debugged in these tools.
However, the same sorts of errors are now significantly more difficult to isolate and fix. We no longer have the error console to see when JavaScript errors occur, we don’t have an inspector (god, I wish we had remote debugging on all modern mobile browsers). I’ve got an annoying bug in Opera (which I know can be remotely debugged: http://dev.opera.com/articles/view/remote-debugging-with-opera-dragonfly) and I’ve resolved others in the Android browser and Safari for iOS through brute force rather than any real technique, but I was just wondering what are the preferred tools, techniques and tips for debugging responsive issues on mobile devices?
Thanks
did you look into weinre? gives you a (limited) remote web inspector (after some set up)- solved some real problems for me!
Opera Dragonfly (I have an obvious bias here ;-)) and the indispensable Microsoft Fiddler HTTP debugger if the phone/device allows you to configure a proxy server. Fiddler helped me debug many problems before Dragonfly grew powerful enough, and is still a fallback if I have problems with Dragonfly.
How are you doing solving the annoying bug in Opera, BTW? :)
You can use Chrome's remote debugging feature on Android. For Android and iOS you should take a look at Adobe Shadow which gives you a remote inspector too.
And for iOS in the future: iOS 6 will have a built in remote inspector, easily accessible from Safari's debug menu.
Good article here also on how to use the Opera mobile emulatore and dragonfly remote debugger to debug Opera related bugs...
http://mobile.smashingmagazine.com/2012/08/30/responsive-designs-opera-mobile-emulator/
We have an existing web site, and I've been asked to test its compatibility with mobile browsers.
I've installed the Android SDK onto my desktop PC. I'm able to view my localhost site in the emulator, and I have identified a number of glitches in the page layout which occur in the Android browser.
But since none of these issues occur in any desktop browser, I've been struggling with how to debug them. For example, in Firefox, it's very easy to use Firebug to see what stylesheets have been appies and to adjust them on the fly to see how it affects the layout. But I haven't found a way to do anything similar on the Android emulator.
The question is, short of trial+error, how do I go about working out what is causing those layout issues? Does the Android browser (or the Android SDK) have any kind of tools that are useful for debugging CSS? If so, how do I use them?
[EDIT] I haven't found a solution to this, so I'm throwing open the doors to the bounty hunters...
Weinre is probably the closest to what you're looking for:
If what you're looking for is something that allows you to tweak layout in realtime it should make you happy.
https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en-US
https://chrome.google.com/webstore/detail/cllkoedgiefnomcccogcalmjogjfcpji?hl=en-US
https://chrome.google.com/webstore/detail/cghdkdcepiflkhaddpomjehcmdojgobh?hl=en-US
I found several options that appear as though they should work for you if an emulator/simulator will suffice or at least get you started. The benefit to this is that the Chrome Developer Tools appear to work with the add-ons!
Personally, I would much prefer to do this on actual Android hardware. In usage a touch screen handset is quite different to even the most accurate emulator; things such as gamma, pixel density, performance, touch interaction (are your links big enough?), portrait/landscape orientation and even the fact you hold it in your hand makes it quite different to the desktop experience. If you want to see how well your site works on mobile/Android, get a cheap second hand device to test on!
As for the debugging; I always include my own "log" function which creates a div#console if the firebug/browser console is unavailable. This works reasonably well for debugging on a handset with the caveat that it covers part of the content. You can then print out the current style of an object with something like
log(window.getComputedStyle(document.getElementById("myobj"));
Note: The above will not work in IE.
You may have already seen this, but the SDK Documentation Site has some basic information on developing and debugging web apps on Android:
Web Apps Overview
Debugging Web Apps
Hope that Helps!
I don't know how you detect a mobile device but I detect a client with the user agent. Because of this I can simply send a different user-agent string to test CSS which works fairly well.
For Firefox I use User Agent Switcher. Additionally I use the Web Developer tool not only to view all settings but also the Resize option to simulate the viewport width.
Apple's Safari has a developer extension and within also a User Agent Switcher. You can add your own User Agent string.
Chrome provides tools for doing this now. Just visit:
chrome://inspect/
With your device connected and ADB running - you can then use all of the Chrome web element inspection tools. This works with the browser, but also with any app that renders in a WebView (e.g. Cordova).
There appears to be no accessibility features for the Android emulator. Ideally one would be able to have their computer read the contents of the Android emulation screen to them. From what I've seen, the contents of the Android screen and the buttons that can be used to manipulate the emulation Android etc. are all invisible to a screen reader.
Does anyone know of a workaround for this?
I found what looks like a promising resource here. It's a Text-to-Speech library for Android developed by T. V. Raman of Google. I'm still looking for more information from the community though.
I'm up dating my answer with my experiences. I bought a refurbished first gen Nexus 7 to try and learn Android programming. Installing the Android SDK with the bundled Eclipse was completely accessible. I was also able to enable accessibility on my Nexus 7 with no sited help. Enabling developer settings on the Nexus was also fully accessible. I was able to create an Android project using Eclipse with no problems. I was unable to use the graphical layout editor to add Widgets to a layout, although I was able to edit the XML to create a button with no issues. It looks like layouts are doable, you will just have to reference the docs for proper XML a lot. I created a method to be called when the button was clicked with a for loop so I could test debugging. I debugged the application on my Nexus and set a breakpoint in the body of the for loop. I was able to use standard Eclipse functions to step by line once the breakpoint was hit and view variable values. So far Android accessibility is looking good for the standard Android SDK. I am planning on testing out Android Studio and will update my answer with the results.
A long thread on this can be found at
http://www.freelists.org/post/programmingblind/Is-Android-Programming-Accessible
What I've gathered from it is that accessibility can be enabled with little to no sighted help. When I tried enabling talkback it made the emulator unusably slow although this was over a year ago so maybe things have gotten better? I'm a blind programmer and know Eclipse is accessible with Jaws so he should be able to program with either an IDE or command line and a text editor. I haven't researched this but if the emulator is slow maybe another option would be to run an x86 build of Android in VMWare player? A screen reader written by google employees can be found at
http://google-opensource.blogspot.com/2009/10/talkback-open-source-screenreader-for.html
and one written by someone else can be found at
http://spielproject.info/
One option might be to do debugging on a real phone with accessibility turned on. Debugging works essentially the same (and you don't have to deal with the slowness of the emulator - I much prefer this method because it's so much faster).
It's surely a more expensive option if your friend doesn't already have an android phone.
I think the better question might be "why are the accessibility features missing from the android emulator"? Maybe text-to-speech is too slow on the emulator?
More or less as it says on the tin.
Before I even contemplate downloading the SDK, I was wondering if there was any way of testing Android apps that I'd write without an Android phone available to me? I'm unsure as to whether or not the tools that come with the SDK come with an emulator like VS does for Windows Mobile.
Sorry if this is a stupid question, but maybe I'm searching for the wrong thing.
Edit I don't suppose there's anything that'll let me write widgets on/for an emulated version of the interface HTC use on the Hero/G2 either is there? Not that it would matter that much.
There's an emulator available as part of the SDK.
http://developer.android.com/guide/developing/tools/emulator.html
I'd add that the emulator is really quite comprehensive. Things like camera previews don't actually display camera data, but they put block animations in their place. All in all it's one of the best mobile emulators I've seen to date. Probably better even than gasp the iPhone simulator.
As said above there's an emulator available,however with larger apps it gets fairly tedious to use the emulator.Its fine for learning the ins and outs but id suggest investing in an android phone once you've got a good grasp of the sdk,it really does make a difference!.