Saiba como o DevTools está priorizando os dispositivos móveis com o novo e simplificado Device Mode, que está sempre ativado. Use os botões de cor para adicionar cores aos seus seletores rapidamente e descubra o que vai estar por vir no DevTools em breve.
Um olhar sobre o futuro da autoria
Estamos de volta da Conferência de Desenvolvedores Chrome, onde mostrei como é trabalhar com o DevTools hoje e no futuro. Normalmente, não menciono nenhum recurso que ainda é experimental ou que está em progresso neste resumo, mas estou fazendo uma exceção desta vez. Se você não tiver tempo para assistir à palestra inteira, aqui está o cerne:
Versão 2 do Device Mode
Ainda estamos trabalhando intensamente nessa versão nova e arrojada do Device Mode, mas queríamos dar a todos a oportunidade de testá-la, por isso o ativamos no Canary hoje. Com as mudanças, estamos levando o DevTools a um futuro com foco em dispositivos móveis, em que o desenvolvimento para dispositivos móveis é o padrão, e o desenvolvimento para computadores é um "complemento". Aguarde mais iterações nas próximas semanas com uma postagem mais longa do blog quando terminarmos.
Inspeção avançada de animações
A Inspeção de animação em andamento oferece uma imagem completa e detalhada do que está acontecendo em qualquer lugar em movimento. Em vez de mostrar uma transição em um elemento de cada vez, adicionamos heurísticas que agrupam animações complexas para que você possa se concentrar em tudo o que está vendo. Assista ao vídeo. Vamos oferecer uma postagem do blog maior e independente quando o produto for lançado.
Modo de layout (prévia)
Ainda não está pronto para o grande público, mas muito promissor é o novo Modo de layout, um recurso que mal posso esperar para ver totalmente construído. O Modo de layout adiciona recursos de edição WYSIWYG ao DevTools para qualquer elemento na página. Até agora, a altura, a largura, o preenchimento e as margens podem ser editados no contexto. Vai demorar um pouco mais até que estejamos prontos para tentar, mas vamos avisar você.
Criação de perfis de desempenho com o painel de linha do tempo atualizado
Como parte de um esforço maior na introdução do novo modelo de desempenho RAIL, houve centenas de mudanças menores e maiores no painel Linha do tempo que, juntas, transformam e melhoram bastante a história da criação de perfis de desempenho. Assim, em vez de mostrar cada mudança individual de forma isolada, nosso próprio PaulIrland nos mostrou como depurar corretamente o desempenho de um site, neste caso o site móvel do Hotel Tonight, ao vivo no palco. Entre os recursos recém-anunciados estão as filmagens de carga e performance, a hierarquia de rede incluída, o resumo do treeview e a capacidade de conferir os custos de desempenho por domínio e arquivo.
Adicione facilmente cores de primeiro e segundo plano a qualquer elemento
Para adicionar uma propriedade de cor ou cor de fundo ao elemento, não basta abrir o seletor de cores. Em vez disso, a maioria das pessoas digita algo como “background: vermelho”, para que o ícone do seletor de cores apareça e, em seguida, escolhe a cor real que deseja.
Achamos que poderíamos simplificar isso. Adicionamos dois botões interessantes que aparecem ao passar o cursor sobre o canto inferior direito de um seletor, permitindo que você adicione uma cor e abra o seletor com um único clique:
Os outros melhores
- Desperdiçamos muito espaço anterior no painel "Estilo" ao mostrar tipos de mídia genéricos. Agora, nós ocultamos esses itens antes dos seletores, caso isso não seja incomum.
- Agora é possível passar o cursor sobre um seletor de CSS no painel "Estilo" para ver a quantos elementos na página ele se aplica.
- Ainda não desistiu da impressão? A emulação de mídia de impressão ainda está disponível para mostrar como a página vai ficar quando impressa. Acabamos de mover para as configurações de renderização.
- Ao escolher um elemento para inspecionar, agora expandimos e fechamos automaticamente a subárvore do DOM relevante. Difícil de explicar, ver para crer.
Como sempre, envie sua opinião pelo Twitter ou pelos comentários abaixo e envie bugs para crbug.com/new.
Até o próximo mês!
Paul Bakaus e a equipe do DevTools