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/
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.
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.
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.
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).
I'm working on a javascript framework that generates webkit browser pages which emulate a native app for Android & iPhone.
I'm using an iPhone emulator (iBBPhone -- very nice) to see how my pages would look on the iPhone and iPad. I was curious if there was something besides the Android SDK phone emulator that would simulate the Android browsing experience. I'm using desktop Google Chrome right now as a "pretend Android" browser but I'm not sure how alike they really are.
The Android emulator that ships with the SDK is a bit too slow to fire up on my box to be of great use in what I'm doing (even when starting up a saved image), and I was curious if there was anything else out there that simulates Android browsing. Thanks!
I think this Firefox plugin will let you display the site as it would show up in several different types of browsers. I know it supports iPhone so I imagine it will do Android as well. This page also talks about some other Firefox plug-ins that may be useful to you.
Chrome has a nice add-on named Ripple that does the job nicely I've found. http://ripple.tinyhippos.com/
These guys pretend to meet this need. Might be a good idea to check it out.
http://www.browserstack.com/mobile-browser-emulator