Novidades do DevTools (Chrome 73)

Kayce Basques

Confira as novidades do 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 poluir 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 logpoint. O Editor de pontos de interrupção vai aparecer.

   

   Figura 2. O Editor de pontos 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 registrar uma variável (por exemplo, TodoApp), coloque-a em um objeto (por exemplo, {TodoApp}) para registrar o nome e o valor dela no console. Consulte Sempre registrar objetos e Abreviação do valor da propriedade do objeto para saber mais sobre essa sintaxe.

4. Pressione Enter ou clique fora do Editor de pontos de interrupção para salvar. O ícone laranja acima do número da linha representa o logpoint.

   

   Figura 4. Um selo laranja de logpoint na linha 174

Na próxima vez que a linha for executada, o DevTools vai registrar o resultado da expressão do logpoint no console.

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

Consulte Problema do Chromium nº 700519 para denunciar bugs ou sugerir melhorias.

Dicas detalhadas no modo de inspeção

Ao inspecionar um nó, o DevTools agora mostra uma dica expandida com informações importantes comuns, como tamanho e cor da fonte, taxa 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 ver o atalho de teclado.

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

Exportar dados de cobertura de código

Agora é possível exportar os dados de cobertura de código 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 analisado pelas DevTools. ranges descreve as partes do código que foram usadas. start é o deslocamento inicial de um intervalo 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 conjuntos de regras foram usados, mas o do meio não.

Para analisar a quantidade de código usada no carregamento da página e exportar os dados:

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

   

   Figura 7. O menu de comandos

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 . O DevTools recarrega a página e registra quanto código é usado em comparação com quanto é enviado.

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 Problema do Chromium nº 717195 para denunciar bugs ou sugerir melhorias.

Navegar no console com o teclado

Agora você pode usar o teclado para navegar no console. Veja um exemplo.

Ao pressionar Shift+Tab, o foco é direcionado para a última mensagem (ou 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. Pressionar a tecla de seta Esquerda destaca a mensagem inteira (consulte a Figura 13).

Figura 11. Focar um link

Ao pressionar a tecla de seta Para cima, o foco vai para o próximo link.

Figura 12. Focar outro link

Pressionar a tecla de seta Para cima novamente foca a mensagem inteira.

Figura 13. Focar uma mensagem inteira

Ao pressionar a tecla de seta Direita, uma pilha de rastreamento recolhida (ou objeto, matriz etc.) é expandida.

Figura 14. Como expandir um stack trace recolhido

Ao pressionar a tecla de seta esquerda, uma mensagem ou um resultado expandido é recolhido.

Consulte Problema do Chromium nº 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á disponível desde o Chrome 65.

Figura 15. A linha AA (acima) e a linha AAA (abaixo)

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

Dica: Em geral, é possível melhorar a legibilidade das 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 Problema do Chromium nº 879856 para denunciar bugs ou sugerir melhorias.

Salvar substituições personalizadas de localização geográfica

Agora, na guia "Sensores", é possível salvar substituições de geolocalização personalizadas.

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

   

   Figura 16. O menu de comandos

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

   

   Figura 17. A guia "Sensores"

3. Na seção Geolocalização, clique em Gerenciar. Configurações > Geolocalizações.

   

   Figura 18. A guia "Geolocalizações" em "Configurações"

4. Clique em Adicionar local.

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

   

   Figura 19. Adicionar uma geolocalização personalizada

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

Dobramento de código

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

Figura 20. As linhas 54 a 65 foram recolhidas

Para ativar o dobramento de código:

1. Pressione F1 para abrir as Configurações.
2. Em Configurações > Preferências > Fontes, ative Dobramento de código.

Para fechar um bloco de código:

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

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

Guia "Mensagens"

A guia Frames foi renomeada como Mensagens. Essa guia só está disponível no painel Rede ao inspecionar uma conexão de WebSocket.

Figura 21. A guia "Mensagens"

Consulte Problema do Chromium nº 802182 para denunciar bugs ou sugerir melhorias.

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.