Depuração de cores HD com o painel "Estilos"
Novos tipos e espaços de cores CSS estão chegando à Web! Também é muito interessante que o DevTools tenha apresentado novas ferramentas para ajudar os desenvolvedores a criar, converter e depurar cores de alta definição.
O painel Estilos agora oferece suporte a 12 novos espaços de cores e 7 novas gamas, conforme descrito na especificação CSS Color Level 4. Consulte o Guia de cores CSS de alta definição para entender melhor as opções de cores disponíveis na Web.
Confira exemplos de definições de cores CSS com color(), lch(), oklab() e color-mix().
Ao usar a função color-mix(), é possível ver a saída de cor final no painel Calculado.
O seletor de cores é compatível com todos os novos espaços de cores e tem mais recursos. Por exemplo, clique na amostra de cor de color(display-p3 1 0 1). Uma linha de limite de gama também foi adicionada, distinguindo entre as gamas sRGB e display-p3 para uma compreensão mais clara da gama da cor selecionada.
O DevTools permite converter cores entre formatos. Use o ícone Mudar formato de cor para acessar o pop-up de conversão ou simplesmente use Shift + clique em uma amostra de cor no painel Estilos.
Ao converter, é importante saber se a conversão foi cortada para caber no espaço. O DevTools coloca um ícone de aviso ao lado da cor convertida para alertar sobre esse corte.
Além disso, você pode escolher cores na tela com o novo atalho. Pressione "c" para ativar o conta-gotas e Escape para desativar. A ferramenta conta-gotas só coleta cores no espaço de cores sRGB. Por exemplo, se você tentar selecionar a cor color(display-p3 1 0 1), que está fora do espaço de cores sRGB, o conta-gotas vai cortar a cor para a mais próxima no espaço sRGB, que é o magenta color(display-p3 0.92 0.2 0.97).
Por fim, a configuração Formato de cor foi descontinuada para dar lugar ao novo formato de cor HD.
Problemas do Chromium: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054
UX de ponto de interrupção aprimorada
O painel Pontos de interrupção reformulado permite acesso rápido a recursos usados com frequência, principalmente desativação, edição e remoção de pontos de interrupção.
Confira alguns destaques:
- As duas opções de exceção de pausa foram movidas para o painel Pontos de interrupção e rotuladas com texto para facilitar a compreensão.
Os pontos de interrupção são agrupados por arquivo, ordenados por números de linha ou coluna e podem ser recolhidos.
Há novas opções para desativar, remover e editar pontos de interrupção ao passar o cursor sobre um ponto de interrupção ou arquivo.
Clique no botão de edição do ponto de interrupção para abrir o editor. Aqui, você pode inserir a condição do ponto de interrupção ou mudar para um logpoint.
Consulte a referência de depuração do JavaScript para saber como depurar com o DevTools.
Problemas do Chromium: 1407586, 1402891, 1402893
Atalhos personalizáveis do Gravador
Use atalhos do teclado para gravar e repetir fluxos de usuários mais rapidamente.
O Gravador apresenta alguns atalhos de teclado convenientes para gravar e repetir fluxos de usuários mais rapidamente.
Não se lembra dos atalhos? Não tem problema. Clique no botão ? para conferir todos os atalhos a qualquer momento.
Você pode até personalizar esses atalhos no menu Configurações.
Se você estiver trabalhando em outro painel e quiser iniciar uma gravação de fluxo de usuário, use o comando Criar uma nova gravação no Menu de comandos do DevTools para começar.
Problema do Chromium: 1339771
Melhor destaque de sintaxe para Angular
As DevTools aprimoraram o destaque de sintaxe para modelos HTML do Angular, facilitando a leitura do código e o reconhecimento da estrutura.
Problemas do Chromium: 1385374,