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

Emulando visão borrada.

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 deficiências de visão de "omalia" não são definidas com tanta clareza: cada pessoa com essa deficiência é diferente e pode ver as coisas de forma diferente, ou seja, capaz de perceber mais/menos das cores relevantes.

Ao projetar para simulações mais extremas no DevTools, seus apps da Web têm a garantia de serem acessíveis 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 configurando uma localização em Sensores > Localização. Abra o Menu de comando 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 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 um link para visualizar os cabeçalhos dessa solicitação e fazer uma depuração mais detalhada:

Solicitações bloqueadas na coluna "Status"

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

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

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:

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

Envie seu 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 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 da janela de visualização.

DevTools encaixado à esquerda da 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.

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

Envie seu feedback para o problema 1050855 do Chromium.

O painel Auditorias agora se chama Lighthouse.

Com frequência, as equipes do DevTools e do Lighthouse receberam feedback dos desenvolvedores 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 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 dela.

Excluir todas as substituições

Envie seu feedback para o problema 1016501 do Chromium.

Atualização da interface de tarefas longas

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

Já faz algum tempo que você consegue visualizar as Tarefas longas no painel "Desempenho", mas a interface de visualização de tarefas longas do Chrome 83 foi atualizada no painel "Desempenho". A parte "Tarefa longa" de uma tarefa agora está colorida com um fundo listrado vermelho.

A nova interface de tarefas longas

Envie seu feedback para o problema 1054447 do Chromium.

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

O Android Oreo introduziu ícones adaptativos, que mostram ícones do app em várias formas em diferentes modelos de dispositivos. Os ícones mascaráveis são um novo formato 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 mínima de segurança para ícones mascaráveis no painel Manifest para conferir se o ícone mascarável vai ter uma boa aparência em dispositivos Android Oreo. Consulte Meus ícones atuais estão prontos? para saber mais.

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é-visualização 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.
  • Para informar um problema do DevTools, use Mais opções   Mais   > Ajuda > Informar problemas do 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

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

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59