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

Saiba como o DevTools reduz a digitação com o preenchimento automático mais inteligente do Console, como editar regras @keyframe diretamente no painel "Estilos", como se divertir com as variáveis personalizadas do CSS e como usar o lado sombrio.

Um preenchimento automático mais inteligente no console

Se você é como eu e muitos outros, digita um comando no console para depurar o aplicativo e vê que ele não está funcionando, itera e digita repetidamente e várias vezes. Para ajudar com isso, agora preenchemos automaticamente as instruções completas que você digitou anteriormente, como a seguir:

Preenchimento automático

Editar diretamente as regras de @keyframe no painel "Styles"

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

Suporte às propriedades CSS personalizadas

Propriedades personalizadas do CSS no DevTools

Muitas vantagens serão disponibilizadas ao CSS, e uma delas são as variáveis personalizadas, lançadas no Chrome 49. Garantimos que incluímos suporte total no DevTools, portanto, se você já usou variáveis no Sass antes, experimente as nativas, pois elas permitem que você edite propriedades em tempo real no painel Styles e atualize imediatamente os elementos dependentes.

Um tema escuro para DevTools

Tema escuro em ação

Finalmente, cedemos a uma solicitação que ouvimos dezenas de vezes nos últimos anos: agora você pode escolher o lado sombrio no DevTools. Acesse as configurações do DevTools, defina o tema como escuro e aproveite. Diria que esse recurso ainda está na versão Beta, uma vez que é gerado automaticamente. Portanto, se você encontrar alguma área que pode ser melhorada, informe-nos.

O melhor de todos

  • A gaveta do console agora é recolhida automaticamente quando você clica na guia completa do Console.
  • A árvore de arquivos no Source foi reformulada, com novos ícones e nova funcionalidade de agrupamento.

Como sempre, envie sua opinião pelo Twitter ou use os comentários abaixo e envie bugs para crbug.com/new.

Até o próximo mês!
Paul Bakaus e a equipe do DevTools