Cómo depurar páginas web en Chrome para Android en la computadora

Como administrador de un blog, depuro 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, nunca presté atención a las páginas móviles, ya que solo unos pocos visitantes visitaron mi sitio usando un teléfono inteligente. Pero hoy en día, un porcentaje significativo de visitantes se compone de teléfonos inteligentes y tabletas, y por lo tanto, también se ha vuelto necesario cuidar el aspecto y la presentación.

Si se tratara de una página en la computadora, una podría haberse 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. Entonces, hoy te mostraré cómo puedes depurar páginas web móviles en tu computadora usando Chrome para Android y Android SDK.

Depuración de la página web

Paso 1: descargue e instale Android SDK en su computadora y ejecútelo. El instalador le pedirá que descargue Java si no lo tiene instalado.

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

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

Paso 3: Ahora mantén presionadas las teclas Ctrl + Shift y haz clic derecho en la carpeta para abrir el símbolo del sistema allí. También puede abrir el símbolo del sistema con el cuadro Ejecutar y navegar a la carpeta manualmente.

Paso 4: Una vez hecho eso, abra Chrome en su teléfono Android, abra Configuración-> Herramientas para desarrolladores y marque la opción Habilitar depuración web USB.

Paso 5: Ahora, en el símbolo del sistema, ejecute el comando adb forward tcp: 9222 localabstract: chrome_devtools_remote y abra el navegador Chrome en Windows en una ejecución exitosa.

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

Eso es todo, verá todas las páginas que están abiertas en su navegador Android como miniaturas en su computadora. Para abrir la página de depuración, simplemente haga clic en la miniatura del sitio web correspondiente. Podrá realizar un seguimiento de los cambios de depuración que realice en su computadora 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 utilizado el truco para configurar mis páginas web y funcionó a la perfección. Sin embargo, si conoce una mejor manera de depurar páginas web de teléfonos inteligentes en la computadora, compártala con nosotros.