Novidades do DevTools (Chrome 111)

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(). Exemplos de definições de cor CSS.

Ao usar a função color-mix(), é possível visualizar a saída de cor final no painel Calculado. resultado de combinação de cores no painel Computed.

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 faixas sRGB e display-p3 para uma compreensão mais clara da gama da sua cor selecionada. Uma linha do limite da gama.

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. Conversão de cores entre formatos de cor.

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. Aviso de recorte de cor.

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).

Ative o conta-gotas.

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

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. Pausar 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 deles ou um arquivo. Novas opções para desativar pontos de interrupção.

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

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. Os atalhos do Gravador.

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

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. Crie um novo comando de gravação.

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. Destaque de sintaxe para os modelos HTML do Angular.

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. Caches no painel Application.

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). Avaliar expressões com membros da turma particulares.

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   Mais > 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.