Novidades do DevTools (Chrome 83)

Kayce Basques
Kayce Basques
X GitHub Falha

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 pessoas com diferentes tipos de deficiência visual interagem com seu site.

Emular visão turva.

Emular visão turva.

O DevTools pode emular a visão borrada e os seguintes tipos de deficiências de visão de cores:

  • Protanopia: incapacidade de perceber luz vermelha.
  • Deuteranopia: incapacidade de perceber luz verde.
  • Tritanopia: incapacidade de perceber luz azul.
  • Acromatopsia: incapacidade de perceber qualquer cor, exceto tons de cinza (extremamente raro).

Existem versões menos extremas dessas deficiências de visão de cores e, na verdade, são mais comuns. Por exemplo, a protanomalia é uma sensibilidade reduzida à luz vermelha, ao contrário da protanopia, que é a total incapacidade de perceber luz vermelha. No entanto, essas deficiências visuais de "omalia" não são tão claramente definidas: cada pessoa com essa deficiência é diferente e pode enxergar tudo de maneira diferente, ou seja, pode perceber mais/menos das cores relevantes.

Ao projetar para as simulações mais extremas no DevTools, é garantido que seus apps da Web sejam acessíveis a pessoas com protanomalia, deuteranomalia, tritanomalia e acroatomália.

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

Emular localidades

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

  • APIs 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 da solicitação HTTP Accept-Language

Confira o exemplo de código dependentes de localidade para testar.

Envie feedback para o problema 1051822 do Chromium.

Depuração da política de incorporação de origem cruzada (COEP, na sigla em inglês)

O painel "Rede" agora mostra informações de depuração da Política de incorporação de origens.

A coluna Status agora fornece uma explicação rápida do motivo do bloqueio da solicitação, além de um link para visualizar os cabeçalhos da solicitação para mais depuração:

Solicitações bloqueadas na coluna "Status"

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

Mais orientações na seção "Cabeçalhos de resposta"

Envie feedback para o problema 1051466 do Chromium.

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

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

Os novos ícones foram criados para tornar a interface mais consistente com outras ferramentas de depuração da GUI (que geralmente têm pontos de interrupção coloridos) e facilitar a distinção rápida entre os três recursos.

Envie feedback para o problema 1041830 do Chromium.

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.

Encaixe à esquerda no menu de comandos.

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

DevTools fixado à esquerda da janela de visualização

Envie feedback para o problema 1011679 do Chromium.

A opção Settings no Menu principal foi movida

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

"Menu principal" aberto com "Mais ferramentas" focado em "Configurações"

Envie feedback para o problema 1050855 do Chromium.

O painel Auditorias agora se chama Lighthouse.

As equipes do DevTools e do Lighthouse frequentemente recebiam feedback dos desenvolvedores da Web informando que é possível executar o Lighthouse pelo DevTools, mas quando testaram, não encontraram o painel "Lighthouse". Por isso, o painel Audits agora se chama Lighthouse.

Painel do Lighthouse

Excluir todas as substituições locais em uma pasta

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

Excluir todas as substituições

Envie 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 o congelamento de uma página da Web.

Já faz algum tempo que você visualiza tarefas longas no painel "Desempenho", mas no Chrome 83, a interface de visualização de tarefas longas no painel "Desempenho" foi atualizada. A parte da tarefa longa de uma tarefa agora tem um plano de fundo listrado vermelho.

A nova interface de tarefas longas

Envie feedback para o problema 1054447 do Chromium.

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

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

Ative a nova caixa de seleção Mostrar apenas a área de segurança mínima para ícones mascaráveis no painel Manifesto para conferir se o ícone mascarável terá uma boa aparência em dispositivos Android Oreo. Confira Meus ícones atuais estão prontos? para saber mais.

A caixa de seleção "Mostrar apenas a área de segurança mínima para ícones mascaráveis"

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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59