¿Cómo depurar CSS en el navegador nativo de Android?

Estoy construyendo una aplicación híbrida con Cordova para Android. El HTML5 / CSS3 se procesa correctamente con Chrome para escritorio y Chrome para Android.

Sin embargo, a través de Córdoba, el HTML5 / CSS3 se procesa con el navegador nativo (la aplicación llamada "Internet"). Y parece que hay algunos problemas con la interpretación de CSS.

Firefox tiene Firebug y Chrome tiene un panel de desarrolladores, disponible en el escritorio para la depuración remota. ¿Conoces alguna herramienta similar que podría utilizar para depurar el CSS de forma eficiente el navegador nativo móvil?

Finalmente encontré a Weinre . Esta solución pertenece al proyecto Cordova. http://people.apache.org/~pmuellr/weinre/docs/latest/

He intentado weinre en el hojeador común del androide 2.2 y está trabajando agradable

Para configurarlo,

sudo npm install -g weinre // make it available to external (than just localhost) weinre --boundHost -all- // include this line (change to your IP address) to every page to be tested <script src="http://xxx.xxx.x.xxx:8080/target/target-script-min.js#anonymous"></script> 

Más detalles de este sitio web Depuración remota con weinre

Sólo para dar una opción más reciente.

También puede utilizar BrowserSync. Actualmente Weinre ya está integrado a esto.

 # Using a local.dev vhost $ browser-sync start --proxy # Using a local.dev vhost with PORT $ browser-sync start --proxy local.dev:8001 # Using a localhost address $ browser-sync start --proxy localhost:8001 # Using a localhost address in a sub-dir $ browser-sync start --proxy localhost:8080/site1 

http://www.browsersync.io/docs/command-line/

En primer lugar, ejecuto mi consola de dispositivo virtual Android con $ android avd e iniciar mi configuración de Android v4.4.2 emulación sólo con el navegador nativo instalado.

A continuación, ejecuto mi Chrome v54.0 para escritorio en mi portátil, abra Google-Developer-Tools / Top-Right-Contextual-Menu / More-Tools / Remote-Devices

Allí, veo mi dispositivo virtual en el estado conectado , así que puedo chascar en el botón de inspección de cualquier página de mi aplicación de Ionic2.

Esta acción abre una nueva ventana flotante de las Herramientas de desarrollo de Chrome, donde puedo inspeccionar CSS, HTML y Javascript de la misma manera que lo hago en mis aplicaciones web.

Espero que esto pueda ayudar a alguien.

Esto parece ser preguntado en otro lugar, pero tal vez no con una pregunta tan específica. Independientemente, he encontrado esta respuesta ( ¿hay algún tipo de Firebug o JavaScript consola de depuración para Android? ) Para ser útil, pero en lugar de usar Cordova, en combinación con mi comentario, utilizando Xamarin Android Player .

Use la API JavaScript de la consola haga clic aquí para obtener más información

  • ¿Hay CMS de aplicaciones móviles gratuitas?
  • Seguridad de aplicaciones móviles híbridas
  • Aplicación híbrida de Visual Studio 2015 - obteniendo "EPERM, operación no permitida"
  • No se puede crear la versión firmada después de actualizar la versión de android en Córdoba
  • Cordova - Error: Error al recuperar plataforma android
  • Evento de keypress de JavaScript no creado en el navegador de Android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.