Novidades do DevTools (Chrome 83)

Kayce Basques

Emular deficiências visuais

Abra a guia Renderização e use o novo recurso Emular deficiências visuais para obter uma ideia de como as pessoas com diferentes tipos de deficiência visual vivenciam seu site.

Emulando visão borrada.

O DevTools pode emular a visão desfocada e os seguintes tipos de deficiências da visão de cores (link em inglês):

• Protanopia: incapacidade de perceber luzes vermelhas.
• Deuteranopia: incapacidade de perceber luzes verdes.
• Tritanopia: incapacidade de perceber luzes azuis.
• Acromatótopsia: incapacidade de perceber qualquer cor, exceto tons de cinza (extremamente raro).

Existem versões menos extremas dessas deficiências visuais de percepção de cor, e elas são mais comuns. Por exemplo, a protanomalia é uma sensibilidade reduzida à luz vermelha (ao contrário da protanopia, que é a incapacidade completa de perceber a luz vermelha). No entanto, essas "-omalia" deficiências visuais são não tão claramente definida: cada pessoa com essa deficiência visual é diferente e pode ver coisas de forma diferente (ser capaz de perceber mais/menos das cores relevantes).

Ao projetar pensando em simulações mais extremas no DevTools, seus apps da Web têm a garantia de serem acessível a pessoas com protanomalia, deuteranomalia, tritanomalia e acroatomia.

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

Emular localidades

Agora você pode emular localidades definindo uma localização em Sensores > Local. Abra o comando Menu e digite Sensors para acessar a guia Sensores. Depois de realizar essas ações, o DevTools modifica a localidade padrão atual, afetando o seguinte:

• APIs do 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 Exemplo de código dependente de localidade para fazer um teste.

Envie seu feedback para o problema 1051822 do Chromium.

Depuração da política de incorporador entre origens (COEP, na sigla em inglês)

O painel "Rede" agora mostra informações de depuração da política do incorporador de origem cruzada.

A coluna Status agora fornece uma explicação rápida do motivo pelo qual uma solicitação foi bloqueada, bem como uma para visualizar os cabeçalhos dessa solicitação para depuração adicional:

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

Envie seu feedback para o problema 1051466 do Chromium.

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

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

• Pontos de interrupção são representadas por círculos vermelhos.
• Pontos de interrupção condicionais são representados por círculos meio brancos meio vermelhos.
• Logpoints (em inglês) são representados por círculos vermelhos com ícones do Console.

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

Envie seu feedback para o problema 1041830 do Chromium.

Visualizar 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 propriedade para descobrir mais palavras-chave especiais como cookie-path.

Enquadre para a esquerda no menu de comando

Abra o Menu de comando e execute o comando Dock to left para mover o DevTools para a esquerda do janela de visualização.

Envie seu feedback para o problema 1011679 do Chromium.

A opção Settings no Menu principal foi movida

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

Envie seu feedback para o problema 1050855 do Chromium.

O painel Auditorias agora se chama Lighthouse.

Frequentemente, as equipes do DevTools e do Lighthouse recebem feedback dos desenvolvedores Web que é possível executar o Lighthouse pelo DevTools, mas quando testou esse recurso, não conseguiu encontrar o "Farol" e o painel Auditorias agora se chama 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 o novo ícone Excluir todas as substituições para excluir todas as substituições locais da pasta.

Envie seu feedback para o problema 1016501 do Chromium.

Atualização da interface de tarefas longas

Uma tarefa longa é um código JavaScript que monopoliza a linha de execução principal por muito tempo, causando uma conexão página a ser congelada.

Já faz algum tempo que você visualiza as tarefas longas no painel "Desempenho", mas Atualização da interface de visualização de tarefas longas no Chrome 83 no painel "Desempenho". A longa tarefa de uma tarefa agora está colorida com um fundo listrado vermelho.

Envie seu feedback para o problema 1054447 do Chromium.

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

O Android Oreo lançou ícones adaptativos, que mostram ícones do app em várias formas diferentes modelos de dispositivos. Os ícones mascaráveis são um novo formato compatível com ícones adaptativos, que permitem garantir que o ícone do PWA tenha uma boa aparência em dispositivos com suporte à ícones padrão.

Ative a nova caixa de seleção Mostrar apenas a área mínima de segurança para ícones mascaráveis no Manifesto. para verificar se o ícone mascarável tem uma boa aparência em dispositivos Android Oreo. Consulte Are my ícones atuais prontos? para saber mais.

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.