Apesar de web design responsivo já não ser mais considerado novidade, técnicas relativas a esta nova maneira de desenvolver a web surgem a cada dia, tanto por parte de desenvolvedores “independentes”, quanto de grandes empresas com softwares consagrados. Em relação a testes e depuração, este é o caso para o Google Chrome com seu DevTools Device Mode.
Media Queries Tool no Device Mode
Uma vez que você tenha aberto o Chrome DevTools, é possível localizar um pequeno ícone de dispositivo à esquerda, no topo da barra; ao clicar neste ícone, a exibição padrão da página torna-se o Device Mode (Modo de Dispositivo). Fica possível redimensionar a janela ao longo da régua ou escolher um dos dispositivos disponíveis no menu dropdown — se você escolher um dispositivo com uma resolução grande, é possível fazer a tela diminuir para caber no painel de visualização. Também é possível trocar a orientação clicando no ícone de alternância, escolhendo entre portrait (retrato) e landscape (paisagem).
Uma das features mais úteis no Device Mode é a Media Queries Tool (Ferramenta de Media Queries). Clicando no ícone à esquerda das predefinições do dispositivo (aquela que parece uma escadinha), você recebe as representações visuais das media queries usadas na página!
Ao clicar em alguma das barras, a viewport é automaticamente ajustada para corresponder à escolha. Selecionando qualquer uma das barras e clicando com o botão direito, aparece a opção “Reveal In Source Code” (“Mostrar no código-fonte”), que pode ser acionada para mostrar o código do respectivo breakpoint!
Conectividade no Device Mode
A nova ferramenta também conta com a possibilidade de emular diferentes velocidades de conexão! A partir do menu suspenso ao lado do menu de escolha de aparelho, você pode escolher velocidades de redes móveis, como 3G e EDGE, e fazer testes de performance mais mais facilmente.
Debug remoto com screencasting no Device Mode
Há uma nova adição Device Mode: um melhor recurso para screencasting. Esta feature obscura foi introduzida na DevTools já há algum tempo, mas os novos e aprimorados recursos vieram no Chrome Canary como experimentos.
Para usar os recursos experimentais, você precisa habilitar “DevTools Experiments” (“Ativar experiências das Ferramentas do desenvolvedor”) acessando o endereço chrome://flags/#enable-devtools-experiments e, em seguida, abrindo a DevTools e clicando no ícone de engrenagem para ativar manualmente o recurso de screencast.
Além disso, você precisa ativar o modo de USB Debug (“Depuração de USB”) no dispositivo Android que será usado.
Uma vez que você tenha conectado um dispositivo ao computador com um cabo USB, você deve ver um ícone de dispositivo com “1”, que indica o número de dispositivos conectados. Em seguida, clique em “Try Here” (“Tentar Aqui”) para abrir uma janela de screencast.
Digitando uma URL na DevTools reflete no dispositivo conectado, que inicia a página web no Chrome. Torna-se possível navegar na página tanto do dispositiv, quanto através do screencasting.
A aba “Layers” (“Camadas”) provê uma visualização de camadas do DOM para mensurar renderização e painting — mais sobre isso no artigo sobre renderização de páginas web.
Conclusão
Eis uma lista com os novos recursos da DevTools para desenvolvimento mobile:
- Layouts responsivos
- Representação aprimorada de media queries
- Filtro de estilos
- Edição de media queries
- Emulação inline
- Emulação
- Predefinições com os dispositivos mais populares
- Emulação de viewport
- Emulação de sensores (touch, geolocation, acelerômetro)
- Limitação de velocidades de conexão com várias predefinições
- Debugging remoto
- Plug & play
- Aprimoramento de recursos já existentes
- Screencast
- Redirecionamento de porta
A cada nova atualiza da DevTools o Google Chrome se torna mais e mais poderoso e importante para testes de web design responsivo e features mobile, em geral. Certamente essa atualização da ferramenta foi uma das mais importantes — especialmente em relação à inspeção/edição de breakpoints, emulação de diferentes velocidades de conexão e debugging remoto — e, como todos os desenvolvedores web esperamos, o Device Mode da DevTools, com o tempo, deve nos presentear com mais e mais recursos para facilitar a desenvolver a web.
Screencast
E, para ver as principais novidades do Device Mode da DevTools, assista a este screencast: