Novidades do DevTools (Chrome 79)

Kayce Basques

Novos recursos para cookies

Depurar por que um cookie foi bloqueado

Depois de gravar a atividade de rede, selecione um recurso de rede e navegue até a guia Cookies atualizada para entender por que os cookies de solicitação ou resposta desse recurso foram bloqueados. Consulte Mudanças no comportamento padrão sem o SameSite para entender por que você pode estar vendo mais cookies bloqueados no Chrome 76 e em versões mais recentes.

A guia Cookies.

• Os cookies de solicitação amarelos não foram enviados pela rede. Elas ficam ocultas por padrão. Clique em mostrar cookies de solicitação filtrados para exibir.
• Os cookies de resposta amarelos foram enviados pela rede, mas não foram armazenados.
• Passe o cursor sobre Mais informações para saber por que um cookie foi bloqueado.
• A maioria dos dados nas tabelas Cookies de solicitação e Cookies de resposta vem dos cabeçalhos HTTP do recurso. Os dados de Domínio, Caminho e Expira/Idade máxima são provenientes do Chrome DevTools Protocol.

Problemas do Chromium #856777, #993843

Ver valores de cookies

Clique em uma linha no painel de cookies para ver o valor desse cookie.

Visualizar o valor de um cookie.

Problema #462370 do Chromium

Simular diferentes preferências de "prefers-color-scheme" e "prefers-reduced-motion"

A consulta de mídia prefers-color-scheme permite combinar o estilo do seu site com as preferências do usuário. Por exemplo, se a consulta de mídia prefers-color-scheme: dark for verdadeira, isso significa que o usuário definiu o sistema operacional para o modo escuro e prefere interfaces escuras.

Abra o Menu de comandos, execute o comando Mostrar renderização e defina o menu suspenso Emular recurso de mídia CSS prefers-color-scheme para depurar seus estilos prefers-color-scheme: dark e prefers-color-scheme: light.

Quando prefers-color-scheme: dark está definido (caixa do meio), o painel "Estilos" (caixa à direita) mostra o CSS que é aplicado quando essa consulta de mídia é verdadeira, e a janela de visualização mostra os estilos do modo escuro (caixa à esquerda).

Você também pode simular prefers-reduced-motion: reduce usando o menu suspenso Emular recurso de mídia CSS prefers-reduced-motion ao lado do menu suspenso Emular recurso de mídia CSS prefers-color-scheme.

Problema #1004246 do Chromium

Emulação de fuso horário

Na guia "Sensores", agora é possível não apenas substituir a geolocalização, mas também emular fusos horários arbitrários e testar o impacto nos seus apps da Web. Talvez surpreendentemente, esse novo recurso também melhora a confiabilidade da emulação de geolocalização. Antes, os apps da Web podiam detectar a falsificação de localização comparando a localização com o fuso horário local do usuário. Agora que a emulação de geolocalização e fuso horário estão acopladas, essa categoria de incompatibilidades é eliminada.

Atualizações de cobertura de código

A guia "Cobertura" ajuda você a encontrar JavaScript e CSS não usados.

A guia "Cobertura" agora usa novas cores para representar o código usado e não usado. Essa combinação de cores é comprovadamente mais acessível para pessoas com deficiência na visão de cores. A barra vermelha à esquerda representa o código não usado, e a barra azulada à direita representa o código usado.

A nova caixa de texto do filtro de tipo de cobertura permite filtrar informações de cobertura por tipo: mostrar apenas a cobertura de JavaScript, apenas CSS ou todos os tipos de cobertura.

A guia "Cobertura".

O painel "Fontes" mostra os dados de cobertura de código quando eles estão disponíveis. Clicar nas marcas vermelhas ou azuladas ao lado do número da linha abre a guia "Cobertura" e destaca o arquivo.

Dados de cobertura no painel "Origens". A linha 8 é um exemplo de código não usado. A linha 11 é um exemplo de código usado.

Problemas do Chromium #1003671, #1004185

Depurar por que um recurso de rede foi solicitado

Depois de gravar a atividade de rede, selecione um recurso de rede e navegue até a guia Iniciador para entender por que o recurso foi solicitado. A seção Solicitar pilha de chamadas descreve a pilha de chamadas JavaScript que leva à solicitação de rede.

A guia Iniciador.

Problemas 963183 e 842488 do Chromium

Os painéis "Console" e "Fontes" respeitam novamente as preferências de indentação

Há muito tempo, o DevTools tem uma configuração para personalizar sua preferência de indentação para 2 espaços, 4 espaços, 8 espaços ou guias. Recentemente, essa configuração era essencialmente inútil porque os painéis "Console" e "Fontes" a ignoravam. Esse bug já foi corrigido.

Acesse Configurações > Preferências > Fontes > Recuo padrão para definir sua preferência.

Problema do Chromium #977394

Novos atalhos para navegação com o cursor

Pressione Control+P nos painéis "Console" ou "Fontes" para mover o cursor para a linha acima. Pressione Control+N para mover o cursor até a linha abaixo.

Problema do Chromium #983874

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 aos 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 O que há de novo no DevTools.