Desenvolver para dispositivos móveis deve ser tão fácil quanto para computadores. Estamos trabalhando duro no Chrome DevTools para tornar as coisas mais fáceis para você, e é hora de revelar alguns novos recursos que devem melhorar drasticamente seu desenvolvimento da Web para dispositivos móveis. Primeiro, a depuração remota e, depois, vamos revelar a emulação de dispositivo móvel adequada.
Fazer screencast da tela do dispositivo para computador
Até agora, durante a depuração remota, era necessário alternar os olhos entre o dispositivo e o DevTools. Agora, o Screencast mostra a tela dos dispositivos ao lado do DevTools. Ver é bom, mas interagir com ele é ainda melhor:
- Os cliques no screencast são convertidos em toques, e os eventos de toque apropriados são disparados no dispositivo.
- Inspecione o elemento no seu dispositivo com o ponteiro da área de trabalho
- Digite no teclado do computador: todas as teclas pressionadas são enviadas para o dispositivo. Economia enorme de tempo ao digitar com os polegares.
- Role a página com o ponteiro ou deslize-a no trackpad do laptop.
A documentação completa sobre screencasting captura tudo isso e muito mais, como o envio de um gesto de pinça para aplicar zoom. É necessário ter o Chrome no Android Beta (m32).
Depuração remota facilitada
Há 18 meses, o Chrome introduziu a depuração remota adequada para navegadores WebKit, mas se você testou isso naquela época, era preciso fazer o download de um SDK do Android de 400 MB, adicionar o binário adb ao $PATH e alguns comandos mágicos de linha de comando.
Agora, temos o prazer de anunciar que você pode esquecer tudo isso. O Chrome agora pode descobrir e se comunicar de forma nativa com seus dispositivos conectados via USB. Implementamos o protocolo adb diretamente por USB no Chrome, para que você possa acessar facilmente Menu > Tools > Inspect Devices e iniciar imediatamente sua sessão de depuração remota.
Isso funciona muito bem em todas as plataformas, incluindo o Chrome OS. No entanto, no Windows, você precisa primeiro instalar drivers USB adequados para se comunicar com o dispositivo. Se você nunca tentou fazer isso antes, você precisará ativar a depuração USB no dispositivo e confirmar se está usando o Google Chrome para Android Beta. Leia os documentos completos.
Encaminhamento de portas para projetos locais
Você está desenvolvendo em localhost:8000, mas seu smartphone não consegue alcançar isso. Adicionamos o encaminhamento de portas diretamente ao fluxo de trabalho da depuração remota. Agora é fácil trabalhar em todos os seus projetos, sem nenhuma bagunça de encapsulamento. No about:inspect, clique em "Encaminhamento de portas" para definir quais portas estarão disponíveis. Elas acenderão em verde se estiverem prontas.
Emulação para dispositivos móveis
Você nem sempre tem os dispositivos necessários para testar a compatibilidade, tem? Embora a depuração remota de dispositivos reais ofereça a melhor performance e toque, agora é possível emular de forma realista muitas características do dispositivo no computador, economizando tempo e agilizando o loop de iteração.
Emular o tamanho da tela, o devicePixelRatio e o <meta viewport> com uma simulação completa de eventos de toque
Se você já conhece o recurso Métricas do dispositivo, o que está disponível agora é um grande upgrade. A equipe trabalhou muito para que a nova emulação de dispositivos móveis tivesse uma representação quase real do que você veria em dispositivos reais. Por exemplo, os navegadores WebKit mantêm um algoritmo complexo de dimensionamento automático de texto e, na verdade, cada dispositivo tem um "fudge" (fator) específico para o dimensionamento automático do texto, que ajuda a manter o texto legível. No modo de emulação, é possível confirmar se esse comportamento está sendo aplicado e conferir os resultados.
Proporção de pixels do dispositivo
Até agora, era quase impossível ver o que um dispositivo de alto DPI exibe em um dispositivo de baixo DPI. Agora, a emulação de dPR no DevTools adaptará sua visualização para permitir que você amplie um cenário de DPI profundo. Além disso, window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) e outros elementos vão refletir sua configuração, permitindo que você confira como o app se adapta, incluindo o carregamento de diferentes recursos específicos de dpi.
A emulação de dispositivo não se estende até os recursos ou bugs do navegador. Assim, mesmo durante a emulação do iOS, o WebGL ainda funcionará e você não enfrentará o bug de zoom na orientação do iOS 5. Para testar essa variabilidade, abra o dispositivo.
Emulação adequada de <meta viewport> (e @viewport)
O teste do comportamento de width=device-width e minimum-scale:1.0 antes era um jogo exclusivo para dispositivos. Agora é possível testar rapidamente diferentes janelas de visualização e observar como elas são renderizadas.
Simulação de evento de toque
A configuração Emular touchscreen faz com que os cliques sejam interpretados como touchstart, e assim por diante. Além disso, eventos sintéticos como zoom, rolagem e movimentação vão funcionar. Para aplicar zoom, basta arrastar shift + arrastar ou shift + rolar a tela para aplicar zoom ao conteúdo. Você terá uma ótima visualização do conteúdo sendo ampliado além da janela de visualização.
Por fim, os modos de espera de spoofing de user agent (no cabeçalho da solicitação e no nível do window.navigator), geolocalização e emulação de orientação permitem que você explore a funcionalidade completa do dispositivo.
Predefinições do dispositivo
As predefinições de emulação permitem selecionar um smartphone ou tablet e ter o tamanho de tela correto (dPR, UA) aplicado a esse dispositivo, além de eventos de toque total e da janela de visualização emulada. Você pode testar predefinições específicas ou ajustar essas características com facilidade.
Acesse DevTools.chrome.com para ver documentos completos sobre a emulação para dispositivos móveis com o DevTools.
Demonstração
Para ver a demonstração completa de todos esses recursos em ação, confira minha palestra de 23 minutos da Conferência de Desenvolvedores do Chrome sobre o DevTools para dispositivos móveis: