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 Editor de ponto de interrupção vai aparecer.

    Editor de ponto de interrupção

    Figura 2. Editor de ponto de interrupção

  3. No Breakpoint Editor, 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 desconectar uma variável (por exemplo, TodoApp), una a variável em um objeto (por exemplo, {TodoApp}) para registrar o nome e o valor dele 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.

    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 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 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 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 as partes do código 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.

    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. Ele 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 os 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 pela equipe do DevTools. 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.

Pressionar Shift+Tab foca a última mensagem (ou o resultado de uma expressão avaliada). Se a mensagem tiver 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 a mensagem inteira (consulte a Figura 13).

Como focar um link

Figura 11. Como focar um link

Pressionar a tecla de 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 à recomendação de taxa de contraste AAA (link em inglês). A linha AA existe desde o Chrome 65.

A linha AA (de cima) e a linha AAA (de baixo)

Figura 15. A 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 à recomendação AAA. Quando uma cor atende à recomendação AAA, qualquer item do mesmo lado dessa cor também atende à recomendação. Por exemplo, na Figura 15, tudo o que está abaixo da linha inferior é AAA, e o que está acima da linha superior nem sequer 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, tente por algum motivo.

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 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. A opção Configurações > Geolocalizações é 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 > Origens, ative o Dobra 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 no painel Rede 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é-visualização 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.
  • Para informar um problema do DevTools, use Mais opções   Mais   > Ajuda > Informar problemas do 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

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

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59