Novidades do DevTools (Chrome 67)

Kayce Basques
Kayce Basques
X GitHub Falha

Os novos recursos e as principais mudanças que chegam ao DevTools no Chrome 67 incluem:

Versão em vídeo das notas da versão:

Abra o painel Rede e pressione Command+F (Mac) ou Control+F (Windows, Linux, ChromeOS) para abrir o novo painel Pesquisa de rede. O DevTools pesquisa os cabeçalhos e corpos de todas as solicitações de rede para a consulta fornecida.

Pesquisando o texto "cache-control" com o novo painel de pesquisa de rede.

Figura 1. Pesquisando o texto cache-control com o novo painel de pesquisa de rede

Clique em Match Case Diferenciar maiúsculas de minúsculas para que a consulta diferencie maiúsculas de minúsculas. Clique em Usar expressão regular Usar expressão regular para mostrar os resultados que correspondem ao padrão fornecido. Não é necessário envolver o RegEx em barras.

Uma consulta de expressão regular no painel "Pesquisa de rede".

Figura 2. Uma consulta de expressão regular no painel "Pesquisa de rede".

A interface do painel Pesquisa global agora corresponde à interface do novo painel Pesquisa de rede. Agora, ele também mostra os resultados de forma bonita para facilitar a leitura.

A interface antiga e a nova.

Figura 3. A antiga interface à esquerda e a nova à direita

Pressione Command+Option+F (Mac) ou Control+Shift+F (Windows, Linux, ChromeOS) para abrir a Pesquisa global. Também é possível abrir o Command Menu.

Visualizações de valor de variável CSS no painel Styles

Quando o valor de uma propriedade de cor CSS, como background-color ou color, é definido como uma variável CSS, o DevTools agora mostra uma prévia dessa cor.

Exemplo de valores de cor de variável CSS.

Figura 4. Na interface antiga à esquerda, não há uma visualização de cor ao lado de color: var(--main-color), enquanto na nova interface à direita, há.

Copiar como busca

Clique com o botão direito do mouse em uma solicitação de rede e selecione Copiar > Copiar como Fetch para copiar o código equivalente a fetch() dessa solicitação para a área de transferência.

Cópia do código equivalente a fetch() para uma solicitação.

Figura 5. Como copiar o código equivalente a fetch() para uma solicitação

O DevTools produz um código como este:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Atualizações do painel de auditorias

Novas auditorias

O painel Audits tem duas novas auditorias, incluindo:

Novas opções de configuração

Agora é possível configurar o painel Audits para:

  • Preservar as configurações de viewport e user agent para computadores. Em outras palavras, você pode impedir que o painel Audits simule um dispositivo móvel.
  • Desative a limitação de rede e da CPU.
  • Preserve o armazenamento, como LocalStorage e IndexedDB, em auditorias.

Novas opções de configuração de auditoria.

Figura 6. Novas opções de configuração de auditoria

Ver traces

Depois de auditar uma página, clique em Visualizar trace para conferir os dados de desempenho de carga em que a auditoria se baseia no painel Performance.

O botão "View Trace" (Mostrar trace).

Figura 7. O botão Ver trace

Interromper loops infinitos

Se você trabalha com loops for, do...while ou recursão com frequência, provavelmente executou um loop infinito por engano ao desenvolver seu site. Para interromper o loop infinito, agora você pode:

  1. Abra o painel Origens.
  2. Clique em Pausar Pausar. O botão muda para Retomar a execução do script Retomar.
  3. Mantenha Resume Script Execution Retomar e selecione Stop Current JavaScript Call Parar.

No vídeo acima, o relógio está sendo atualizado por um timer setInterval(). Clicar em Start Infinite Loop executa um loop do...while que nunca para. O intervalo é retomado porque não estava em execução quando Stop Current JavaScript Call Parar foi selecionado.

Tempo de carregamento do usuário nas guias "Performance"

Ao visualizar uma gravação de performance, clique na seção Tempo do usuário para conferir as medidas de Tempo do usuário nas guias Resumo, Bottom-Up, Call Tree e Event Log.

Visualização das medições de tempo do usuário na guia "De baixo para cima".

Figura 8. Visualização das medidas de tempo do usuário na guia Bottom-Up. A barra azul à esquerda da seção User Timing indica que ela está selecionada.

Em geral, agora é possível selecionar qualquer uma das seções (Main Thread, User Timing, GPU, ScriptStreamer e assim por diante) e conferir a atividade dessa seção nas guias.

Selecionar instâncias de VM JavaScript no painel "Memória"

O painel Memória agora lista claramente todas as instâncias de VM JavaScript associadas a uma página, em vez de ocultá-las atrás do menu suspenso Destino, como antes.

Capturas de tela antes e depois do painel de memória.

Figura 9. Na interface antiga à esquerda, as instâncias de VM JavaScript estão ocultas atrás do menu suspenso Target, enquanto na nova interface à direita elas são mostradas na tabela Select JavaScript VM Instance.

Ao lado da instância developers.google.com, há dois valores: 8.7 MB e 13.3 MB. O valor à esquerda representa a memória alocada devido ao JavaScript. O valor correto representa toda a memória do SO que está sendo alocada devido a essa instância de VM. O valor à direita inclui o valor à esquerda. No Gerenciador de tarefas do Chrome, o valor à esquerda corresponde a JavaScript Memory, e o valor à direita corresponde a Memory Footprint.

A guia "Rede" foi renomeada para "Página"

No painel Origens, a guia Rede agora é chamada de Página.

Duas janelas do DevTools lado a lado, demonstrando a mudança de nome.

Figura 10. Na antiga interface à esquerda, a guia que mostra os recursos da página é chamada de Network, enquanto na nova interface à direita é chamada de Page.

Atualizações do tema escuro

O Chrome 67 vem com algumas mudanças menores no esquema de cores do tema escuro. Por exemplo, os ícones de pontos de interrupção e a linha de execução atual agora estão verdes.

Captura de tela do novo ícone de ponto de interrupção e do esquema de cores da linha de execução atual.

Figura 11. Captura de tela do novo ícone de ponto de interrupção e do esquema de cores da linha de execução atual

Transparência dos certificados no painel "Segurança"

O painel Segurança agora informa informações sobre a transparência dos certificados.

Informações de transparência dos certificados no painel "Segurança".

Figura 12. Informações de transparência da certificação no painel "Segurança"

Isolamento de sites no painel "Performance"

Se o isolamento de sites estiver ativado, o painel Performance agora vai mostrar um gráfico de chamas para cada processo, para que você possa conferir o trabalho total que cada um deles está causando.

Gráficos de chamas por processo em uma gravação de performance.

Figura 13. Gráficos de chamas por processo em uma gravação de desempenho

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.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades no DevTools.