Seu trabalho não termina em garantir que seu site funcione bem no Chrome e no Android. Mesmo que O Device Mode pode simular diversos outros dispositivos, como iPhones. Confira também outros de navegadores para emulação.
Resumo
- Quando você não tem um dispositivo específico ou quer fazer uma verificação pontual, a melhor opção é emular o dispositivo dentro do navegador.
- Os emuladores e simuladores de dispositivo permitem imitar seu site de desenvolvimento em uma variedade de dispositivos, na estação de trabalho.
- Os emuladores baseados na nuvem permitem automatizar testes de unidade para o site em diferentes plataformas.
Emuladores de navegador
Os emuladores de navegador são ótimos para testar a capacidade de resposta de um site, mas não emulam diferenças na API, o suporte a CSS e determinados comportamentos que você veria em um navegador para dispositivos móveis. Teste seu site em navegadores em execução em dispositivos reais, para ter certeza de que tudo funciona como esperado.
Firefox Visualização de design responsivo
O Firefox tem uma visualização de design responsivo que incentiva você a parar de pensar em termos de configurações e, em vez disso, explorar como seu design muda em tamanhos de tela comuns ou no seu próprio tamanho, arrastando as bordas.
Emulação F12 do Edge
Para emular Windows Phones, use a emulação integrada do Microsoft Edge.
Como o Edge não é compatível com versões legadas, use a emulação do IE 11 para simular a procuraria nas versões mais antigas do Internet Explorer.
Emuladores e simuladores de dispositivos
Os simuladores e emuladores de dispositivos simulam não apenas o ambiente do navegador, mas todo o dispositivo. Eles são úteis para testar coisas que exigem integração de SO, por exemplo, entrada de formulário com teclados.
Android Emulator
Navegador Stock no Android Emulator
No momento, não é possível instalar o Chrome em um Android Emulator. No entanto, é possível usar navegador Android, o Chromium Content Shell e o Firefox para Android, que abordaremos mais tarde guia. O Chromium Content Shell usa o mesmo mecanismo de renderização do Chrome, mas vem sem nenhum recursos específicos do navegador.
O Android Emulator vem com o SDK do Android, que você precisa fazer o download aqui. Depois, Siga as instruções para configurar um dispositivo virtual e iniciar o emulador.
Depois que o emulador for inicializado, clique no ícone do navegador e você poderá testar seu site no Navegador Stock para Android.
Chromium Content Shell no Android
Content Shell do Android Emulator
Para instalar o Chromium Content Shell para Android, deixe o emulador em execução e execute o seguinte em um prompt de comando:
git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh
Agora você pode testar seu site com o Chromium Content Shell.
Firefox no Android
Ícone do Firefox no Android Emulator
Semelhante ao Content Shell do Chromium, você pode obter um APK para instalar o Firefox no emulador.
Baixar o arquivo .apk correto em https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/.
Depois disso, você pode instalar o arquivo em um emulador aberto ou dispositivo Android conectado com o seguinte comando:
adb install <path to APK>/fennec-XX.X.XX.android-arm.apk
Simulador de iOS
O simulador iOS para Mac OS X vem com o Xcode, que você pode instalar na App Store.
Quando terminar, aprenda a trabalhar com o simulador na documentação da Apple.
Modern.IE
VM moderna do IE
As máquinas virtuais do Modern.IE permitem que você acesse diferentes versões do IE no seu computador pelo VirtualBox ou VMWare. Escolha uma máquina virtual na página de download.
Emuladores e simuladores baseados na nuvem
Se não puder usar os emuladores e não tiver acesso a dispositivos reais, os emuladores baseados na nuvem serão a próxima melhor coisa. Uma grande vantagem dos emuladores baseados na nuvem sobre dispositivos reais e emuladores locais é que você pode automatizar testes de unidade para o seu site em diferentes plataformas.
- O BrowserStack (comercial) é o mais fácil de usar para testes manuais. Você seleciona um sistema operacional sistema, selecione a versão do navegador e o tipo de dispositivo, selecione um URL para navegar e ele criará uma uma máquina virtual hospedada com a qual você pode interagir. Também é possível acionar vários emuladores na na mesma tela, permitindo que você teste a aparência do seu aplicativo em vários dispositivos ao mesmo tempo. tempo de resposta.
- O SauceLabs (comercial) permite executar testes de unidade dentro de um emulador, que podem ser muito útil para definir o script de um fluxo pelo site e assistir à gravação em vídeo depois, em vários dispositivos. Você também pode fazer testes manuais com seu site.
- O Device Anywhere (comercial) não usa emuladores, mas sim dispositivos reais que você pode controlar. remotamente. Isso é muito útil quando você precisa reproduzir um problema em uma dispositivo e não vê o bug nas opções dos guias anteriores.
- O LambdaTest (comercial) ajuda a fazer testes manuais em vários navegadores em uma combinação. de mais de 2.000 navegadores e sistemas operacionais. Os usuários poderão gravar vídeos de bugs complexos e e compartilhá-lo por meio de integrações como MS Teams, Slack e muito mais. Os usuários podem acelerar os testes executar testes em paralelo.