O desenvolvimento para celular deve ser tão fácil quanto para desktop. Estamos trabalhando duro no Chrome DevTools para facilitar tudo 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. Depois, vamos revelar a emulação adequada de dispositivos móveis.
Fazer screencast da tela do dispositivo para o computador
Até agora, durante a depuração remota, era preciso mudar os olhos para a frente e para trás entre o dispositivo e o DevTools. Agora, o Screencast mostra a tela dos seus dispositivos ao lado do DevTools. Ver isso é bom, mas interagir com ele é ainda melhor:
- Os cliques no screencast são convertidos em toques, e os eventos de toque adequados são disparados no dispositivo.
- Inspecionar elemento no dispositivo com o ponteiro da área de trabalho
- Digite no teclado da área de trabalho. Todas as teclas são enviadas para o dispositivo. Economize tempo ao digitar com os polegares.
- Role a página deslizando com o ponteiro ou deslizando pelo trackpad do laptop.
A documentação completa sobre screencasting captura tudo isso e muito mais, como o envio de um gesto de pinça com o zoom. O Google Chrome no Android Beta (m32) é necessário.
Depuração remota simplificada
Há 18 meses, o Chrome lançou a depuração remota adequada para navegadores WebKit. No entanto, se você testou esse recurso naquela época, precisou lidar com um download de 400 MB do SDK do Android, adicionando o binário adb ao $PATH e alguns encantamentos da linha de comando mágicos.
Agora, estamos felizes em anunciar que você pode esquecer tudo isso. Agora o Chrome pode descobrir e se comunicar de forma nativa com seus dispositivos conectados por USB. Implementamos o protocolo adb diretamente por USB no Chrome para que você possa acessar facilmente o Menu > Tools > Inspect Devices e iniciar a sessão de depuração remota imediatamente.
Isso funciona muito bem em todas as plataformas, incluindo o Chrome OS. No entanto, observe que no Windows é necessário primeiro instalar drivers USB adequados para se comunicar com o dispositivo. Caso nunca tenha tentado antes, você também precisará ativar a depuração USB no dispositivo e confirmar se está usando o Google Chrome para Android (Beta). Leia a documentação completa.
Encaminhamento de portas para projetos locais
Você está desenvolvendo em localhost:8000, mas seu smartphone não consegue acessar isso. Por isso, adicionamos o encaminhamento de portas diretamente ao fluxo de trabalho da depuração remota. Agora ficou fácil trabalhar em todos os seus projetos sem precisar criar um túnel. No about:inspect, clique em "Encaminhamento de portas" para definir quais portas devem ficar disponíveis. Elas acenderão em verde se estiverem prontas.
Emulação de dispositivo móvel
Você nem sempre tem os dispositivos necessários para testar a compatibilidade, né? Embora a depuração remota de dispositivos reais ofereça a melhor experiência de desempenho e toque, agora você pode emular de forma realista muitas características do dispositivo no computador, economizando tempo e tornando o loop de iteração muito mais rápido.
Emular o tamanho da tela, devicePixelRatio e <meta viewport> com a simulação completa de eventos de toque
Se você conhece o recurso anterior de métricas do dispositivo, saiba que o que já está disponível é um upgrade importante. Nossa equipe trabalhou duro para fazer com que a nova emulação de dispositivo móvel tivesse uma representação quase real do que seria exibido em dispositivos reais. Por exemplo, os navegadores WebKit mantêm um algoritmo complexo de dimensionamento automático de texto e, de fato, cada dispositivo tem um "fator de fudge" específico para o dimensionamento automático do texto, que é alterado para ajudar a manter o texto legível. No modo de emulação, você pode confirmar que 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 mostrava em um dispositivo de baixo DPI. Agora, a emulação de dPR no DevTools adapta sua visualização para permitir que você amplie em um cenário de DPI profundo. Além disso, window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) etc. devem refletir sua configuração, permitindo que você veja como seu app se adapta, incluindo o carregamento de diferentes recursos específicos de dpi.
A emulação do dispositivo não abrange totalmente os recursos do navegador ou os bugs. Assim, ao emular o iOS, o WebGL ainda funcionará e você não enfrentará o bug de zoom de orientação do iOS 5. Para conferir essa variabilidade, acesse o dispositivo.
Emulação adequada de <meta viewport> (e @viewport)
O teste do comportamento do que width=device-width e minimum-scale:1.0 faziam era um jogo somente 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 tela sensível ao toque faz com que seus 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 o zoom com gesto de pinça, basta shift + arrastar ou shift + rolar para ampliar o conteúdo. Você terá uma ótima visão do tamanho do conteúdo além da janela de visualização.
Por fim, sua espera de spoofing de user agent (no nível do cabeçalho da solicitação e do window.navigator), da geolocalização e da emulação de orientação permite 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 receber o tamanho de tela correto, a dPR, o UA aplicado ao dispositivo, os eventos de toque completos e a emulação da janela de visualização. É possível testar predefinições específicas ou ajustar essas características uma a uma com facilidade.
Acesse DevTools.chrome.com para ver os documentos completos sobre 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 Chrome Dev Summit sobre o DevTools para dispositivos móveis: