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

Use logpoints 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.

    Como adicionar um logpoint

    Figura 1. Como adicionar um logpoint

  2. Selecione Adicionar logpoint. O Breakpoint Editor será exibido.

    Editor do ponto de interrupção

    Figura 2. Editor do ponto de interrupção

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

    Como digitar a expressão de logpoint

    Figura 3. Como digitar a expressão de logpoint

    Dica: Ao desconectar uma variável (por exemplo, TodoApp), envolva a variável em um objeto (por exemplo, {TodoApp}) para registrar o nome e o valor dela no Console. Para saber mais sobre essa sintaxe, consulte Sempre registrar objetos e abreviatura do valor da propriedade do objeto.

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

    Um selo laranja de Logpoint na linha 174

    Figura 4. Um selo laranja de Logpoint na linha 174

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

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 comumente importantes, 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 Inspecionar Como inspecionar um nó.

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

  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 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, mas o do meio não.

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

  1. Pressione Control+Shift+P ou 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 Mostrar cobertura e pressione Enter.

    Mostrar cobertura

    Figura 8. Mostrar cobertura

    A guia Cobertura é aberta.

    Guia "Cobertura"

    Figura 9. Guia "Cobertura"

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

  4. Clique em Exportar 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 717195 do Chromium para informar bugs ou sugerir melhorias.

Navegar no console com o teclado

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

Pressionar Shift+Tab foca a última mensagem (ou o resultado de uma expressão avaliada). Se a mensagem tiver links, o último link será destacado primeiro. Ao pressionar Enter, o link é aberto em uma nova guia. Pressionar a seta para a esquerda destaca a mensagem inteira. Confira a Figura 13.

Como focar um link

Figura 11. Como focar um link

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

Focar em outro link

Figura 12. Focar em outro link

Pressionar a seta para cima novamente foca na mensagem inteira.

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

Expandir um stack trace recolhido

Figura 14. 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 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.

A linha AA (acima) e a linha AAA (inferior)

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

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, tudo no mesmo lado dessa cor também atende à recomendação. Por exemplo, na Figura 15, qualquer coisa abaixo da linha inferior é AAA, e qualquer coisa acima da linha superior não atende nem mesmo à 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, por algum motivo, não for possível atender à recomendação AAA, tente pelo menos atender à 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 personalizadas de geolocalização.

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

    O menu de comando

    Figura 16. O menu de comando

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

    A guia "Sensores"

    Figura 17. A guia "Sensores"

  3. Na seção Geolocalização, clique em Gerenciar. A opção Settings > Geolocations é 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 de um 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 dobra 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 Configurações.
  2. Em Configurações > Preferências > Origens, ative 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 como Mensagens. Essa guia só está disponível no painel 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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59