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 sobrecarregar 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 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 sair de uma variável (por exemplo, TodoApp), envolva a variável em um objeto (por exemplo, {TodoApp}) para sair do nome e do valor dela no console. Consulte Sempre registrar objetos e Atalho de valor de propriedade de objeto para saber mais sobre essa sintaxe.

4. Pressione Enter ou clique fora do Editor de pontos de interrupção para salvar. O selo laranja acima 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 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 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 abrangência do 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, as primeiras e últimas regras foram usadas, mas a 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 Show Coverage 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 o que é 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 de DevTools. Consulte Cobertura.

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

Navegar pelo console com o teclado

Agora você pode 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. Como focar uma mensagem inteira

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

Figura 14. Como expandir um stack trace fechado

Pressione a tecla de seta esquerda para recolher uma mensagem ou resultado aberto.

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

Linha da 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 localização geográfica 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. A tela Configurações > Geolocalização será aberta.

   

   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 oferecem suporte à compactação 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 Dobrar .

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

Guia "Mensagens"

A guia Frames foi renomeada como 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 visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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.
• 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.