Novidades do DevTools (Chrome 111)

Jecelyn Yeen

Como depurar a cor HD com o painel "Styles"

Novos tipos e espaços de cores do CSS estão chegando à Web. Também é muito legal que o DevTools tenha introduzido novas ferramentas para ajudar os desenvolvedores a criar, converter e depurar cores de alta definição.

O painel Styles 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 de CSS de alta definição para entender as opções de cores disponíveis na Web.

Confira exemplos de definições de cores do CSS com color(), lch(), oklab() e color-mix(). Exemplos de definições de cores CSS.

Ao usar a função color-mix(), você pode conferir a saída de cor final no painel Computed. resultado da mistura de cores no painel "Computed".

O seletor de cores oferece suporte a todos os novos espaços de cores com 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. Uma linha de limite de gama.

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

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 que alerta você sobre esse recorte. Aviso de recorte de cor.

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

Ative a conta-gotas.

Por fim, a configuração Formato de cor foi descontinuada para abrir espaço para o novo formato de cor HD. Desatualização da configuração do formato de cor.

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

UX de pontos de interrupção aprimorados

O painel Breakpoints redesenhado permite acessar rapidamente os recursos usados com frequência, em especial, a desativação, edição e remoção de pontos de interrupção.

Confira alguns destaques: - As duas opções de pausa de exceção foram movidas para o painel Pontos de interrupção e marcadas com texto para ficarem mais autoexplicativas. Pausar as opções de exceção.

  • Os pontos de interrupção são agrupados por arquivo, ordenados por números de linha ou coluna e podem ser recolhidos. Agrupar pontos de interrupção por arquivo.

  • 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. Novas opções para desativar pontos de interrupção.

  • 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. Caixa de diálogo de edição de ponto de interrupção.

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 reproduzir fluxos de usuários com mais rapidez.

O Gravador apresenta alguns atalhos de teclado convenientes para gravação e reprodução mais rápidas dos fluxos de usuários.

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

Você pode até personalizar esses atalhos no menu Configurações. Personalize os atalhos do Gravador.

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

Problema do Chromium: 1339771

Melhor destaque de sintaxe para o Angular

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

Problemas do Chromium: 1385374, 1385678

Reorganizar caches no painel "Application"

O painel Cache Storage agora pode ser encontrado na seção Storage do painel Application, enquanto o painel Back/forward cache foi movido para a seção Background Services. Caches no painel "Aplicativo".

Problema do Chromium: 1407166

Destaques diversos

Confira algumas correções importantes desta versão:

  • O DevTools foi atualizado para respeitar a configuração Desativar cache ao carregar mapas de origem. (1407084).
  • O painel Elementos agora 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 a depuração, o DevTools agora oferece suporte à avaliação de expressões com membros de classe particulares. (1381806) Avaliar expressões com membros de classe particulares.

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.

Novidades no DevTools

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