Novidades do DevTools (Chrome 111)

Jecelyn Yeen

Depuração de cores em HD com o painel Styles

Novos espaços e tipos de cores CSS (em inglês) estão chegando à Web. É igualmente empolgante que o DevTools introduziu novas ferramentas para ajudar os desenvolvedores a criar, converter e depurar cores em alta definição.

O painel Styles agora oferece suporte a 12 novos espaços de cor 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 as opções de cor 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 visualizar a saída de cor final no painel Calculado.

O seletor de cores oferece suporte a todos os novos espaços de cor com mais elementos. Por exemplo, clique na amostra de cor de color(display-p3 1 0 1). Uma linha de limite da gama também foi adicionada, distinguindo entre as gamas sRGB e display-p3 para uma compreensão mais clara da gama da sua cor selecionada.

O DevTools oferece suporte à conversão de cores entre formatos de cor. Use o ícone Alterar formato de cor para acessar o pop-up de conversão ou simplesmente use Shift + clique em uma amostra de cor no painel Estilos.

Durante a conversão, é importante saber se ela foi cortada para caber no espaço. O DevTools coloca um ícone de aviso ao lado da cor convertida que alerta sobre esse recorte.

Além disso, você pode escolher cores na tela com o novo atalho. Pressione "c" para ativar o conta-gotas e pressione Escape para desativá-lo. A ferramenta conta-gotas só analisa amostras de cores no espaço de cores sRGB. Por exemplo, se você tentar usar a cor color(display-p3 1 0 1), que está fora do espaço de cores sRGB, a ferramenta de conta-gotas vai recortar a cor mais próxima no espaço sRGB, que é magenta color(display-p3 0.92 0.2 0.97).

Por fim, a configuração Formato de cor foi descontinuada para dar espaço ao novo formato de cores em HD.

Problemas do Chromium: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054

UX de ponto de interrupção aprimorada

O novo painel Breakpoints permite que você tenha acesso rápido aos recursos mais usados, como desativar, editar e remover pontos de interrupção.

Estes são 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 serem mais autoexplicativas.

• 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 deles ou um arquivo.

• Clique no botão "Editar ponto de interrupção" para abrir o editor do ponto de interrupção. A partir daqui, você pode inserir a condição do ponto de interrupção ou alternar para um logpoint.

Consulte a referência de depuração de JavaScript para aprender a depurar com o DevTools.

Problemas do Chromium: 1407586, 1402891, 1402893

Atalhos do Gravador personalizáveis

Use atalhos de teclado para gravar e reproduzir os fluxos de usuários mais rapidamente.

O Gravador apresenta alguns atalhos de teclado convenientes para gravar e repetir mais rapidamente fluxos de usuário.

Não se lembra dos atalhos? Sem problemas. Clique no botão ? para conferir todos os atalhos a qualquer momento.

Também é possível personalizar esses atalhos no menu Configurações.

Se você estiver trabalhando em um painel diferente e quiser iniciar um registro de fluxo do usuário, use o comando Criar uma nova gravação do Menu de comando no DevTools para começar.

Problema do Chromium: 1339771

Melhor destaque de sintaxe para o Angular

O DevTools aprimorou o destaque de sintaxe para os modelos HTML do Angular, facilitando a leitura do código e o reconhecimento da estrutura.

Problemas do Chromium: 1385374, 1385678

Reorganizar caches no painel "Aplicativo"

O painel Armazenamento em cache agora pode ser encontrado na seção Armazenamento do painel Aplicativo, enquanto o painel Cache de avanço e retorno foi movido para a seção Serviços em segundo plano.

Problema do Chromium: 1407166

Destaques diversos

Estas são algumas correções importantes nesta versão:

• O DevTools foi atualizado para respeitar a configuração Desativar cache ao carregar mapas de origem. (1407084).
• Agora, o painel Elementos foca automaticamente no primeiro elemento correspondente nos resultados da pesquisa. (1381853).
• Várias correções para melhorar a confiabilidade do mapa de origem e dos pontos de interrupção. (508270, 1403362, 1403432, 1396298, 1395337, 1405134).
• Para facilitar ainda mais a depuração, o DevTools agora oferece suporte à avaliação de expressões com membros de classe privados. (1381806).

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

• Envie uma sugestão ou feedback pelo site crbug.com.
• Informe um problema do DevTools usando Mais opções   > Ajuda > Relate problemas no DevTools no DevTools.
• Tuíte em @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo que foi abordado na série Novidades no DevTools.