Depuración de fallas en el diseño de CSS en Android

Question

Tenemos un sitio web existente y me pidieron que pruebe su compatibilidad con navegadores móviles.

He instalado el Android SDK en mi PC de escritorio. Puedo ver mi sitio localhost en el emulador y he identificado una serie de problemas técnicos en el diseño de la página que ocurren en el navegador Android.

Pero como ninguno de estos problemas ocurre en ningún navegador de escritorio, he estado luchando con la forma de depurarlos. Por ejemplo, en Firefox, es muy fácil usar Firebug para ver qué hojas de estilo se han aplicado y para ajustarlas sobre la marcha para ver cómo afecta el diseño. Pero no he encontrado una manera de hacer algo similar en el emulador de Android.

La pregunta es, a falta de prueba + error, ¿cómo hago para determinar qué está causando esos problemas de diseño? ¿El navegador de Android (o el SDK de Android) tiene algún tipo de herramientas que son útiles para depurar CSS? Si es así, ¿cómo los uso?

[EDIT] no he encontrado una solución para esto, así que estoy abriendo las puertas a los cazadores de recompensas ...

Answer 1

Weinre es probablemente el más cercano a lo que estás buscando:

Si lo que estás buscando es algo que le permite ajustar el diseño en tiempo real que debe hacerte feliz.

Answer 2

Ya ha visto esto, pero el sitio de documentación SDK tiene alguna información básica sobre el desarrollo y la depuración de aplicaciones web en Android:

Web Apps Overview

Debugging Web Apps

espero que ayude!

Answer 3

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

me encontré con varias opciones que aparecen como si se deben trabajar para usted si un emulador/simulador será suficiente o al menos empezar. El beneficio de esto es que las Herramientas de desarrollo de Chrome parecen funcionar con los complementos.

Answer 4

No sé cómo detectar un dispositivo móvil pero detecto un cliente con el agente de usuario. Debido a esto, simplemente puedo enviar una cadena de agente de usuario diferente para probar CSS, que funciona bastante bien.

Para Firefox utilizo User Agent Switcher. Además, uso la herramienta Web Developer no solo para ver todas las configuraciones, sino también la opción Cambiar tamaño para simular el ancho de la ventana gráfica.

Apple's Safari tiene una extensión de desarrollador y también un User Agent Switcher. Puede agregar su propia cadena de agente de usuario.

Answer 5

Personalmente, preferiría hacer esto en el hardware de Android real. En uso, un teléfono con pantalla táctil es bastante diferente incluso al emulador más preciso; cosas como gamma, densidad de píxeles, rendimiento, interacción táctil (¿sus enlaces son lo suficientemente grandes?), orientación vertical/horizontal e incluso el hecho de que lo tenga en sus manos lo hace bastante diferente de la experiencia de escritorio. Si quieres ver qué tan bien funciona tu sitio en dispositivos móviles/Android, obtén un dispositivo de segunda mano barato para probar.

En cuanto a la depuración; Siempre incluyo mi propia función de "registro" que crea una consola div # si la consola Firebug/navegador no está disponible. Esto funciona razonablemente bien para la depuración en un teléfono con la advertencia de que cubre parte del contenido. A continuación, puede imprimir el estilo actual de un objeto con algo como

log(window.getComputedStyle(document.getElementById("myobj")); 

Nota: Lo anterior no funcionará en IE.

Answer 6

He encontrado este enlace para la depuración remota en Android:

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

creo que esto es lo que busca.