Tip rápido: Testing en dispositivos móviles

por Natalia Ventre el ・ podés leerlo en 2 minutos ・

En diseño y desarrollo web siempre fue necesario testear en los distintos navegadores (cross-browser testing) y más recientemente en dispositivos móviles (mobile-device testing).

Testing en iPad con iOS Simulator, herramientas para desarrolladores de Chrome y Adobe Edge Inspect
Testing en iPad con iOS Simulator, herramientas para desarrolladores y Edge Inspect.

Herramientas para desarrolladores de Chrome

Con las herramientas para desarrolladores de Chrome, podés anular el agente de usuario y elegir:

  • iPhone (iOS 4 ó iOS 5)
  • iPad (iOS 4 ó iOS 5)
  • Android 2.3 (Nexus S) y 4.0.2 (Galaxy Nexus)
  • BlackBerry (PlayBook 2.1, 9900, BB10)
  • MeeGo (Nokia N9)

También podés especificar una ubicación para la geolocalización, cambiar la orientación del dispositivo y emular los eventos táctiles.

Uso de las herramientas para desarrolladores de Chrome

  1. Click derecho > Inspeccionar elemento
  2. Ir a settings (el rulemán abajo a la derecha).

Simulador de iOS

El iOS Simulator se instala con Xcode y podés elegir el hardware:

  • iPad, iPad (Retina)
  • iPhone, iPhone (Retina 3.5 pulgadas), iPhone (Retina 4 pulgadas)

También podés girar a la derecha, a la izquierda, agitar, simular el teclado físico, etc.

Uso del iOS Simulator

  1. Abrir Xcode
  2. Ir a Xcode > Open Developer Tool > iOS Simulator

Para Android y BlackBerry también hay simuladores disponibles.

Adobe Edge Inspect

Adobe Edge Inspect sincroniza la navegación en Chrome en tu computadora con los dispositivos Android y/o iOS que estén en la misma red. Podés hacer una inspección remota con las herramientas para desarrolladores y tomar capturas de pantalla. Soporta URLs locales1.

Uso de Adobe Edge Inspect

  1. Instalar Edge Inspect en tu computadora, abrirlo y hacer login con tu ID de Adobe.
  2. Instalar la extensión de Edge Inspect para Chrome.
  3. Instalar el cliente en tu dispositivo Android, iOS o Kindle Fire.
  4. Abrir el Adobe Edge Inspect en el dispositivo móvil y la extensión de Chrome. Insertar en la extensión de Chrome el código del dispositivo para conectarlos.

Conclusiones

Con cambiar el tamaño del navegador o usar un simulador no podés replicar la experiencia de tener en tu mano un dispositivo táctil con una pantalla de alta resolución ni evaluar la performance verdadera. Testear en dispositivos reales es lo ideal y Adobe Edge Inspect te ayuda a agilizar el proceso. De todas maneras, los simuladores son una herramienta útil, sobre todo para los desarrolladores de aplicaciones, y si no contás con una variedad de dispositivos, es mejor que hagas un test limitado o superficial a que no hagas ninguno.


  1. Para URLs tipo http://0.0.0 sustituir por http://localhost.