Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Emular y probar otros navegadores

Tu trabajo no termina al asegurarte de que el sitio funciona perfectamente en Chrome y Android. Aunque Device Mode puede simular otros dispositivos diferentes, como iPhone, te recomendamos ver otras soluciones de navegadores para emulación.

TL;DR

  • Cuando no tienes un dispositivo particular, o deseas realizar un control al azar en algo, la mejor opción consiste en emular el dispositivo dentro del navegador.
  • Los emuladores y simuladores de dispositivos te permiten imitar el sitio de desarrollo en una variedad de dispositivos desde la estación de trabajo.
  • Los emuladores basados en la nube te permiten automatizar pruebas de unidades para tu sitio en diferentes plataformas.

Emuladores de navegadores

Los emuladores de navegadores son muy útiles para probar la adaptabilidad de un sitio, pero no emulan diferencias en API, compatibilidad con CSS y determinados comportamientos que estarían presentes en un navegador móvil. Prueba tu sitio en navegadores que se ejecuten en dispositivos reales para estar seguro de que todo tiene el comportamiento que esperas.

Vista de diseño adaptable de Firefox

Firefox tiene una vista de diseño adaptable que te alienta a dejar de pensar en términos de dispositivos específicos y a explorar cómo cambia tu diseño en tamaños de pantalla comunes o tu propio tamaño arrastrando los bordes.

Emulación con F12 de Edge

Para emular los teléfonos Windows Phone, usa la emulación integrada de Microsoft Edge.

Como Edge no incluye compatibilidad con versiones heredadas, usa la emulación de IE 11 para simular cómo se vería tu página en versiones anteriores de Internet Explorer.

Emuladores y simuladores de dispositivos

Los emuladores y simuladores de dispositivos simulan no solo el entorno del navegador, sino también todo el dispositivo. Son útiles para probar comportamientos que requieren la integración del SO, por ejemplo, entrada de un formulario con teclados virtuales.

Android Emulator

Navegador Stock en Android Emulator
Navegador Stock en Android Emulator

Hasta el momento, no se puede instalar Chrome en el emulador de Android. Sin embargo, puedes usar el navegador de Android, Chromium Content Shell y Firefox para Android, que trataremos posteriormente en esta guía. Chromium Content Shell usa el mismo motor de representación de Chrome, pero no incluye ninguna de las funciones específicas del navegador.

El emulador de Android incluye el Android SDK que debes descargar de aquí. Luego, sigue las instrucciones para configurar un dispositivo virtual e iniciar el emulador.

Una vez iniciado el emulador, haz clic en el ícono del navegador y podrás probar tu sitio en el navegador Stock para Android.

Chromium Content Shell en Android

Content Shell en Android Emulator
Content Shell en Android Emulator

Para instalar Chromium Content Shell para Android, deja el emulador ejecutándose y ejecuta los siguientes comandos en un símbolo del sistema:

git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh

Ahora puedes probar tu sitio en Chromium Content Shell.

Firefox en Android

Ícono de Firefox en Android Emulator
Ícono de Firefox en Android Emulator

Al igual que puedes hacer con Chromium Content Shell, puedes obtener un APK para instalar Firefox en el emulador.

Descarga el archivo .apk correcto de https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/.

Desde aquí, puedes instalar el archivo en un emulador abierto o dispositivo Android conectado con el siguiente comando:

adb install <path to APK>/fennec-XX.X.XX.android-arm.apk

Simulador de iOS

El simulador de iOS para Mac OS X incluye Xcode, que se puede instalar desde la App Store.

Cuando finalices, obtén más información sobre cómo trabajar con el simulador en la documentación de Apple.

Modern.IE

VM de Modern IE
VM de Modern IE

Las máquinas virtuales de Modern.IE te permiten acceder a versiones diferentes de IE en tu computadora mediante VirtualBox (o VMWare). Elige una máquina virtual en la página de descarga.

Emuladores y simuladores basados en la nube

Si no puedes usar los emuladores y no tienes acceso a dispositivos reales, la mejor opción son los emuladores basados en la nube. Una gran ventaja de los emuladores basados en la nube en comparación con los dispositivos reales y los emuladores locales es que puedes automatizar pruebas de unidades para el sitio en diferentes plataformas.

  • BrowserStack (comercial) es el más fácil de usar para las pruebas manuales. Debes seleccionar un sistema operativo, la versión de tu navegador, el tipo de dispositivo y una URL para navegar. Este emulador generará una máquina virtual alojada con la que podrás interactuar. También puedes usar diferentes emuladores en la misma pantalla, lo cual te permitirá probar el aspecto de tu app en diversos dispositivos al mismo tiempo.
  • SauceLabs (comercial) te permite ejecutar pruebas de unidades dentro de un emulador, lo que puede ser muy útil para generar una secuencia de comandos del flujo por el sitio y ver el video de esto después en varios dispositivos. También puedes realizar la prueba manual del sitio.
  • Device Anywhere (comercial) no usa emuladores, sino dispositivos reales que puedes controlar de manera remota. Resulta muy útil cuando necesitas reproducir un problema en un dispositivo específico y no puedes ver el error en ninguna de las opciones de las guías anteriores.