Depuración en dispositivos móviles

En este tema, aprenderá a depurar JavaScript en dispositivos móviles. Durante el desarrollo, las pruebas y la depuración de contenido en plataformas móviles pueden ser un gran desafío.

Resumen

En este documento, aprenderá cómo comenzar a depurar en dispositivos móviles y cubre las siguientes soluciones:

  • Depuración en dispositivos iOS
  • Depuración en dispositivos Android
  • Usar Charles en dispositivos móviles

Depuración con iOS

Requisitos mínimos para la depuración de iOS

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

Uso de la depuración remota de Safari

La actualización de iOS 6 de Apple introdujo la depuración remota de Safari, que le permite depurar páginas web en la aplicación Safari en dispositivos iOS. Para comenzar, siga los pasos a continuación:

  1. Conecte su dispositivo iOS a su máquina mediante un cable USB.
  2. En su dispositivo, abra el Ajustes aplicación. Seleccione Safari , desplácese hacia abajo hasta el final de la página y abra el Avanzado menú. Habilite el Inspector web opción.
    Inspector web
    Inspector web
  3. Aún en su dispositivo, abra el Safari aplicación y navegue a cualquier página web.
  4. En la Mac, inicia Safari, abre las Preferencias (Safari > Preferencias) y navega hasta Avanzado sección. Habilite el Mostrar el menú Desarrollar en la barra de menús opción.
    Mostrar menú de desarrollo
    Mostrar menú de desarrollo
  5. Abre el Desarrollar menú. Verá su dispositivo iOS en la lista. Cuando pase el mouse sobre el nombre de su dispositivo, verá la URL del sitio que ha visitado en su dispositivo.
    Encuentra el dispositivo
    Encuentra el dispositivo
  6. Seleccione la URL y un Inspector web Se abrirá una ventana que le permitirá obtener una vista previa, inspeccionar y depurar contenido en su navegador móvil desde su escritorio.
    Depurar en el escritorio
    Depurar en el escritorio
  7. En el Recursos sección, puede obtener una vista previa e inspeccionar la página web. Pasando el cursor sobre elementos en el Inspector web resaltará los elementos correspondientes en el navegador de su dispositivo iOS.
    Inspección de elementos
    Inspección de elementos
  8. También puede utilizar el Depurador y Consola secciones para depurar aún más su página estableciendo puntos de interrupción, registrando datos, etc.

Depuración con Android

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 con un dispositivo con Android 11.

Habilitando la depuración en su dispositivo

Antes de que pueda comenzar a depurar contenido en su dispositivo, debe habilitar la depuración USB en la configuración de su dispositivo.

  1. Si tiene Android 4.2+ en ejecución, deberá habilitar la Opciones de desarrollador antes de poder activar la depuración USB. En su dispositivo, abra el Ajustes aplicación y seleccione la Acerca del teléfono menú. Localiza el dispositivo Número de compilación y tóquelo siete veces.
  2. Ingrese la contraseña de su dispositivo. Ahora debería ver un mensaje que dice: ¡Ahora es un desarrollador! .
  3. Para acceder a sus opciones de desarrollador en Android 11, regrese a Configuración y seleccione Sistema .
  4. Expanda Avanzado y toque Opciones de desarrollador .
    Opciones de desarrollador
    Opciones de desarrollador
  5. Desplácese hacia abajo hasta Depuración de USB y encienda la palanca.
    Habilitar depuración de USB
    Habilitar depuración de USB
  6. Para obtener más detalles, consulte el documento Configurar opciones de desarrollador en el dispositivo de Android.

Depuración remota con Chrome para Android

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

  1. En su computadora, inicie Cromo y busque chrome://inspect#devices.
  2. Seleccione la casilla de verificación para Descubrir dispositivos USB .
    Descubra los dispositivos USB
    Descubra los dispositivos USB
  3. Conecte su dispositivo a su máquina usando un cable USB. En su dispositivo, aparecerá un cuadro de diálogo que le preguntará si desea permitir la depuración USB. Seleccione Permitir para permitir que su computadora se conecte a su dispositivo.
    Permitir conexión al dispositivo
    Permitir conexión al dispositivo
  4. En su dispositivo, abra el Cromo aplicación y navegue hasta una página web.
  5. Volver a Cromo en tu ordenador. Sobre el chrome://inspect#devices página, debería ver su dispositivo conectado. Debajo del nombre de su dispositivo, podrá ver una lista de todas las páginas abiertas en Chrome en su dispositivo.
    Dispositivos conectados
    Dispositivos conectados
  6. Para comenzar a depurar una página web, seleccione el inspeccionar enlace debajo de la URL de la página. Esto abrirá Chrome Herramientas de desarrollo.
    Inspeccionar página web
    Inspeccionar página web
  7. A la izquierda del Elementos pestaña, 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 puede utilizar screencasting para interactuar con su dispositivo, visite Documentación de Google.

Configuración de Charles Proxy

Charles es un proxy web que se puede ejecutar en su propia computadora, lo que le permite registrar los datos que se envían y reciben a través de su navegador web. Visita el Sitio web de Charles para obtener más información sobre esta aplicación.

