Depuración remota de aplicaciones web a través de Wi-Fi, no se requiere USB. | Autor: Ifeanyiodike | Junio ​​de 2021

objetivo de aprendizaje:

• A la comprensión Ejemplo) Se utiliza para depuración remota sin USB.
• instalación Estudio de Android, junto con Herramientas de la plataforma SDK.
• Activar el modo desarrollador En tu teléfono Android.
• Configura tu Configuración de desarrollador de Android Conéctese a su Mac / PC de depuración.
• Correr Comandos en la terminal Conecta tu dispositivo.
• Configurar y Accede a tu teléfono Android desde tu Mac / PC Utilice las herramientas de desarrollo de Chrome.
• Aprecia mejor a las personas que producen todo el contenido excelente que nos ayuda a ser mejores desarrolladores (o mejores personas). Este no es un proceso fácil.

Ejemplo

1. Caso de uso básico: Asegúrese de que su aplicación se esté ejecutando correctamente en su teléfono.

Me conocí por primera vezelectrónico Cuando implementé mi primera aplicación web, se me instó (no la llamaré «necesaria» porque todavía no puede usarla) para conectar mi teléfono (uso OnePlus) a mi computadora. Inicialmente, pensé que había un botón de «verificación» equivalente (bien oculto) que me llevaría al equivalente móvil de la vista del desarrollador del navegador. Rápidamente me di cuenta de que este no era el caso. Hice búsquedas extensas en Internet, y todos los artículos que encontré (como este) mencionaban «¡usa la consola de Google Chrome en cualquier dispositivo móvil!».Y luego esto Artículo oficial de Chrome Sobre este tema: https://developer.chrome.com/docs/devtools/remote-debugging/, esto definitivamente rompió cualquier esperanza restante de poder depurar directamente desde mi teléfono. Este artículo oficial es el mejor lugar para comenzar (una vez que pierdas toda esperanza, como hice yo).Si su teléfono y Mac / PC tienen puertos USB, entonces Las instrucciones allí deberían ser suficientes para que se conecte a través de USB.——Si no, entonces el mío Casos de uso avanzados (Este es el enfoque de todo el artículo) debería ayudarlo a lograr los mismos resultados.

2. Casos de uso avanzados: Asegúrese de que su aplicación se esté ejecutando correctamente en su teléfono y conecte su teléfono a su escritorio inalámbrica, Debido a que su computadora de escritorio (MacBook Pro en mi caso) no tiene un puerto USB, no tiene que molestarse en comprar extensiones😊.

Recuerde cómo mencioné que mi primer caso de uso ocurrió cuando implementé mi primera aplicación web, y por una razón especial no la experimenté en ese momento: no la necesitaba. Mi primera aplicación no tiene dependencias de dispositivos. Simplemente accedo a él en el navegador de mi escritorio y uso las herramientas de desarrollador de Chrome para depurar. Mi aplicación reciente cambió esta situación, que incluía enviar notificaciones automáticas desde el servidor (sin servidor en mi caso) a mi teléfono. En el entorno de desarrollo, registraré la clave única generada para cada dispositivo en la consola. Necesito usar la clave del lado del servidor para activar el empuje en cada dispositivo. Por supuesto, en prod, envío la clave al backend y la recupero del backend para enviarla al dispositivo. Sin embargo, en ese escenario de desarrollo, la necesidad de depurar de forma remota mi versión móvil de la aplicación se volvió inevitable.

paso 1: Instale Android Studio, que incluye herramientas de la plataforma SDK en el escritorio.

Como habrás adivinado, el escenario que usamos en este artículo es específico para usar un teléfono Android con una MacBook Pro. Este principio debería aplicarse a otros sistemas operativos, pero dejaré que usted lo resuelva, o puede esperar a que publique otro artículo.

No tiene que estar familiarizado ni necesita aprender a usar Android Studio para usarlo en esta solución, aunque este conocimiento será una ventaja.

Esto Caracteristicas clave Lo que necesita para su conexión inalámbrica es ADB (Android Debug Bridge). ADB es una herramienta (parte de las herramientas de la plataforma SDK), que se incluye automáticamente cuando descarga e instala Android Studio. Puede obtener más información sobre cómo funciona ADB aquí.

Paso 2: Active el modo de desarrollador en su teléfono Android.

La documentación oficial sobre esto es sencilla, por lo que no es necesario reinventar la rueda. A continuación, se muestran los extractos más relevantes:

La parte más importante de las instrucciones es navegar hasta el «número de compilación» en el teléfono Android y luego Haga clic en esta opción 7 vecesSe siente como una especie de ritual. Incluye arrodillarse e inclinarse. En cualquier caso, una vez que haga clic en esta opción 7 veces, automáticamente se convertirá en un miembro de élite del equipo de desarrolladores geek. Puede ignorar el resto de las instrucciones sobre cómo activar la «depuración USB». Por el contrario, si está utilizando Android 11 (y superior), debería ver una opción, como la captura de pantalla en el paso 3 (Figura 3.1) a continuación.

Paso 3: Configure sus ajustes de desarrollador de Android. Debes haberlo adivinado, deberías abrir ‘inalámbrica Depuración de ADB ‘.

próximo, Abra «depuración inalámbrica», como se muestra en la Figura 3.2 a continuación:

Cuando abra «Depuración inalámbrica», verá un cuadro de diálogo que le indica «permitir ¿Realizar depuración inalámbrica en esta red?, Haga clic en ‘permitir’ De acuerdo con la Figura 3.3 a continuación.

próximo, Seleccione «Emparejar dispositivo con código de emparejamiento», como se muestra en la Figura 3.4 a continuación:

próximo, Debe escribir el código de emparejamiento, la dirección IP y el puerto en la Figura 3.5 a continuación:

el cuarto paso: Utilice el código de emparejamiento en la Figura 3.5 anterior para ejecutar un comando en el terminal Mac / PC para conectarse a su teléfono Android. También puede ver la documentación oficial aquí.

Esencialmente, debe acceder a las herramientas de la plataforma sdk de Android, debe instalar y ejecutar dos adb Los comandos dentro de su camino.

Primero, cd Vaya a su directorio principal o raíz, que podría verse así:Foo-MacBook-Pro ~ %

luego, Ejecute el siguiente comando: Library/Android/sdk/platform-tools/adb pair <Your IP Address and Port>

Deberías conseguir: Foo-MacBook-Pro ~ % Library/Android/sdk/platform-tools/adb pair <Enter Your IP Address:Port here>

próximo, La terminal devolverá: Enter pairing code: Luego, debe ingresar el código de emparejamiento en la Figura 3.5 anterior:Enter pairing code:XXXXXX Y presione la tecla Enter.

luego, La terminal debería devolver: Successfully paired to Your IP Address:Port [guid=adb-xxxxxxxx-xxxxxxx]

Esta configuración está completa. Ahora puede acceder al navegador y comenzar a depurar.

Paso 5: Acceda a su teléfono Android desde Chrome Dev Tools en el navegador de Mac / PC. ir con: chrome://inspect/#devices Debería ver su dispositivo (teléfono Android emparejado) y todas las pestañas abiertas actualmente en el navegador del teléfono. Puede elegir verificar cualquier pestaña y ver cómo se desarrolla la magia.

Este es un paquete. Ahora debería conectarse a su dispositivo de forma inalámbrica.

Espero que esto sea útil. Salud.