Novidades do DevTools (Chrome 83)

Emular deficiências visuais

Abra a guia "Renderização" e use o novo recurso Emular deficiências visuais para ter uma ideia melhor de como as pessoas com diferentes tipos de deficiências visuais acessam seu site.

Emular visão desfocada.

O DevTools pode emular a visão embaçada e os seguintes tipos de daltonismo:

• Protanopia: incapacidade de perceber luzes vermelhas.
• Deuteranopia: incapacidade de perceber luzes verdes.
• Tritanopia: incapacidade de perceber luzes azuis.
• Acromatopsia: incapacidade de perceber qualquer cor, exceto tons de cinza (extremamente rara).

Existem versões menos extremas dessas deficiências na visão das cores, e elas são mais comuns. Por exemplo, protanomalia é uma sensibilidade reduzida à luz vermelha, ao contrário de protanopia, que é a incapacidade completa de perceber a luz vermelha. No entanto, essas deficiências visuais "-omalia" não são tão claramente definidas: cada pessoa com essa deficiência é diferente e pode ver as coisas de maneira diferente (percebendo mais ou menos das cores relevantes).

Ao projetar para as simulações mais extremas no DevTools, seus apps da Web têm garantia de acessibilidade para pessoas com protanomalia, deuteranomalia, tritanomalia e acromatopsia.

Envie feedback para Chromium issue #1003700 ou leia mais sobre a implementação.

Emular localidades

Agora é possível emular locais definindo uma localização em Sensores > Localização. Abra o menu de comandos e digite Sensors para acessar a guia Sensores. Depois de realizar essas ações, as DevTools modificam a localidade padrão atual, afetando o seguinte:

• APIs de Intl.*, por exemplo, new Intl.NumberFormat().resolvedOptions().locale
• outras APIs JavaScript com reconhecimento de localidade, como String.prototype.localeCompare e *.prototype.toLocaleString, por exemplo, 123_456..toLocaleString()
• APIs do DOM, como navigator.language e navigator.languages
• o cabeçalho de solicitação HTTP Accept-Language

Confira o exemplo de código dependente da localidade para testar.

Envie feedback para o problema #1051822 do Chromium.

Depuração da Política de incorporador entre origens (COEP)

O painel "Rede" agora fornece informações de depuração da Política de incorporador entre origens.

A coluna Status agora oferece uma explicação rápida de por que uma solicitação foi bloqueada, além de um link para ver os cabeçalhos dessa solicitação e fazer mais depurações:

A seção Cabeçalhos de resposta da guia Cabeçalhos oferece mais orientações sobre como resolver os problemas:

Envie feedback para o problema 1051466 do Chromium.

Novos ícones para pontos de interrupção, pontos de interrupção condicionais e pontos de registro

O painel Fontes tem novos ícones para pontos de interrupção, pontos de interrupção condicionais e pontos de registro:

• Pontos de interrupção são representados por círculos vermelhos.
• Os pontos de interrupção condicionais são representados por círculos metade vermelhos e metade brancos.
• Os pontos de registro são representados por círculos vermelhos com ícones do console.

A motivação para os novos ícones foi tornar a interface mais consistente com outras ferramentas de depuração de GUI (que geralmente colorem os pontos de interrupção de vermelho) e facilitar a distinção entre os três recursos de relance.

Envie feedback para problema do Chromium nº 1041830.

Ver solicitações de rede que definem um caminho de cookie específico

Use a nova palavra-chave de filtro cookie-path no painel Rede para se concentrar nas solicitações de rede que definem um caminho de cookie específico.

Confira Filtrar solicitações por propriedades para descobrir mais palavras-chave especiais, como cookie-path.

Anexar à esquerda no Command Menu

Abra o menu de comandos e execute o comando Dock to left para mover o DevTools para a esquerda da sua janela de visualização.

Envie feedback para o problema do Chromium nº 1011679.

A opção Settings no Menu principal foi movida

A opção de abrir Configurações no Menu principal agora está em Mais ferramentas.

Envie feedback para o problema 1050855 do Chromium.

O painel Auditorias agora é o painel Lighthouse

As equipes do DevTools e do Lighthouse recebiam feedback com frequência de desenvolvedores da Web. Eles diziam que era possível executar o Lighthouse no DevTools, mas não conseguiam encontrar o painel "Lighthouse". Por isso, o painel Auditorias agora é o painel Lighthouse.

Excluir todas as substituições locais em uma pasta

Depois de configurar as Substituições locais, clique com o botão direito do mouse em uma pasta e selecione a nova opção Excluir todas as substituições para excluir todas as substituições locais nessa pasta.

Envie feedback para o problema nº 1016501 do Chromium.

Interface atualizada de tarefas longas

Uma tarefa longa é um código JavaScript que monopoliza a linha de execução principal por muito tempo, fazendo com que uma página da Web congele.

Há algum tempo, você já podia visualizar tarefas longas no painel "Desempenho", mas no Chrome 83, a interface de visualização de tarefas longas no painel "Desempenho" foi atualizada. A parte de tarefa longa de uma tarefa agora é colorida com um plano de fundo vermelho listrado.

Envie feedback para o problema do Chromium nº 1054447.

Compatibilidade com ícones mascaráveis no painel "Manifesto"

O Android Oreo introduziu os ícones adaptáveis, que mostram ícones de apps em várias formas em diferentes modelos de dispositivos. Os ícones mascaráveis são um novo formato que oferece suporte a ícones adaptativos, permitindo que o ícone do seu PWA tenha uma boa aparência em dispositivos compatíveis com o padrão de ícones mascaráveis.

Marque a nova caixa de seleção Mostrar apenas a menor área segura para ícones mascaráveis no painel Manifesto para verificar se o ícone mascarável vai ficar bom em dispositivos Android Oreo. Confira Meus ícones atuais estão prontos? para saber mais.

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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