Saiba como as DevTools priorizam os dispositivos móveis com um novo Modo dispositivo simplificado e sempre ativado. Use os botões de cor para adicionar cores rapidamente aos seus seletores e descobrir o que vem por aí nas Ferramentas do desenvolvedor.
Um vislumbre do futuro da criação de conteúdo
Acabamos de voltar do Chrome Dev Summit, onde mostrei como é trabalhar com as DevTools hoje e no futuro. Normalmente, não mencionamos recursos que ainda são experimentos ou trabalhos em andamento neste resumo, mas vamos fazer uma exceção desta vez. Se você não tiver tempo para assistir a palestra inteira, confira o resumo:
Modo dispositivo versão 2
Ainda estamos trabalhando muito nessa nova iteração do Modo de dispositivo, mas queríamos dar a todos a oportunidade de testá-lo. Por isso, ativamos o recurso no seu Canary hoje. Com as mudanças, estamos levando as Ferramentas do desenvolvedor para um futuro com foco em dispositivos móveis, em que o desenvolvimento para dispositivos móveis é o padrão e o desenvolvimento para computadores é o "complemento". Espere mais iterações nas próximas semanas com uma postagem mais longa no blog quando terminarmos.
Inspeção de animação avançada
A Inspeção de animação em andamento mostra uma imagem completa e detalhada do que está acontecendo em qualquer coisa em movimento. Em vez de mostrar uma transição em um elemento por vez, adicionamos heurísticas que agrupam animações complexas para que você possa se concentrar em tudo o que está vendo. Confira o vídeo. Vamos publicar uma postagem de blog maior e independente quando o lançamento for concluído.
Modo de layout (prévia)
O novo modo de layout não está totalmente pronto, mas é muito promissor. Mal posso esperar para ver o recurso totalmente desenvolvido. O modo de layout adiciona recursos de edição WYSIWYG às Ferramentas do desenvolvedor para qualquer elemento na página. Até agora, a altura, a largura, os paddings e as margens podem ser editados no contexto. Vai demorar um pouco mais até que possamos testar, mas vamos manter você informado.
Perfil de desempenho com o painel da linha do tempo atualizado
Como parte de um esforço maior para introduzir o novo modelo de performance RAIL, foram feitas centenas de mudanças pequenas e grandes no painel da linha do tempo. Juntas, elas transformam e melhoram bastante a história do perfil de performance. Em vez de mostrar cada mudança individual isoladamente, nosso próprio Paul Irish nos mostrou como depurar corretamente o desempenho de um site, neste caso o site para dispositivos móveis do Hotel Tonight, ao vivo no palco. Entre os recursos recém-anunciados estão as tiras de carregamento e performance, a cascata de rede incluída, o resumo da visualização em árvore e a capacidade de conferir os custos de desempenho por domínio e arquivo.
Adicione cores de primeiro e segundo plano a qualquer elemento com facilidade
Sempre que você quisesse adicionar uma propriedade de cor ou de cor de plano de fundo ao elemento, não seria possível abrir o seletor de cores. Em vez disso, a maioria de vocês digita algo como "background: red;" toda vez que o ícone do seletor de cores aparece e depois escolhe a cor que você queria.
Achamos que poderíamos simplificar isso. Adicionamos dois botões úteis 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:
O melhor do resto
- Antes, desperdiçávamos muito espaço no painel de estilo mostrando tipos de mídia genéricos. Agora, se não for incomum, vamos ocultar essas informações antes dos seletores.
- Agora é possível passar o cursor sobre um seletor de CSS no painel "Estilo" para saber a quais elementos da página ele se aplica.
- Ainda não desistiu de imprimir? A emulação de mídia impressa ainda está disponível para você conferir como sua página vai ficar quando for impressa. Nós apenas a movemos para as "Configurações de renderização".
- Ao escolher um elemento para inspeção, agora expandimos e fechamos automaticamente a subárvore DOM relevante. É difícil explicar, ver é acreditar.
Como sempre, deixe sua opinião no Twitter ou nos comentários abaixo e envie bugs para crbug.com/new.
Até o próximo mês!
Paul Bakaus e a equipe do DevTools