Novidades do DevTools (Chrome 81)

Kayce Basques

Suporte do Moto G4 no modo dispositivo

Depois de ativar a barra de ferramentas do dispositivo, você pode simular as dimensões de uma janela de visualização do Moto G4 na lista Dispositivo.

Clique em Mostrar frame do dispositivo para mostrar o hardware do Moto G4 ao redor da janela de visualização.

Recursos relacionados:

• Abra o Menu de comandos e execute o comando Capture screenshot para fazer uma captura de tela da janela de visualização que inclui o hardware do Moto G4 (depois de ativar a opção Mostrar frame do dispositivo).
• Limite a rede e a CPU para simular com mais precisão as condições de navegação na Web de um usuário de dispositivo móvel.

Problema do Chromium nº 924693

Atualizações relacionadas a cookies

Cookies bloqueados no painel "Cookies"

O painel "Cookies" no painel "Application" agora colore os cookies bloqueados com um plano de fundo amarelo.

Consulte também Depurar por que um cookie foi bloqueado para saber como acessar uma interface semelhante no painel Rede.

Problema do Chromium nº 1030258

Prioridade do cookie no painel "Cookies"

As tabelas de cookies nos painéis "Rede" e "Aplicativo" agora incluem uma coluna Prioridade.

Problema do Chromium nº 1026879

Editar todos os valores de cookie

Agora, todas as células nas tabelas de cookies são editáveis, exceto as da coluna Tamanho, porque ela representa o tamanho da rede do cookie, em bytes. Consulte Campos para uma explicação de cada coluna.

Copiar como busca de Node.js para incluir dados de cookies

Clique com o botão direito do mouse em uma solicitação de rede e selecione Copiar > Copiar como busca do Node.js para receber uma expressão fetch que inclui dados de cookies.

Problema do Chromium nº 1029826

Ícones de manifesto de app da Web mais precisos

Antes, o painel "Manifesto" no painel "Aplicativo" fazia as próprias solicitações para mostrar ícones de manifesto de apps da Web. Agora, o DevTools mostra exatamente o mesmo ícone de manifesto usado pelo Chrome.

Problema do Chromium nº 985402

Passe o cursor sobre as propriedades CSS content para ver os valores sem escape

Passe o cursor sobre o valor de uma propriedade content para ver a versão sem escape.

Por exemplo, nesta demonstração, ao inspecionar o pseudoelemento p::after, você vê uma string de escape no painel "Estilos":

Ao passar o cursor sobre o valor content, você vê o valor sem escape:

Erros de mapa de origem mais detalhados no console

Agora o console oferece mais detalhes sobre o motivo da falha ao carregar ou analisar um mapa de origem. Antes, ele apenas fornecia um erro sem explicar o que deu errado.

Configuração para desativar a rolagem após o fim de um arquivo

Abra Configurações e desative Preferências > Fontes > Permitir rolagem após o fim do arquivo para desativar o comportamento padrão da interface que permite rolar muito além do fim de um arquivo no painel Fontes.

Confira um GIF do recurso.

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 ao 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 Novidades do DevTools.