O desenvolvimento para dispositivos móveis precisa ser tão fácil quanto para computadores. Estamos trabalhando muito nas Ferramentas do desenvolvedor do Chrome para facilitar as coisas para você. Chegou a hora de revelar alguns novos recursos que vão melhorar drasticamente o desenvolvimento da Web para dispositivos móveis. Primeiro, a depuração remota e, em seguida, vamos revelar a emulação adequada para dispositivos móveis.
Transmitir a tela do dispositivo para o computador
Até agora, durante a depuração remota, você precisava alternar entre o dispositivo e as ferramentas de desenvolvimento. Agora, o Screencast mostra a tela dos seus dispositivos ao lado dos DevTools. Ver é bom, mas interagir é ainda melhor:
- Os cliques no screencast são transformados 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 do computador. Todas as teclas são enviadas ao dispositivo. Isso economiza muito tempo em comparação com a digitação com os polegares.
- Role a página com o cursor ou deslize no trackpad do laptop.
A documentação completa sobre screencasts (link em inglês) aborda tudo isso e muito mais, como enviar um gesto de zoom por pinça. É necessário ter o Chrome Beta para Android (m32).
Depuração remota fácil
Há 18 meses, o Chrome introduziu a depuração remota adequada para navegadores WebKit, mas, se você tentou fazer isso naquela época, teve que lidar com um download de 400 MB do SDK do Android, adicionando o binário adb ao $PATH e alguns feitiços mágicos de linha de comando.
Agora, temos o prazer de anunciar que você pode esquecer tudo isso. Agora o Chrome pode detectar e se comunicar com dispositivos conectados por USB de forma nativa. Implementamos o protocolo adb diretamente por USB no Chrome. Assim, você pode acessar Menu > Tools > Inspect Devices e iniciar sua sessão de depuração remota imediatamente.
Isso funciona muito bem em todas as plataformas, incluindo o Chrome OS. No entanto, no Windows, primeiro é necessário instalar os drivers USB adequados para se comunicar com o dispositivo. Se você nunca fez isso antes, também vai precisar ativar a depuração USB no dispositivo e confirmar que está usando o Chrome para Android Beta. Leia a documentação completa.
Encaminhamento de portas para projetos locais
Você está desenvolvendo em localhost:8000, mas o smartphone não consegue acessar isso. Por isso, adicionamos o encaminhamento de portas diretamente ao fluxo de trabalho de depuração remota. Agora é fácil trabalhar nos seus projetos completos, sem hacks de tunelamento. Em about:inspect, clique em "Encaminhamento de porta" para definir quais portas você quer disponíveis. Elas vão ficar em verde se estiverem prontas.
Emulação de dispositivo móvel
Você nem sempre tem os dispositivos necessários para testar a compatibilidade, não é? Embora a depuração remota de dispositivos reais ofereça a melhor sensação de desempenho e toque, agora é possível simular realisticamente muitas características de dispositivos no computador, economizando tempo e tornando o ciclo de iteração muito mais rápido.
Emular o tamanho da tela, o devicePixelRatio e o <meta viewport> com a simulação de evento de toque completo
Se você já usou o recurso anterior de métricas de dispositivos, o que está disponível agora é uma grande atualização. A equipe trabalhou muito para que a nova emulação para dispositivos móveis tenha 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 "fator de ajuste" específico para o dimensionamento automático de texto que muda para ajudar 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 alta densidade de pixels mostrava em um dispositivo de baixa densidade. Agora, a emulação de dPR nas Ferramentas do desenvolvedor vai adaptar sua visualização para permitir que você faça zoom 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. refletem sua configuração, permitindo que você veja como o app se adapta, incluindo o carregamento de diferentes recursos específicos de dpi.
A emulação do dispositivo não se estende aos recursos ou bugs do navegador. Assim, durante a emulação do iOS, o WebGL ainda vai funcionar, e você não vai encontrar 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)
Testar o comportamento do que width=device-width e minimum-scale:1.0 fazem antes era um jogo exclusivo para dispositivos. Agora você pode testar rapidamente visualizações diferentes e observar como elas são renderizadas.
Simulação de eventos de toque
A configuração emular tela touchscreen garante 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 fazer o gesto de pinça, basta shift+arraste ou shift+role para aumentar o zoom no conteúdo. Você vai ter uma ótima visualização da escalação de conteúdo além da janela de visualização.
Por fim, os standbys de spoofing de user agent (no cabeçalho da solicitação e no nível window.navigator), geolocalização e emulação de orientação permitem que você explore a funcionalidade completa do dispositivo.
Predefinições do dispositivo
Com as predefinições de emulação, você pode selecionar um smartphone ou tablet e receber o tamanho de tela, a dPR e o UA corretos para esse dispositivo, além de eventos de toque total e viewport emulados. Você pode testar predefinições específicas ou ajustar essas características uma por uma.
Acesse devtools.chrome.com para conferir os documentos completos sobre a emulação de dispositivos móveis com o DevTools.
Demonstração
Para conferir a demonstração completa de todos esses recursos em ação, assista à minha palestra de 23 minutos do Chrome Dev Summit sobre as DevTools para dispositivos móveis: