Depuración en dispositivos móviles

Requisitos mínimos para la depuración de iOS

• Safari versión 6+ ejecutándose en Mac OS
• iPhone o iPad con iOS 6+

Uso de la depuración remota de Safari

La actualización de Apple iOS 6 introdujo Safari Remote Debugging, que te permite depurar páginas web en la aplicación Safari en dispositivos iOS. Para empezar, siga los pasos que se indican a continuación:

1. Conecte su dispositivo iOS a su máquina a través de un cable USB.
2. En el dispositivo, abre la aplicación Configuración . Selecciona Safari, desplázate hacia abajo hasta la parte inferior de la página y abre el menú Avanzado. Habilite la opción Inspector Web .

   

3. Aún en tu dispositivo, abre la aplicación Safari y navega a cualquier página web.
4. En el Mac, inicia Safari, abre Preferencias (PreferenciasdeSafari >) y navega a la sección Avanzadas. Active el menú Mostrar desarrollo en la opción de barra de menús .

   

5. Abra el menú Desarrollar . Verás tu dispositivo iOS en la lista. Al pasar el ratón sobre el nombre del dispositivo, verá la URL del sitio que ha explorado en el dispositivo que se muestra.

   

6. Seleccione la dirección URL y se abrirá una ventana de Web Inspector , que le permitirá previsualizar, inspeccionar y depurar contenido en su navegador móvil desde el escritorio.

   

7. En la sección Recursos , puede obtener una vista previa e inspeccionar la página Web. Al pasar el cursor sobre los elementos del Inspector Web , se resaltarán los elementos correspondientes en el navegador de su dispositivo iOS.

   

8. También puede usar las secciones Depurador y Consola para depurar aún más su página estableciendo puntos de interrupción, registro de datos, etc.

Requisitos mínimos para la depuración de Android

• Chrome 32+ ejecutándose en Mac o Windows
• Dispositivo Android con Chrome para Android 32+

Nota: Los pasos de esta sección se escribieron usando un dispositivo que ejecuta Android 4.3.

Habilitar la depuración en el dispositivo

Antes de comenzar a depurar contenido en el dispositivo, debe habilitar la depuración USB en la configuración del dispositivo.

1. Si tienes Android 4.2+ con Android, tendrás que habilitar las opciones de desarrollador de tu dispositivo antes de poder activar la depuración USB. En el dispositivo, abre la aplicación Configuración y selecciona el menú Acerca del teléfono . Localiza el número de compilación de tu dispositivo y tócalo siete veces.
2. Pulsa el botón Atrás de tu dispositivo y verás el menú Opciones del desarrollador que aparece en Configuración.

   

3. Abra el menú Opciones del desarrollador y marque la casilla para habilitar la depuración USB.

   

Depuración remota con Chrome para Android

Ahora que la depuración USB está habilitada en tu dispositivo, sigue estos pasos para iniciar la depuración remota con Chrome:

1. En tu ordenador, inicia Chrome y navega hasta about:inspect. En la página Dispositivos , habilite la opción Descubrir dispositivos USB .

   

2. Conecte su dispositivo a su máquina a través de un cable USB. En el dispositivo, se le pedirá un cuadro de diálogo que le preguntará si desea permitir la depuración USB. Elija Aceptar para permitir que el equipo se conecte al dispositivo.

   

3. En tu dispositivo, abre la aplicación Chrome y accede a una página web.
4. Vuelve a Chrome en tu ordenador. En la about:inspect página, debería ver el dispositivo conectado. Debajo del nombre del dispositivo, podrás ver una lista de todas las páginas abiertas en Chrome en tu dispositivo.

   

5. Para comenzar a depurar una página Web, seleccione el vínculo Inspeccionar debajo de la URL de la página. Esto abrirá las herramientas para desarrolladoresde Chrome.

   

6. A la izquierda de la pestaña Elementos , puede seleccionar el icono del dispositivo para abrir la función Screencast de DevTool. Esto le permite abrir una vista previa en vivo del contenido tal como aparece en su dispositivo móvil. Para obtener más información sobre cómo utilizar la difusión de pantalla para interactuar con el dispositivo, visite la documentación de Google.

Requisitos mínimos para Charles

• Charles es compatible con Windows, Mac y Linux
• Dispositivo iOS y/o Android

Configuración de Charles en su máquina

Siga los pasos que se indican a continuación para que Charles funcione en su máquina.

1. Descargue e instale Charles en su máquina.
2. En tu computadora, ejecuta Charles. En el menú, seleccione Configuración de > proxy proxy. Asegúrese de que se ha asignado un puerto (por ejemplo, 8888) y la opción Habilitar proxy HTTP transparente está seleccionada.

   

3. Seleccione Aceptar para guardar los cambios y cerrar el cuadro de diálogo.
4. En el menú, seleccione Proxy > SSL Proxy Settings. Asegúrese de que la opción Habilitar proxy SSL esté seleccionada.

   

5. En la sección Ubicación , seleccione el botón Agregar . En el cuadro de diálogo Editar ubicación , vaya al campo Puerto e introduzca 443. Seleccione Aceptar para guardar este cambio.

   

6. Seleccione Aceptar para cerrar el cuadro de diálogo Editar ubicación.

   

7. Seleccione Aceptar para salir del cuadro de diálogo Configuración de proxy SSL.
8. Navegue hasta Ayuda > SSL Proxying > Instale Charles Root Certificate en un dispositivo móvil o explorador remoto.

   

9. Debería ver un mensaje que identifica la IP del servidor local y el número de puerto (8888) que utilizará para configurar el dispositivo. También debería ver la URL para descargar e instalar el certificado. Copíe estos en el equipo para usarlos posteriormente.

   

Configuración de Charles en el dispositivo

En esta sección, aprenderás cómo configurar tu dispositivo iOS y/o Android para que funcione con Charles en tu ordenador.

Configurar el dispositivo iOS

1. En el dispositivo, asegúrese de que está conectado a la misma red que el equipo. Puede verificar esto navegando a la configuración > Wifi y seleccionando el nombre de la red para mostrar las opciones avanzadas.

   

2. En la sección HTTP de la parte inferior, seleccione Modo manual . A continuación, agregue la IP del servidor y el número de puerto (8888) que copió de Charles en un paso anterior.

   

3. En el dispositivo, abre un navegador y navega a http://www.charlesproxy.com/getssl. Se le redirigirá a la configuración de su dispositivo, donde se le pedirá que instale el perfil de certificado raíz personalizado de Charles Proxy . Seleccione el botón Instalar para instalar el certificado Charles en su dispositivo.

   

4. Siga los pasos para instalar el certificado Charles. Cuando haya finalizado, seleccione Listo.

   

5. A continuación, está listo para asegurarse de que su dispositivo confía en el certificado Charles. En el dispositivo, vaya a General > Acerca de la configuración de confianza de > certificados. Aquí debe encontrar el certificado Charles Proxy.

   

6. Habilite el certificado Charles. Observe el mensaje de advertencia. Es posible que desee deshabilitar este certificado cuando no se depura con Charles.

   

7. Ahora, usted será capaz de ver cualquier dato enviado y recibido en Charles.

   

Configuración de su dispositivo Android

1. En el dispositivo, abra un navegador y vaya a //chls.pro/ssl.
2. Se le pedirá un cuadro de diálogo Nombre de certificado . Especifique un nombre para el certificado y establezca el campo Usado para en Wi-Fi. Seleccione Aceptar para instalar el certificado.

   

3. A continuación, abre el menú Configuración > Wi-Fi . Verá una lista de redes a las que se ha conectado en su dispositivo. Seleccione la red inalámbrica a la que está conectado actualmente. Recuerde que esta red debe coincidir con la red a la que está conectado en su equipo.
4. Esto abrirá un pequeño cuadro de diálogo con tres opciones: Editar, Ver u Olvidar. Seleccione Editar.
5. En este cuadro de diálogo, desplácese hacia abajo hasta la parte inferior y active el campo Mostrar opciones avanzadas . Esto revelará la configuración de proxy e IP.

   

6. Cambie el campo Configuración del proxy a Manual.
7. Rellene el campo Nombre de host del proxy con la dirección IP del equipo y el campo Puerto proxy para que coincida con el puerto establecido en Charles (de forma predeterminada, el puerto está establecido en 8888). Seleccione Guardar.

   

8. En el navegador predeterminado de tu dispositivo, navega a un sitio web. Podrá ver los datos enviados y recibidos en Charles.