Novidades do DevTools (Chrome 83)

Kayce Basques

Emular deficiências visuais

Abra a guia "Renderização" e use o novo recurso Emulação de deficiências visuais para ter uma ideia melhor de como as pessoas com diferentes tipos de deficiência visual percebem 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 de visão de cores, e elas são mais comuns. Por exemplo, a protanomalia é uma sensibilidade reduzida à luz vermelha, em oposição à protanopia, que é a incapacidade total de perceber a luz vermelha. No entanto, essas deficiências visuais "-omaly" não são definidas de forma tão clara: cada pessoa com essa deficiência é diferente e pode ver as coisas de maneira diferente (percebendo mais/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, deutranomalia, tritanomalia e acromatomalia.

Envie feedback para o problema do Chromium 1003700 ou saiba mais sobre a implementação.

Emular localidades

Agora é possível emular localidades definindo um local em Sensores > Localização. Abra o Command Menu e digite Sensors para acessar a guia Sensors. Depois de realizar essas ações, as DevTools modificam a localidade padrão atual, afetando o seguinte:

• APIs Intl.*, por exemplo, new Intl.NumberFormat().resolvedOptions().locale
• outras APIs JavaScript com suporte a 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 da solicitação HTTP Accept-Language

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

Envie feedback para o problema do Chromium #1051822.

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 sobre por que uma solicitação foi bloqueada, além de um link para conferir os cabeçalhos da solicitação para mais depuração:

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 do Chromium #1051466.

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

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

• Os pontos de interrupção são representados por círculos vermelhos.
• Os pontos de interrupção condicionais são representados por círculos meio vermelhos e meio 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 em vermelho) e facilitar a distinção entre os três recursos de relance.

Envie feedback para o problema do Chromium #1041830.

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

Use a nova palavra-chave de filtro cookie-path no painel Network 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 Command Menu e execute o comando Dock to left para mover as Ferramentas do desenvolvedor para a esquerda do viewport.

Envie feedback para o Problema do Chromium #1011679.

A opção Settings no Menu principal foi movida

A opção para abrir as Configurações no Menu principal agora pode ser encontrada em Mais ferramentas.

Envie feedback para o problema do Chromium #1050855.

O painel Audits agora é o painel Lighthouse

As equipes do DevTools e do Lighthouse frequentemente recebiam feedback de desenvolvedores da Web de que era possível executar o Lighthouse no DevTools, mas, quando eles tentavam, não conseguiam encontrar o painel "Lighthouse". Por isso, o painel Audits agora é o painel Lighthouse.

Excluir todas as substituições locais em uma pasta

Depois de configurar as Substituições locais, você pode clicar com o botão direito do mouse em uma pasta e selecionar a nova opção Excluir todas as substituições para remover todas as substituições locais dessa pasta.

Envie feedback para o problema do Chromium #1016501.

Interface de tarefas longas atualizada

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.

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

Envie feedback para o problema do Chromium #1054447.

Suporte a ícones mascaráveis no painel "Manifest"

O Android Oreo introduziu ícones adaptativos, que exibem ícones de apps em várias formas em diferentes modelos de dispositivos. Os ícones mascarados são um novo formato de ícone compatível com ícones adaptativos, que permitem garantir que o ícone do PWA tenha uma boa aparência em dispositivos compatíveis com o padrão de ícones mascarados.

Ative a nova caixa de seleção Show only the minimum safe area for maskable icons no painel Manifest para verificar se o ícone mascarável vai ficar bom em dispositivos Android Oreo. Confira Os meus ícones atuais estão prontos? para saber mais.

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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