Las herramientas de desarrollo utilizadas por nuestro equipo son importantes para realizar un trabajo eficiente es por eso que queremos compartirlas con nuestros visitantes.

Como saben cuando estamos creando un sitio web es importante su funcionamiento en los navegadores que existen en el mercado Chrome, Edge, Firefox, Safari…

Pero aun mas importante es la funcionalidad del sitio en los dispositivos móvil ya que gran porcentaje de los usuarios utilizan este medio.

La diferencia es que cuando probamos un sitio en una pc las herramientas de desarrollo necesarias están con tan solo presionar F12 por ejemplo para el caso de chrome.

Entonces que hacemos para el caso de probar los sitios en los navegadores de nuestros dispositivos movil?

Chrome Versión

Depurar sitios web móvil con Chrome.

Los ejemplos que vamos a ver a continuación serán utilizando ala fecha de salida de este articulo Android 9 y Google Chrome 83.0.4103.106 tanto en Android como en su pc de escritorio.

Requisitos;

  • un ordenador de sobremesa o portátil con Chrome ejecutándose en él.
  • un dispositivo Android capaz de ejecutar Chrome ejecutándose en él.
  • un cable USB para conectar los dos dispositivos.

Paso 1:

En chrome PC acceder a las herramientas de desarrollo web puedes presionar F12 o en el menú superior derecho (3 puntos) /mas herramientas/Herramientas de desarrolladores.

herramientade desarrollo

Paso 2:

En la nueva pantalla veras en la parte superior derecha otros 3 puntos para ver las opciones de menú del DevTools de Chrome.

Ten cuidado acá por que puedes confundir este icono con el del paso anterior, presiones done dice More Tools (Mas herramientas) y luego Remote Devices (Dispositivos remotos).

Notaras que se abrió una pestaña en la parte inferior llamada Remote Devices que indica el mensaje:

This panel has been deprecated in favor of the Chrome://inspect/#divices, which has equivalent functionality.

(Este panel ha quedado obsoleto en favor de la Chrome://inspect/#divices, que tiene una funcionalidad equivalente.)

Este paso puedes hacer colocando en la barra de navegación Chrome://inspect/#divices.

PASO 3:

En la cuenta pantalla asegura de tener seleccionada la opción Discover USB Devices.

Remote devices

En este instante puedes conectar tu dispositivo al USB puede que tarde un poco la primera vez, una vez conectado y configurado veras que debajo de Remotes target estará tu dispositivo.

Devices Detecs

PASO 4:

En esta sección aparecerá todos los sitios web en los que estés en tu navegador en el teléfono en mi caso no tengo nada.

Puedes colocar la url en la caja de texto y presionar Open o simplemente navegar normalmente desde tu teléfono.

Por ejemplo vamos a acceder al sitio web de VanguarSoft.

https://vanguarSoft.com.ve

Una vez accediste al sitio que quieres analizar con el devTools presiona el botón de inspect.

Devices Devices inspect

Y estamos listos ya podemos navegar y realizar pruebas desde el navegador y ver todos los detalles de conectividad, Logs, depurar JavaScripts ver errores.

Y no solo eso tienes una vista previa en la pc de mismo que vez en el teléfono.

DevTools

Para nuestro equipo de trabajo son importantes este tipo de pruebas y nos enfocamos en vez como se vera el producto en todos los navegadores posibles.

Estas buenas practicas garantizar calidad el producto y no nos gusta no compartir nuestros conocimientos apoyamos el emprendimiento y esos nos hace crecer también a nosotros.

Muchas gracias esperamos les guste y pronto esperamos compartir mas tips tecnológicos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *