DevTools escuro, edição de @keyframe e preenchimento automático mais inteligente

Paul bakaus
Paul Bakaus

Saiba como o DevTools faz você digitar menos com o preenchimento automático mais inteligente do Console, como editar regras @keyframe diretamente no painel Styles, como se divertir com variáveis personalizadas de CSS e como mesclar o lado escuro.

Preenchimento automático mais inteligente no seu console

Se você é como eu e muitos outros, você digita um comando no console para depurar seu aplicativo, vê que ele não funciona, faz a iteração e digita o comando de novo, uma e outra vez. Para ajudar nisso, agora preenchemos automaticamente todas as declarações que você digitou anteriormente, como:

Preenchimento automático

Editar diretamente as regras de @keyframe no painel Estilos

Quando introduzimos o inspetor de animação e o editor de easing no DevTools, ele só estava limitado às transições, porque nunca mostramos animações CSS baseadas em @keyframe no painel "Estilo". Tenho o prazer de dizer que isso é coisa do passado, então vá à loucura! Confira nosso vídeo do tweet para ter uma prévia.

Suporte a propriedades CSS personalizadas

Propriedades CSS personalizadas no DevTools

O CSS oferece muitas vantagens e uma delas são as variáveis personalizadas, que serão lançadas no Chrome 49. Incluímos suporte total ao DevTools. Por isso, se você já estiver usando variáveis no Sass antes, teste as variáveis nativas, porque elas permitem editar propriedades em tempo real no painel Styles e atualizar imediatamente elementos dependentes.

Um tema escuro para DevTools

Tema escuro em ação

Por fim, atendemos a um pedido que recebemos dezenas de vezes nos últimos anos: agora é possível escolher o lado sombrio no DevTools. Acesse as configurações do DevTools, defina o tema como escuro e divirta-se. Esse recurso ainda está na versão Beta porque boa parte dele é gerada automaticamente. Por isso, entre em contato com nossa equipe se você perceber que pode haver melhorias.

Os outros melhores

  • A gaveta do console agora é fechada automaticamente quando você clica na guia completa do console.
  • A árvore de arquivos nas fontes foi reformulada com novos ícones e uma nova funcionalidade de agrupamento

Como sempre, dê 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