Requisitos mínimos para Charles

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

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

  1. Descargar e instalar Charles en su máquina.
  2. En tu computadora, ejecuta Charles. En el menú, seleccione Proxy> Configuración de proxy. Asegúrese de que se haya asignado un puerto (p. ej., 8888).
    Configuración de proxy
    Configuración de proxy
  3. Seleccione OK para guardar los cambios y cerrar el diálogo.
  4. En el menú, seleccione Proxy> Configuración de proxy SSL. Asegurar la Habilitar el proxy SSL está seleccionada la opción.
    Configuración de proxy SSL
    Configuración de proxy SSL
  5. En el Localización sección, seleccione la Agregar botón. En el Editar ubicación cuadro de diálogo, navegue hasta el Puerto campo e ingrese 443. Seleccione OK para guardar este cambio.
    Puerto de ubicación 443
    Puerto de ubicación 443
  6. Seleccione OK para cerrar el Editar ubicación diálogo.
    Configuración de SSL con ubicación
    Configuración de SSL con ubicación
  7. Seleccione OK para salir del Configuración de proxy SSL diálogo.
  8. Navegar a Ayuda> Proxy SSL> Instalar el certificado raíz Charles en un dispositivo móvil o navegador remoto.
    Instalar certificado raíz
    Instalar certificado raíz
  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. Cópielos en su computadora para usarlos más adelante.
    Mensaje de certificado
    Mensaje de certificado

Uso de Charles con dispositivos iOS

En esta sección, aprenderá a configurar su dispositivo iOS para que funcione con Charles en su computadora.

  1. En su dispositivo, asegúrese de estar conectado a la misma red que su computadora. Puede verificar esto navegando a configuración> Wifi y seleccionando el nombre de la red para mostrar opciones avanzadas.
    Red de dispositivos
    Red de dispositivos
  2. En la sección HTTP en la parte inferior, seleccione Manual modo. Luego, agregue la IP del servidor y el número de puerto (8888) que copió de Charles en un paso anterior.
    Detalles wifi
    Detalles wifi
  3. En su dispositivo, abra un navegador y vaya a https://www.charlesproxy.com/getssl . Será redirigido a la configuración de su dispositivo donde se le pedirá que instale el Certificado raíz personalizado Charles Proxy perfil. Selecciona el Instalar en pc para instalar el certificado Charles en su dispositivo.
    Instalar el certificado Charles
    Instalar el certificado Charles
  4. Siga los pasos para instalar el certificado Charles. Cuando termine, seleccione Hecho.
    Perfil de Charles instalado
    Perfil de Charles instalado
  5. A continuación, está listo para asegurarse de que su dispositivo confíe en el certificado Charles. En su dispositivo, navegue hasta General> Acerca de> Configuración de confianza del certificado. Aquí debería encontrar el certificado Charles Proxy.
    Configuración de certificado de confianza
    Configuración de certificado de confianza
  6. Habilite el certificado Charles. Observe el mensaje de advertencia. Es posible que desee deshabilitar este certificado cuando no esté depurando con Charles.
    Habilitar certificado de confianza
    Habilitar certificado de confianza
  7. Ahora, podrá ver los datos enviados y recibidos en Charles.
    Ver datos de Charles
    Ver datos de Charles

Usando Charles con Android 11

En esta sección, aprenderá a configurar su dispositivo Android para que funcione con Charles en su computadora.

  1. En su dispositivo, vaya a Configuración > Red & internet
  2. Toque Wi-Fi . Verá una lista de redes a las que se ha conectado en su dispositivo.
  3. Seleccione la red inalámbrica a la que está conectado actualmente. Recuerde, esta red debe coincidir con la red a la que está conectado en su computadora.
  4. Toca el icono del lápiz para editar la configuración de Internet.
  5. Establezca Proxy en Manual .
  6. Pegue el valor de su nombre de host de Charles Proxy , que debería haber copiado en su portapapeles en el paso anterior . Para el Puerto proxy , ingresar 8888.
    Valores de host/puerto de proxy
    Valores de host/puerto de proxy
  7. Presiona Guardar .
  8. En su dispositivo, abra un navegador, vaya a https://www.charlesproxy.com/getssl/ . Esto debería descargar automáticamente el certificado Charles SSL en su dispositivo.
  9. Para instalar el certificado con Android 11, sigue estos pasos:
    1. Abre Configuración .
    2. Navegar a Seguridad > Cifrado & cartas credenciales > Instalar un certificado .
    3. Seleccione Certificado CA.
    4. Verás una advertencia. Seleccione Instalar de todos modos .
      Instalar de todos modos
      Instalar de todos modos
    5. Seleccione el certificado SSL proxy de Charles.
    6. Confirme la instalación del certificado.
  10. En el navegador predeterminado de su dispositivo, navegue hasta un sitio web. Podrá ver los datos enviados y recibidos en Charles. Tenga en cuenta que puede ser útil filtrar la lista de estructuras (en este caso, filtrar por brightcove ).
    Ver transferencia de datos
    Ver transferencia de datos
  11. Para filtrar el tráfico de la red para que solo vea el tráfico de su dispositivo Android y no de su máquina local:
    1. En el menú superior de Charles, seleccione Proxy .
    2. Desmarque Proxy de macOS (o Proxy de Windows ).
  12. Opcional: Para borrar certificados de su dispositivo (con Android 11):
    1. En su dispositivo, abra Configuración .
    2. Navegar a Seguridad > Cifrado & credenciales
    3. Presiona Borrar credenciales .
    4. Toque Aceptar para confirmar.

Usando Charles con Android 7

A partir de Android 7 (SDK v24), la red SSL ya no se puede ver directamente ya que esta versión SDK introdujo una nueva función de seguridad. Para ver el tráfico de red a través de Charles, debe indicarle explícitamente a su aplicación de Android que permita intercepciones de SSL.

  1. En su aplicación, abra el archivo AndroidManifest.xml .

    archivo de manifiesto de Android

  2. En el application sección, agregue un networkSecurityConfig opción.

    Opción de seguridad de red

  3. En una carpeta de recursos xml, agregue un network_security_config.xml archivo de la siguiente manera:

    Archivo xml de seguridad de red
  4. Eso es. Ahora debería ver todo el tráfico de red procedente de Charles.

Recursos

Para obtener más información, consulte lo siguiente: