Novidades do DevTools (Chrome 79)

Kayce Basques

Novos recursos para cookies

Depurar o motivo pelo qual um cookie foi bloqueado

Depois de registrar a atividade da rede, selecione um recurso de rede e navegue até o guia Cookies para entender por que os cookies de solicitação ou resposta desse recurso foram bloqueados. Consulte Mudanças no comportamento padrão sem SameSite para entender por que mais mensagens bloquear cookies no Chrome 76 e versões posteriores.

A guia Cookies.

• Os cookies de solicitação em amarelo não foram enviados pela rede. Eles ficam ocultos por padrão. Clique em mostrar os cookies de solicitação filtrados para mostrá-los.
• Os cookies de resposta em amarelo 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 Request Cookies e Response Cookies vem dos cabeçalhos HTTP desse recurso. Os dados de Domain, Path e Expires/Max-Age vêm da Protocolo do Chrome DevTools.

Problemas do Chromium #856777, #993843

Ver valores de cookies

Clique em uma linha no painel "Cookies" para ver o valor do cookie.

Visualização do valor de um cookie.

Problema do Chromium #462370

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

A consulta de mídia prefers-color-scheme permite associar o estilo do site ao do usuário. preferências. 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 desse modo.

Abra o Menu de comando, execute o comando Show Rendering e configure a opção Emulate CSS media o menu suspenso "prefers-color-scheme" para depurar prefers-color-scheme: dark e prefers-color-scheme: light.

Quando prefers-color-scheme: dark está definido (caixa do meio), o painel Styles (caixa à direita) mostra o CSS que é aplicada 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 recurso Emulate de mídia CSS menu suspenso prefers-reduced-motion ao lado de Emulate recurso de mídia CSS prefers-color-scheme. no menu suspenso.

Problema do Chromium #1004246

Emulação de fuso horário

A guia "Sensores" agora permite não apenas substituir a geolocalização, mas também emular regras fusos horários e testar o impacto nos apps da Web. Pode ser surpreendente, mas esse novo recurso melhora a também a confiabilidade da emulação de geolocalização. Antes, os aplicativos da Web podiam detectar o spoofing de local fazer a correspondência entre o local e o fuso horário local do usuário. Agora que a emulação de geolocalização e fuso horário são acopladas, essa categoria de incompatibilidades é eliminada.

Atualizações de cobertura de código

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

A guia "Cobertura" agora usa novas cores para representar códigos usados e não utilizados. Esta combinação de cores é é mais acessível para pessoas com deficiência visual associada à percepção de cores. Na barra vermelha à esquerda representa o código não utilizado, e a barra azulada à direita representa o código usado.

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

A guia Cobertura.

O painel Origens exibe dados de cobertura de código quando 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 utilizado. A linha 11 é um exemplo de código usado.

Problemas do Chromium #1003671 e 1004185

Depurar o motivo da solicitação de um recurso de rede

Depois de registrar a atividade da rede, selecione um recurso de rede e navegue até Initiator. para entender por que o recurso foi solicitado. A seção Pilha de chamadas da solicitação descreve a Pilha de chamadas JavaScript que leva à solicitação de rede.

Guia Iniciador.

Problemas do Chromium 963183 e 842488

O console e os painéis de origens respeitam as preferências de recuo novamente

Há muito tempo, o DevTools tem uma configuração para personalizar sua preferência de recuo para 2 espaços, 4 espaços, oito espaços ou tabulações. Recentemente, a configuração era essencialmente inútil porque o console e Os painéis de origens ignoravam a configuração. Esse bug já foi corrigido.

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

Problema do Chromium 977394

Novos atalhos para a navegação por cursor

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

Problema do Chromium 983874

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.