Home » Android » Debugging CSS layout glitches in Android

Debugging CSS layout glitches in Android

Posted by: admin April 23, 2020 Leave a comment

Questions:

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…

How to&Answers:

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.

Answer:

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!

Answer:

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.

Answer:

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!

Answer:

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.

Answer:

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).