Um novo modo de dispositivo para uma geração que prioriza dispositivos móveis
Lançamos o modo de dispositivo, uma maneira de emular dispositivos e trabalhar com designs responsivos, há pouco mais de um ano. Agora é hora da primeira grande atualização, começando no Chrome 49. O que há de novo?
O dispositivo móvel está se tornando o ponto de partida no Chrome DevTools. Embora oferecêssemos maneiras de emular dispositivos móveis no passado, o desenvolvimento padrão era para computadores. A emulação de dispositivos móveis sempre precisava ser ativada. Agora que o consumo de sites para dispositivos móveis ultrapassou o de computadores em muitos lugares, também estamos mudando nossa posição no DevTools.
O que há de novo?
Em primeiro lugar, a interface é simplificada e usa muito menos espaço. Esperamos que o novo modo de dispositivo se torne o modo de desenvolvimento principal para a maioria. Portanto, um design limpo e simples que estende a barra de navegação principal das Ferramentas do desenvolvedor era um requisito.
A nova régua de salto rápido do dispositivo sobre as consultas de mídia.
Além disso, centralizamos a viewport e adicionamos uma nova régua de salto rápido na parte de cima. Isso é uma grande ajuda ao projetar responsivamente, porque dá uma ideia dos tamanhos de dispositivo mais comuns.
Por fim, muitas opções foram agrupadas ou ocultas por um botão sempre que possível. Essas novas opções compostas facilitam muito a troca entre modos. Para ativar determinados controles ou personalizar sua experiência na barra de ferramentas, clique no ícone de 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 viewport fica na própria janela redimensionável no Chrome. Isso tem a vantagem significativa de que você pode maximizar a janela do navegador e as Ferramentas do desenvolvedor da maneira que quiser e não ter que pular de um lado para o outro ao testar vários tamanhos da página e voltar e ir para frente.
Responsivo é o modo em que você vai querer estar durante a iteração ativa para garantir que o 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 podem ser redimensionadas livremente.
Dispositivo específico se refere a quando você escolhe um dispositivo específico e bloqueia a janela de visualização no tamanho dele. Isso é útil quando você quer fazer correções finais e ajustes em alguns dispositivos conhecidos perto do lançamento. Por isso, não só mostramos uma lista enorme de todos os tipos de dispositivos no menu suspenso, mas também os mais populares no momento. Se você selecionar um, vamos fazer o possível para que ele se comporte da mesma forma que o real: eventos de toque, agente do usuário, viewport e chrome do dispositivo e interface (se disponível) são todos emulados.
Depuração remota integrada
As emulações, mesmo as melhores disponíveis, têm limitações. Existem simplesmente coisas que as emulações não podem fazer hoje, como:
- Verifique se um botão é grande o suficiente para o polegar.
- Teste o desempenho do seu site em um smartphone mais lento.
- Depurar peculiaridades e limitações aleatórias de determinados dispositivos.
Para testar todos esses cenários de forma suficiente, você precisa testar, trabalhar e depurar usando dispositivos físicos reais.
Por um tempo, você podia navegar até chrome://inspect, conectar seu dispositivo por
USB e abrir uma sessão de depuração remota pelo DevTools. Mas agora demos um
passo adiante e refatorizamos a aparência e o comportamento da depuração remota, incorporando-a
ao núcleo do DevTools. Em vez de navegar até outra página, agora é possível
acessar Inspecionar dispositivos 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.
Novos locais para o restante dos controles de emulação anteriores
Como o dispositivo móvel agora é o padrão em todas as ferramentas do desenvolvedor, recursos como o limite de rede foram movidos para o local adequado, neste caso, o painel de rede.
Alguns recursos, como a emulação de sensores ou configurações de renderização, como a emulação de mídia de impressão, foram movidos para um local consistente na gaveta. Todos os extras estão disponíveis no novo menu principal, em "Mais ferramentas".
Sabemos que essa é uma mudança significativa e que todos nós vamos precisar nos acostumar. Confira todos os detalhes nas documentações do modo dispositivo. Queremos saber sua opinião no Twitter ou, se precisar de mais de 140 caracteres, no nosso rastreador de bugs (sim, até mesmo para solicitações de recursos).