Cómo depurar páginas web en Chrome para Android en el ordenador

Como administrador de un blog, depuré mi sitio web personal usando Chrome para ver cómo se verían los cambios en el tema y CSS antes de implementarlos permanentemente en el servidor. No hace mucho tiempo, cuando nunca presté atención a las páginas móviles, ya que sólo unos pocos visitantes visitaban mi sitio utilizando un teléfono inteligente. Pero hoy en día, un porcentaje significativo de los visitantes son teléfonos inteligentes y tabletas, y por lo tanto se ha vuelto necesario cuidar su aspecto y presentación.

Si se tratara de una página en el ordenador, uno podría haber depurado fácilmente usando la opción del menú contextual del botón derecho de Chrome, pero esa no es la opción con las páginas en el móvil. Así que hoy te mostraré cómo puedes depurar páginas web móviles en tu ordenador usando Chrome para Android y Android SDK.

Depuración de la página web

Paso 1: Descarga e instala el SDK de Android en tu ordenador y ejecútalo. El instalador le pedirá que descargue Java si no lo tiene instalado.

Por primera vez que ejecute el SDK de Android en su ordenador, le pedirá que descargue varias API y herramientas. Si el único propósito de instalar Android SDK es depurar las páginas, desmarque todo excepto Herramientas de la plataforma Android SDK y haga clic en el botón Instalar paquete .

Paso 2: Después de instalar las herramientas de la plataforma Android, abra el Run Box (Windows+R) y ejecute %userprofile%%%AppDataLocalAndroidandroid-sdkkplatform-tools para abrir el directorio de herramientas de la plataforma Android.

Paso 3: Ahora mantenga presionada la tecla Ctrl+Mayúsculas y haga clic con el botón derecho del ratón en la carpeta para abrir la línea de comandos. También puede abrir el símbolo del sistema utilizando el cuadro Ejecutar y navegar hasta la carpeta manualmente.

Paso 4: Una vez hecho esto, abra Chrome en su teléfono Android, abra Settings->Developer tools y compruebe la opción Enable USB Web debugging.

Paso 5: Ahora en la línea de comandos ejecute el comando adb forward tcp:9222 localabstract:chrome_devtools_remote y abra el navegador Chrome en Windows cuando la ejecución se haya realizado correctamente.

Paso 6: Abra la página que desea depurar en su navegador Android Chrome y abra la URL localhost:9222 en el navegador Chrome de su ordenador.

Eso es todo, verás todas las páginas que están abiertas en tu navegador Android como miniaturas en tu ordenador. Para abrir la página de depuración, simplemente haga clic en la imagen en miniatura del sitio web correspondiente. Podrás seguir los cambios de depuración que realices en tu ordenador directamente en Android en tiempo real.

Conclusión

Estoy seguro de que este truco ayudará a muchos desarrolladores web a optimizar sus páginas web para teléfonos inteligentes. He usado el truco para configurar mis páginas web y funcionó a la perfección. Sin embargo, si conoce una forma mejor de depurar las páginas web de los teléfonos inteligentes en la computadora, compártala con nosotros.

Última actualización el 8 de febrero de 2018

Deja un comentario