Hacer pruebas en nuestro proyecto o desarrollo web es clave para llevarlo acabo correctamente y para esto, inspeccionar desde móvil, android o ios nos ayudará a resolver los problemas más rápidamente. Por esto, google y safari nos presentan dos soluciones sencillas pero muy necesarias para el desarrollo web y hoy hablaremos de ellas.
Contenido
Lo que vas a necesitar
Aquí te dejo los enlaces que vas a necesitar para este post:
- Crhome inspect: haz click aquí para ir a chrome inspect.
IOS: Habilitar inspector web
Inspeccionar desde móvil IOS o Android: chrome y safari
Hacer pruebas en nuestro proyecto o desarrollo web es clave para llevarlo acabo correctamente y para…
Cómo implementar Sepolia: Red de prueba de Ethereum
Antes de implementar un contrato en una red de mainnet como Ethereum debemos primero saber cómo impl…
Dual monitor macbook pro con estación de acoplamiento tobenONE uds030
Si estás buscando una solución para poder usar dual monitor macbook pro con excelente relación calid…
El primer paso para poder inspeccionar desde móvil para IOS es habilitar el inspector web. Para esto debes ir a configuración > safari > avanzado > Inspector web. Una vez habilitado ya podermos inspeccionar desde safari en nuestro Mac. Cabe resaltar que este post es evaluando ios desde Mac, no ios desde PC.
Android: habilitar modo desarrollador
En el caso de android debemos habilitar el modo desarrollador ya que este no viene habilitado por defecto y este nos abrirá nuevas opciones para su uso. Aunque varias marcas usan Andriod el menú relativamente va a ser el mismo, en cuanto a opciones entonces lo que debes buscar es: a cerca del teléfono > compilación.
Una vez aquí, es un texto pero debes hacer click varias veces hasta que aparezca un mensaje que diga modo desarrollador activado.
En el menú de búsqueda de configuración, para acelerar la búsqueda puedes escribir desarrollador y encontrarás opciones del desarrollador. Una vez dentro, haz click en Depuración USB y acepta la depuración. Una vez hecho, ya estamos listos para la depuración.
MAC: Habilitar funciones desarrolladores web
Para poder ver la consola o devTools o funciones para desarrolladores ejecutando en dispositivos IOS, debemos hacerlo desde safari. Es decir, safari proporciona las herramientas para visualizar. Para hacerlo abre safari, luego ve a avanzado > mostrar funciones para desarrolladores. Listo! verás que se habilitan dos opciones más, pero estas no debes modificarlas, basta con activarla.
Ver consola de IOS desde Safari
ES DE VITAL IMPORTANCIA QUE CONECTES POR CABLE TU DISPOSITIVO A TU MAC Y ACEPTES LA CONFIANZA CON EL DISPOSITIVO UNA VEZ SALGA LA OPCIÓN.
Aquí ya podemos iniciar la vista de la consola desde safari en MAC. Lo que debes hacer es abrir google chrome o safari en tu dispositivo ios. Luego de esto, ingresa a la página web que deseas inspeccionar. A continuación ve a safari en tu Mac y en las opciones, busca desarrollador. Aquí podrás ver la página o ventana abierta en tu dispositivo ios. Haz click para abrirla.
y listo! aquí podrás ver el inspector. De igual forma podrás ver elemento por elemento, consola, cookies y demás. Solo no desconectes el cable hasta que finalices la inspección.
Chrome Inspect: ver inspector de Andriod
El primer paso par inspeccionar en Android es entrar a chrome inspect. Una vez dentro podrás ver en devices los dipositivos disponibles. Debo decir que aquí me demoré un poco pero bueno, lo que debes hacer es conectar tu dispositivo Andriod con cable a tu mac o pc. Inmediatamente se abrirá una opción y habilita transferencia de archivos.
Aquí viene el paso más importante, al aceptar esta opción aparecerá en chrome inspect OFF LINE. Esto quiere decir que ya encontró el dispositivo pero está pendiente por aprobación desde el dispositivo. Toma tu dispositivo y acepta la depuración usb. y listo! Ya podrás ver como en la imagen anterior las ventanas abiertas en tu dispositivo Andriod. Haz click en inspect.
Listo! se abrirá una ventana de inspección en tu mac o pc. Esta es in poco mejor porque permite manipular la ventana abierta con tu ratón. Pero de igual forma, podrás ver todas las opciones de inspección sin problema.
Video de ayuda
Mira este video para ayudarte en el proceso. Si te gusta no olvides dar like y suscribirte a mi canal!
Producto recomendado
Estación de acoplamiento DisplayLink con monitor dual 4K @60HZ para MacBook, Windows, TOBENONE Universal USB C Estación de acoplamiento con 2 HDMI y 2 DisplayPort, entrega de energía de 65 W, 7 USB,
- Potente amplía tu estación de trabajo: la estación de acoplamiento multipuerto 18 en 1 TOBENONE te permite conectar todos los dispositivos externos a través de un solo cable USB híbrido 2 en 1 a la computadora. Hasta 18 puertos!!! Facilitando más trabajo en menos tiempo. Esta estación de acoplamiento Dell con doble HDMI o DisplayPort para extender la pantalla Dual 4K @60Hz, 7 USB A y 1 USB C para dispositivos USB externos. 1 host para conectar un portátil USB-C o USB 3.0, 1 puerto DC-IN para conectar la fuente de alimentación, SD/TF, Gigabit Ethernet, entrada y salida de audio de 0.138 in.
- Monitores duales de 4K a 60 Hz: las estaciones de acoplamiento USB C para laptop están equipadas con puertos DisplayPort y HDMI duales. Conecte monitores HDMI o DisplayPort a los puertos adecuados, y puede ver fácilmente imágenes de alta resolución en uno o dos monitores 4K (3840×2160@60Hz), ver clips o trabajar en tareas importantes, entre otras cosas. Cada monitor admite resoluciones de hasta 4K a 60Hz, y también admite resoluciones más bajas como 2560×1440, 1080p y más.
Conclusión
Poder inspeccionar y depurar nuestro proyecto desde dispositivos móviles, es de vital importancia para corregir posibles errores o bien validar su funcionamiento. Por esto, la mejor forma de hacerlo es usando las herramientas o devTools que nos presentan tanto safari como google chrome.
