Novidades do DevTools (Chrome 70)

Kayce Basques
Kayce Basques
X GitHub Falha

Olá! Já se passaram cerca de 12 semanas desde nossa última atualização, que foi para o Chrome 68. Ignoramos o Chrome 69 porque não tínhamos novos recursos ou alterações na IU suficientes para justificar uma publicação.

Os novos recursos e as principais mudanças do DevTools no Chrome 70 incluem:

Continue lendo ou assista à versão em vídeo deste documento:

Expressões ao vivo no console

Fixe uma expressão em tempo real na parte de cima do console quando quiser monitorar o valor dela em tempo real.

  1. Clique em Create Live Expression Criar expressão ao vivo. A interface Live Expression será aberta.

    A interface do Live Expression

    Figura 1. A interface do Live Expression

  2. Digite a expressão que você quer monitorar.

    Digitar Date.now() na IU de expressão em tempo real.

    Figura 2. Digite Date.now() na interface do recurso "Live Expressions"

  3. Clique fora da interface do Live Expression para salvar sua expressão.

    Uma expressão em tempo real salva.

    Figura 3. Uma expressão dinâmica salva

Os valores de "Live Expression" são atualizados a cada 250 milissegundos.

Destacar nós do DOM durante a avaliação rápida

Digite uma expressão avaliada como um nó DOM no console, e a avaliação antecipada agora destacará esse nó na janela de visualização.

Depois de digitar document.activeElement no Console, um nó é destacado na janela de visualização.

Figura 4. Como a expressão atual é avaliada como um nó, esse nó é destacado na janela de visualização.

Aqui estão algumas expressões que podem ser úteis:

  • document.activeElement para destacar o nó em foco no momento.
  • document.querySelector(s) para destacar um nó arbitrário, em que s é um seletor de CSS. Isso equivale a passar o cursor sobre um nó na Árvore DOM.
  • $0 para destacar qualquer nó que esteja selecionado no momento na árvore do DOM.
  • $0.parentElement para destacar o pai do nó selecionado no momento.

Otimizações do painel de desempenho

Quando a criação de perfil de uma página grande, o painel "Desempenho" levava dezenas de segundos para processar e visualizar os dados. Clicar em um evento para saber mais sobre ele na guia "Resumo" também às vezes levava vários segundos para carregar. O processamento e a visualização estão mais rápidos no Chrome 70.

Processamento e carregamento de dados de desempenho.

Figura 5. Processamento e carregamento de dados de desempenho

Depuração mais confiável

O Chrome 70 corrige alguns bugs que faziam com que os pontos de interrupção desapareçassem ou não fossem acionados.

Além disso, corrige bugs relacionados aos mapas de origem. Alguns usuários do TypeScript instruem o DevTools a ignorar um determinado arquivo TypeScript ao percorrer o código. Em vez disso, o DevTools ignora o arquivo JavaScript empacotado por completo. Essas correções também resolvem um problema que fazia com que o painel Sources fosse executado lentamente.

Ativar a limitação de rede no menu de comando

Agora é possível definir a limitação de rede como 3G rápido ou 3G lento no Menu de comando.

Comandos de limitação de rede no menu de comandos.

Figura 6. Comandos de limitação de rede no menu de comandos

Preencher pontos de interrupção condicionais automaticamente

Use a interface de preenchimento automático para digitar suas expressões de Conditional Breakpoint mais rapidamente.

A interface do Autocomplete

Figura 7. A interface do Autocomplete

Você sabia? A interface do Autocomplete é possível graças ao CodeMirror, que também alimenta o Console.

Interromper em eventos do AudioContext

Use o painel Event Listener Breakpoints para pausar na primeira linha de um manipulador de eventos do ciclo de vida AudioContext.

O AudioContext faz parte da API Web Audio, que você pode usar para processar e sintetizar áudio.

Eventos do AudioContext no painel Breakpoints do listener de eventos.

Figura 8. Eventos do AudioContext no painel Pontos de interrupção do listener de eventos

Depurar apps Node.js com ndb

ndb é um novo depurador para aplicativos Node.js. Além dos recursos de depuração comuns disponíveis pelo DevTools, o ndb também oferece:

  • Detectar e anexar processos filhos.
  • É necessário colocar pontos de interrupção antes dos módulos.
  • Editar arquivos na interface do DevTools.
  • Ignora todos os scripts fora do diretório de trabalho atual por padrão.

A interface ndb.

Figura 9. A interface ndb

Confira o README da ndb (em inglês) para saber mais.

Dica bônus: meça as interações reais dos usuários com a API User Timing

Quer medir quanto tempo usuários reais levam para concluir jornadas críticas nas suas páginas? instrumente seu código com a API User Timing.

Por exemplo, suponha que você queira avaliar quanto tempo um usuário passa na sua página inicial antes de clicar no botão de call-to-action (CTA). Primeiro, marque o início da jornada em um manipulador de eventos associado a um evento de carregamento de página, como DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

Em seguida, você marcaria o fim da jornada e calcularia sua duração ao clicar no botão:

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

Também é possível extrair as medições, o que facilita o envio delas ao serviço de análise para coletar dados anônimos e agregados:

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

O DevTools marca automaticamente as medições da User Timing na seção User Timing das suas gravações de desempenho.

A seção "Velocidade do usuário".

Figura 10. A seção "Velocidade do usuário"

Isso também é útil ao depurar ou otimizar o código. Por exemplo, se você quiser otimizar uma determinada fase do seu ciclo de vida, chame window.performance.mark() no início e no fim da função do ciclo de vida. O React faz isso no modo de desenvolvimento.

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