Usando Inspector web de Chrome para depurar un sitio en dispositivo Android real
24/09/2019 por Casanova

Front.id

Configurar dispositivo Android

Lo primero que debemos hacer es habilitar la Depuración por USB en el movil que vas a usar mediante la opción "Enable USB Debugging". Si no conoces la forma de hacerlo en tu dispositivo, puedes consultarlo aqui.

Enable USB Debugging

Una vez habilitada la opción lo siguiente es conectar el móvil al ordenador mediante un cable USB. Debemos seleccionar la modalidad "Transferir archivos" para poder debuguear.

USB

Detectar dispositivo Android

En tu ordenador, abre Chrome y luego abre el inspector web.

Inspector web

 

Desde el inspector web, haz click en el Menú principal y selecciona More tools > Remote devices

Inspector web

 

Comprueba que esta marcada la opción de "Discover USB devices"

Remote devices

 

Por lo general la primer vez que haces esto, ves que el Inspector web detecta un dispositivo desconocido y pedirá acceso a tu móvil. 

Desconocido

Ahora solo queda que en tu dispositivo Android permitas la depuración por USB:

Permitir depuración USB

Hecho esto, si ves un punto verde y el texto Connected debajo del nombre de tu dispositivo Android, significa que el inspector web se ha conectado correctamente con el dispositivo.

Success

Depurando el contenido en nuestro dispositivo Android

Abre Chrome en tu dispositivo Android. Desde el inspector web de tu ordenador veras el nombre del modelo de tu dispositivo seguido por su numero de serie. Por debajo de eso esta la versión de Chrome que se ejecuta en el dispositivo.

Depurando Android

Desde New tab podemos ingresar una URL que se abrirá en el dispositivo Android. Por debajo de esta opción, nos figura la pestaña que te ya tenemos abierta.

Le damos a Inspect y se nos abrira una nueva ventana:

Inspector web

Con esto ya podemos empezar a depurar a nuestras anchas :)

Add new comment

The content of this field is kept private and will not be shown publicly.

HTML Restringido

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.