Novidades do DevTools (Chrome 73)

Kayce Basques

Confira as novidades das DevTools no Chrome 73.

Versão em vídeo destas notas da versão

Logpoints

Use pontos de registro para registrar mensagens no console sem bagunçar seu código com chamadas console.log().

Para adicionar um logpoint:

1. Clique com o botão direito do mouse no número da linha em que você quer adicionar o Logpoint.

   

   Figura 1. Como adicionar um logpoint

2. Selecione Adicionar ponto de registro. O Editor de pontos de interrupção vai aparecer.

   

   Figura 2. Editor de ponto de interrupção

3. No Editor de pontos de interrupção, insira a expressão que você quer registrar no console.

   

   Figura 3. Como digitar a expressão do Logpoint

   Dica: Ao sair de uma variável (por exemplo, TodoApp), coloque a variável em um objeto (por exemplo, {TodoApp}) para sair do nome e do valor dela no console. Consulte Sempre registrar objetos e Curva do valor da propriedade do objeto para saber mais sobre essa sintaxe.

4. Pressione Enter ou clique fora do Breakpoint Editor para salvar. O selo laranja na parte superior do número da linha representa o logpoint.

   

   Figura 4. Um selo de logpoint laranja na linha 174

Na próxima vez que a linha for executada, o DevTools registrará o resultado da expressão do Logpoint no Console.

Figura 5. O resultado da expressão do ponto de registro no console

Consulte o Problema do Chromium #700519 para denunciar bugs ou sugerir melhorias.

Dicas detalhadas no modo de inspeção

Ao inspecionar um nó, o DevTools agora mostra uma dica de ferramenta expandida com informações importantes, como tamanho da fonte, cor da fonte, proporção de contraste e dimensões do modelo de caixa.

Figura 6. Como inspecionar um nó

Para inspecionar um nó:

1. Clique em Inspecionar .

   Dica: Passe o cursor sobre Inspecionar para conferir o atalho de teclado.

2. Na janela de visualização, passe o cursor sobre o nó.

Exportar dados de cobertura do código

Os dados de cobertura de código agora podem ser exportados como um arquivo JSON. O JSON tem esta aparência:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url é o URL do arquivo CSS ou JavaScript que as DevTools analisaram. ranges descreve as partes do código que foram usadas. start é o deslocamento inicial de um intervalo que foi usado. end é o deslocamento final. text é o texto completo do arquivo.

No exemplo acima, o intervalo de 0 a 21 corresponde a body { margin: 1em; }, e o intervalo de 45 a 67 corresponde a h1 { color: #317EFB; }. Em outras palavras, o primeiro e o último conjunto de regras foram usados, e o do meio não.

Para analisar quanto código é usado no carregamento da página e exportar os dados:

1. Pressione Control+Shift+P ou Command+Shift+P (Mac) para abrir o menu de comando.

   

   Figura 7. O menu de comando

2. Comece a digitar coverage, selecione Mostrar cobertura e pressione Enter.

   

   Figura 8. Mostrar cobertura

   A guia Cobertura é aberta.

   

   Figura 9. Guia "Cobertura"

3. Clique em Atualizar . Ele recarrega a página e registra a quantidade de código usada em comparação com a quantidade enviada.

4. Clique em Exportar para exportar os dados como um arquivo JSON.

A cobertura de código também está disponível no Puppeteer, uma ferramenta de automação de navegador mantida pela equipe do DevTools. Consulte Cobertura.

Consulte o problema do Chromium 717195 para denunciar bugs ou sugerir melhorias.

Navegar pelo console com o teclado

Agora é possível usar o teclado para navegar pelo console. Veja um exemplo.

Pressione Shift+Tab para focar a última mensagem (ou o resultado de uma expressão avaliada). Se a mensagem tiver links, o último será destacado primeiro. Ao pressionar Enter, o link é aberto em uma nova guia. Ao pressionar a tecla de seta esquerda, toda a mensagem é destacada (consulte a Figura 13).

Figura 11. Como focar um link

Ao pressionar a tecla de seta Para cima, o foco é direcionado ao próximo link.

Figura 12. Focar em outro link

Pressione a tecla de seta Para cima novamente para focar toda a mensagem.

Figura 13. Focar uma mensagem inteira

Pressionar a tecla de seta para a direita expande um stack trace recolhido (ou objeto, matriz etc.).

Figura 14. Como expandir um stack trace recolhido

Pressionar a tecla de seta para a esquerda recolhe uma mensagem ou um resultado expandido.

Consulte o Problema do Chromium #865674 para denunciar bugs ou sugerir melhorias.

Linha de taxa de contraste AAA no seletor de cores

O seletor de cores agora mostra uma segunda linha para indicar quais cores atendem à recomendação de taxa de contraste AAA. A linha AA está presente desde o Chrome 65.

Figura 15. Linha AA (parte de cima) e linha AAA (parte de baixo)

As cores entre as duas linhas representam cores que atendem à recomendação AA, mas não à recomendação AAA. Quando uma cor atende à recomendação AAA, qualquer coisa no mesmo lado dessa cor também atende à recomendação. Por exemplo, na Figura 15, tudo abaixo da linha inferior é AAA, e tudo acima da linha superior não atende à recomendação AA.

Dica: Em geral, é possível melhorar a legibilidade das suas páginas aumentando a quantidade de texto que atende à recomendação AAA. Se não for possível atender à recomendação AAA por algum motivo, tente atender pelo menos à recomendação AA.

Consulte Taxa de contraste no seletor de cores para saber como acessar esse recurso.

Consulte o Problema do Chromium #879856 para denunciar bugs ou sugerir melhorias.

Salvar substituições de geolocalização personalizadas

A guia "Sensores" agora permite salvar substituições de geolocalização personalizadas.

1. Pressione Control+Shift+P ou Command+Shift+P (Mac) para abrir o menu de comando.

   

   Figura 16. O menu de comando

2. Digite sensors, selecione Mostrar sensores e pressione Enter. A guia Sensores é aberta.

   

   Figura 17. Guia "Sensores"

3. Na seção Geolocalização, clique em Gerenciar. Configurações > Localizações geográficas será aberto.

   

   Figura 18. Guia "Geolocalização" em "Configurações"

4. Clique em Adicionar local.

5. Digite o nome, a latitude e a longitude de um local e clique em Adicionar.

   

   Figura 19. Como adicionar uma geolocalização personalizada

Consulte o Problema do Chromium 649657 para denunciar bugs ou sugerir melhorias.

Dobramento de código

Os painéis Origens e Rede agora são compatíveis com o dobramento de código.

Figura 20. As linhas 54 a 65 foram dobradas

Para ativar o dobramento de código:

1. Pressione F1 para abrir as Configurações.
2. Em Settings > Preferences > Sources, ative a opção Code folding.

Para dobrar um bloco de código:

1. Passe o cursor sobre o número da linha em que o bloco começa.
2. Clique em Fold .

Consulte o problema do Chromium 328431 para informar bugs ou sugerir melhorias.

Guia "Mensagens"

A guia Frames foi renomeada para Mensagens. Essa guia só está disponível no painel Network ao inspecionar uma conexão de soquete da Web.

Figura 21. Guia "Mensagens"

Consulte o Problema do Chromium #802182 para denunciar bugs ou sugerir melhorias.

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de pré-lançamento dão acesso aos recursos mais recentes do DevTools, permitem testar APIs modernas da plataforma da Web e ajudam a encontrar problemas no 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 em crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades no DevTools.