Novidades do DevTools (Chrome 73)

Kayce Basques
Kayce Basques
X GitHub Falha

Confira as novidades do DevTools no Chrome 73.

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

Logpoints

usar logpoints para registrar mensagens no console sem sobrecarregar seu código com console.log(); chamadas.

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.

    Como adicionar um logpoint

    Figura 1. Como adicionar um logpoint

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

    Editor de ponto de interrupção

    Figura 2. Editor de ponto de interrupção

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

    Como digitar a expressão do logpoint

    Figura 3. Como digitar a expressão do logpoint

    Dica: Ao fazer logout de uma variável (por exemplo, TodoApp), una a variável em um objeto (por exemplo, {TodoApp}) para desconectar o nome e o valor dela no console. Consulte Sempre registrar objetos e Forma abreviada 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 de cima da linha, o número representa o logpoint.

    Insígnia de Logpoint laranja na linha 174

    Figura 4. Insígnia 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 do Cloud.

O resultado da expressão de logpoint no console

Figura 5. O resultado da expressão de logpoint no console

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

Dicas detalhadas no modo de inspeção

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

Como inspecionar um nó

Figura 6. Como inspecionar um nó

Para inspecionar um nó:

  1. Clique em Inspect Como inspecionar um nó.

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

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

Exportar dados de cobertura de 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 o DevTools analisou. ranges descreve 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 Use Command + Shift + P (Mac) para abrir o menu de comando.

    O menu de comando

    Figura 7. O menu de comando

  2. Comece a digitar coverage, selecione Show Coverage e pressione Enter.

    Mostrar cobertura

    Figura 8. Mostrar cobertura

    A guia Cobertura é aberta.

    Guia "Cobertura"

    Figura 9. Guia "Cobertura"

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

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

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

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

Navegar no 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). Se a mensagem contiver links, o último deles será destacado primeiro. Pressionar Enter abre o link em uma nova guia. Pressionar a tecla de seta para a esquerda destaca toda a mensagem (veja a Figura 13).

Como focar um link

Figura 11. Como focar um link

Pressionar a seta para cima foca o próximo link.

Focar outro link

Figura 12. Focar outro link

Pressionar a seta para cima novamente foca toda a mensagem.

Focar uma mensagem inteira

Figura 13. Focar uma mensagem inteira

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

Como expandir um stack trace recolhido

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 865674 do Chromium 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 à taxa de contraste AAA recomendação. A linha AA existe desde o Chrome 65.

A linha AA (superior) e a linha AAA (abaixo)

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

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

Dica: Em geral, é possível melhorar a legibilidade das suas páginas aumentando a quantidade de texto que atenda à recomendação AAA. Se não for possível atender à recomendação AAA para alguns tente atender ao menos pela recomendação AA.

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

Consulte o problema 879856 do Chromium para informar 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 Use Command + Shift + P (Mac) para abrir o menu de comando.

    O menu de comando

    Figura 16. O menu de comando

  2. Digite sensors, selecione Show Sensors e pressione Enter. A guia Sensores será aberta.

    Guia "Sensores"

    Figura 17. Guia "Sensores"

  3. Na seção Geolocalização, clique em Gerenciar. Configurações > A guia Geolocalizações será aberta.

    Guia "Geolocalizações" em "Configurações"

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

  4. Clique em Adicionar local.

  5. Insira o nome, a latitude e a longitude do local e clique em Adicionar.

    Adicionar uma geolocalização personalizada

    Figura 19. Adicionar uma geolocalização personalizada

Consulte o problema 649657 do Chromium para informar 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.

As linhas 54 a 65 foram dobradas

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 Configurações > Preferências > As origens ativam o dobramento de código.

Para dobrar um bloco de código:

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

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

Guia "Mensagens"

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

A guia "Mensagens"

Figura 21. A guia "Mensagens"

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

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