Um novo Device Mode para uma geração que prioriza dispositivos móveis
Lançamos o Device Mode, uma maneira de emular dispositivos e trabalhar com designs responsivos, há pouco mais de um ano. Agora é hora do primeiro grande upgrade, a partir do Chrome 49. Quais são as novidades?
Os dispositivos móveis serão o ponto de partida no Chrome DevTools. No passado, oferecíamos maneiras de emular dispositivos móveis, mas o padrão de desenvolvimento era o computador. A emulação de dispositivos móveis sempre precisava estar ativada. Agora que o consumo de sites para dispositivos móveis superou em vários lugares os computadores, estamos mudando nossa posição no DevTools também.
Novidades?
Em primeiro lugar, a interface é simplificada e usa muito menos espaço. Esperamos que o novo Device Mode se torne o principal modo de desenvolvimento para a maioria, então um design claro e simples que estendesse a barra de navegação principal do DevTools era um requisito.
A nova régua de salto rápido sobre as consultas de mídia.
Além disso, centralizamos a janela de visualização e adicionamos uma nova régua de dispositivo de salto rápido na parte de cima, uma ótima ajuda no design responsivo, que dá uma ideia dos tamanhos de dispositivo mais comuns.
Sempre que possível, muitas opções foram agrupadas ou ocultadas por um botão de alternância. Essas novas opções compostas facilitam muito a alternância entre modos. Para alternar alguns controles ou personalizar sua experiência, clique no ícone do menu de três pontos.
Responsivo por padrão
A barra de ferramentas principal do DevTools agora se expande para o lado esquerdo da janela do navegador e inclui as ferramentas mais importantes para emular uma variedade de dispositivos móveis e computadores. Você pode escolher entre dois modos de desenvolvimento:
- Responsivo
- Dispositivo específico
Em ambos os modos, a janela de visualização fica em uma janela redimensionável própria no Chrome. A vantagem significativa é a de que você pode maximizar a janela do navegador e as DevTools do jeito que preferir, sem fazer com que elas mudem quando você testa vários tamanhos da página e voltam.
Responsivo é o modo durante a iteração ativa para garantir que seu site funcione em todos os tipos de dispositivos, não apenas em alguns específicos. Nesse modo, as alças ao lado da janela de visualização são redimensionáveis livremente.
Dispositivo específico se refere a quando você escolhe um dispositivo específico e bloqueia a janela de visualização de acordo com o tamanho dele. Isso se torna útil quando se quer conferir as correções e os toques finais de alguns dispositivos conhecidos próximos ao lançamento. Por isso, não estamos mostrando apenas uma lista enorme de todos os tipos de dispositivos no menu suspenso, mas sim os mais populares. Se você selecionar uma opção, faremos o possível para que ela se comporte da mesma forma que a transação real: eventos de toque, user agent, cromo da janela de visualização e dispositivo e interface do dispositivo (se disponíveis) são emulados.
Depuração remota integrada
As emulações, mesmo as melhores disponíveis, não levam você a lugar nenhum. Atualmente, há coisas que as emulações não conseguem fazer, como:
- Confira se um botão é grande o suficiente para seu polegar.
- Teste o desempenho do site em um smartphone mais lento.
- Depurar as limitações e peculiaridades aleatórias de determinados dispositivos.
Para testar todos esses cenários, é preciso testar, trabalhar e depurar usando dispositivos físicos reais.
Por um tempo, você pode navegar até chrome://inspect, conectar seu dispositivo via
USB e abrir uma sessão de depuração remota pelo DevTools. Mas agora demos um passo adiante e refatoramos a aparência e o comportamento da depuração remota, incorporando-o ao núcleo do DevTools. Em vez de navegar para outra página, agora você pode acessar
Inspect Devices como uma caixa de diálogo diretamente no novo menu principal. Isso
facilita muito a inclusão da depuração física no seu fluxo de trabalho. Basta
conectar o smartphone, sem precisar sair do DevTools.
Novas casas para os outros controles de emulação anteriores
Como os dispositivos móveis agora são o padrão no DevTools, recursos como a limitação de rede foram movidos para a página inicial adequada. Neste caso, o painel "Network".
Alguns recursos, como a emulação de sensores ou configurações de renderização, como emulação de mídia de impressão, foram movidos para um local consistente na gaveta. Todos os extras estão no novo menu principal em "Mais ferramentas".
Sabemos que essa é uma mudança significativa com a qual todos precisaremos nos acostumar. Confira a cobertura completa sobre tudo o que há nos documentos recém-atualizados do Device Mode. Queremos saber sua opinião no Twitter ou, se precisar de mais de 140 caracteres, no nosso bug Tracker (sim, mesmo para solicitações de recursos).