cómo depurar Android Chrome desde Windows, Linux o Mac

probar y depurar sitios web y aplicaciones web en dispositivos móviles puede ser un desafío. Los navegadores en teléfonos y tabletas a menudo no tienen depuradores integrados, y emular dispositivos móviles nunca es tan preciso como te gustaría. Para depurar sitios web móviles en Android, la versión de escritorio de Chrome proporciona una solución con depuración remota.,

Este artículo le mostrará cómo usar la depuración remota con Chrome desde su computadora. Puede utilizar uno de los sistemas operativos de escritorio más comunes, como Windows, macOS o Linux.

cómo depurar Android Chrome

Si crees que puedes tener un error en un sitio web móvil o una aplicación nativa en Android, pero no puedes identificarlo, Raygun es compatible con JavaScript crash reporting, así como con Android crash reporting. Puede tomar una prueba gratuita de 14 días aquí.

configuración

antes de que pueda realizar cualquier depuración remota, debe configurar su computadora para poder reconocer su dispositivo Android., Esto significa permitir que el depurador de Chrome reconozca y se conecte al teléfono. Comenzará configurando algunas opciones en el teléfono.

configuración del teléfono

abre la aplicación configuración en tu teléfono. Tendrás que habilitar las opciones de desarrollador si aún no lo has hecho. Para hacer esto, vaya al menú «Acerca del teléfono», que se encuentra dentro del menú del sistema en los dispositivos Android modernos. Una vez que estés allí, desplázate hasta la parte inferior y toca «número de compilación» siete veces. Ahora, vuelva a la pantalla anterior o en el menú «sistema» en la aplicación de configuración., Allí, ahora encontrará un nuevo elemento de menú llamado «opciones de desarrollador» cerca de la parte inferior.

Una vez que estés dentro de las opciones de desarrollador, habilítalas en tu teléfono haciendo clic en el botón en la parte superior de la página. Cuando el conmutador dice «On», desplácese hacia abajo un poco y habilite» USB debugging » también. Esto le permitirá depurar su dispositivo a través de una conexión de cable USB.

configuración de la computadora (usando Android USB debugging)

instalación del controlador

Eso es todo lo que podemos hacer en el teléfono, por ahora, así que preparemos nuestra computadora., Los pasos a seguir son ligeramente diferentes en cada uno de los grandes sistemas operativos.

si está utilizando Windows, Lo primero que tendrá que hacer es instalar los controladores USB para su dispositivo. El Sitio Web de Android Studio tiene una lista de lugares para encontrar los controladores junto con algunas instrucciones sobre cómo instalar los controladores en su computadora. Algunos fabricantes proporcionan enlaces a un archivo de controlador. Otros solo lo llevan a un sitio web de soporte, en cuyo caso tendrá que hacer un poco de búsqueda para encontrar los controladores para su dispositivo.,

en caso de que su computadora ejecute macOS o Linux, no necesitará instalar controladores. De hecho, los usuarios de Mac están listos para comenzar. Si su máquina ejecuta Linux, hay algunos pasos de configuración más necesarios. Debe asegurarse de que su cuenta de usuario pertenece a un grupo determinado y deberá instalar un paquete con las llamadas «reglas udev». Son configuraciones que hacen que ciertos dispositivos USB sean conocidos por su computadora Linux. Si está interesado en más detalles, he escrito un artículo dedicado a la configuración de Linux para ADB hace un tiempo.,

instalar Android Debug Bridge (ADB)

Una vez que tengas instalados los controladores o las reglas udev, también necesitarás ADB, que proporciona una interfaz para hablar con tu dispositivo móvil. ADB y otras herramientas de la plataforma Android vienen con Android Studio, pero también puedes descargarlas por separado.

usar el SDK de Android integrado de Android Studio o el paquete oficial de herramientas de plataforma de Google son las formas preferidas de hacerlo. Los paquetes de herramientas de plataforma son justos .zip-archivos que contienen una carpeta platform-tools., Después de extraer los archivos, encontrará binarios como adb.exe(Windows) o adb (macOS y Linux) allí. Luego puede ejecutarlos según sea necesario desde una ventana de shell o terminal de su elección.

si está en Windows y desea la versión más mínima de ADB sin ninguna pelusa, eche un vistazo a los foros de XDA; desplácese hacia abajo hasta el encabezado descargas y haga clic en el primer enlace en esa sección.

después de descargarlo, ejecútelo para instalar ADB., Una vez instalado, deberá navegar a la carpeta donde se instaló (C:\Program Files(x86)\Minimal ADB and Fastboot de forma predeterminada) y hacer doble clic en cmd-here.exe. Esto abrirá una ventana del símbolo del sistema en esa carpeta.

usando cualquiera de las técnicas, en su ventana de shell, escriba adb start-server para iniciar el servidor ADB.

Nota: el servidor ADB tendrá que estar funcionando en cualquier momento que desee depurar. Si reinicia el equipo, el servidor no se ejecutará automáticamente. No se recomienda ejecutar ADB como un servicio permanente en segundo plano.,

lo último que tenemos que hacer para configurar el equipo es habilitar la depuración remota en las herramientas de desarrollo de Chrome. Para hacer esto, abra Chrome en su computadora y vaya a la configuración de DevTools en chrome://inspect/#devices

para depurar sitios web en Android desde aquí, Asegúrese de que «Discover USB devices» esté marcado. También sugiero mantener esta sección de las herramientas para desarrolladores abierta en una pestaña porque la necesitaremos de nuevo pronto.

hacer la conexión

Eso es lo más lejos que puede obtener con cualquiera de los dispositivos por sí solo., Para depurar sitios web en Android en el dispositivo, tendremos que conectarlos juntos. Si aún no lo has hecho, conecta tu teléfono al ordenador a través de USB. Si no lo hizo como parte de la instalación del controlador, es posible que vea una notificación en la barra de tareas que le informa que su computadora está configurando su nuevo dispositivo. Asegúrate de que tu teléfono esté encendido y desbloqueado. Si lo es y el servidor ADB se está ejecutando, debería ver una ventana emergente titulada » ¿permitir depuración USB?”.

Si no, busca en tu área de notificación en su dispositivo Android., Si dice «conectado como un dispositivo multimedia», algo así, o algo sobre «MTP», haga clic en él. Que debe llevar a una pantalla que le permite elegir un tipo de conexión. Para nuestro propósito «Cámara (PTP)» es el tipo de conexión apropiado. Una vez que haya seleccionado PTP, el «Permitir depuración USB?»popup debería aparecer.

para evitar tener que lidiar con esta ventana emergente cada vez que conecte su dispositivo, marque la opción «Permitir siempre desde este equipo». De cualquier manera, querrá hacer clic en «Aceptar», lo que permitirá que su dispositivo móvil sea visible para su computadora para la depuración., En este punto, vuelve a la pestaña DevTools que vimos anteriormente. Si todo salió bien, usted debe ver su teléfono y todas sus pestañas Chrome aparece allí ahora.

depurar sitios web que se ejecutan en Chrome en su dispositivo

¡ahora es el momento de dejar de configurarse y comenzar a depurar! ¡Por fin! Chrome en tu ordenador debería mostrarte una lista de pestañas abiertas en el navegador Chrome de tu dispositivo remoto. Si la pestaña que desea depurar no es la pestaña activa, puede hacer clic en «pestaña de enfoque» para convertirla en la pestaña activa en el dispositivo. Luego haga clic en el enlace» inspeccionar».,

Esto abrirá el inspector para esa pestaña. Desde aquí, puede utilizar las herramientas de desarrollo de Chrome más o menos como lo haría si estuviera depurando una página web en su navegador de escritorio. Incluso puedes ver la pantalla de tu dispositivo en las herramientas para desarrolladores. Si aún no se muestra, o si desea desactivarlo, haga clic en el icono junto al icono del inspector en la esquina superior izquierda de las herramientas para desarrolladores.

consejos de depuración

También puede controlar su dispositivo desde sus herramientas de desarrollador., Utilice el cursor del ratón en la pantalla proyectada como si el cursor fuera un dedo en el propio dispositivo.

• haga clic para tocar
• haga clic y arrastre para deslizar
• Use su rueda de desplazamiento para desplazarse
• mantenga Shift mientras arrastra hacia arriba para acercar
• mantenga Shift mientras arrastra hacia abajo para alejar

que hay algunos puntos transparentes en el molde de la pantalla. Estos son elementos de la interfaz de usuario de la aplicación Chrome o de la interfaz de usuario del sistema de su dispositivo., Están ocultos porque el protocolo de depuración remota solo le permite interactuar con la página web en sí.

en dispositivos más antiguos y menos potentes, la transmisión de pantalla utiliza gran parte de la potencia de procesamiento de su dispositivo móvil. Es posible que note que el rendimiento parece lento mientras está emitiendo la pantalla. Por lo tanto, si está tratando de medir el rendimiento, desactive la transmisión de pantalla e interactúe directamente con el dispositivo móvil.

finalmente, si te encuentras con problemas en los que no pasa nada cuando interactúas con tu dispositivo, intenta cerrar la aplicación Chrome y volver a abrirla., Deberá volver a conectarse al dispositivo remoto a través de la pantalla DevTools en las herramientas para desarrolladores. Si eso no ayuda, revise esta lista de verificación rápida:

• desenchufe el dispositivo y vuelva a conectarlo
• bloquee su teléfono y despierte una copia de seguridad
• cierre la ventana de herramientas para desarrolladores y vuelva a abrirlo.

conclusión

depurar sitios web móviles en Android Chrome no tiene por qué ser difícil. Puede tomar un poco más de configuración de lo que la mayoría de nosotros nos gustaría. Pero, una vez que se ha cuidado de, depurar una página web móvil en el dispositivo se vuelve mucho más simple., Ahora puede depurar sitios web móviles Android en un dispositivo físico real.

¿pasó demasiado tiempo descubriendo su error en primer lugar? Raygun te ayuda a detectar, diagnosticar y destruir errores en tu código JavaScript o Android. Las alertas inteligentes y la agrupación de errores significan que nunca más se perderá un error en su aplicación. Obtenga más información sobre los informes de fallos de Android y los informes de fallos de JavaScript.

más información sobre la depuración de Android

Cómo diseñar sus errores para obtener mejores informes de errores

comience con la depuración remota en Android