Novidades do DevTools (Chrome 67)

Kayce Basques
Kayce Basques
X GitHub

Os novos recursos e as principais mudanças que serão lançados no DevTools do 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. Pesquisar o texto cache-control com o novo painel "Pesquisa de rede"

Clique em Diferenciar maiúsculas de minúsculas Diferenciar maiúsculas de minúsculas para que sua consulta faça essa distinção. Clique em Usar expressão regular Usar expressão regular para mostrar os resultados que correspondem ao padrão fornecido. Não é necessário incluir barras na sua expressão regular.

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

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

A interface do painel Pesquisa global agora corresponde à interface do novo painel Pesquisa na rede. Agora ele também imprime resultados de forma organizada para facilitar a leitura.

A interface antiga e a nova.

Figura 3. A interface antiga à 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 recurso pelo menu de comandos.

Pré-visualizações de valores de variáveis CSS no painel Estilos

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 cores de variáveis CSS.

Figura 4. Na interface antiga à esquerda, não há uma prévia 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 busca para copiar o código equivalente a fetch() dessa solicitação para a área de transferência.

Copiar o 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 no painel "Auditorias"

Novas auditorias

O painel Auditorias tem duas novas auditorias, incluindo:

Novas opções de configuração

Agora é possível configurar o painel Auditorias para:

  • Preserve as configurações de janela de visualização da área de trabalho e do user agent. Em outras palavras, você pode impedir que o painel Auditorias simule um dispositivo móvel.
  • Desative a limitação de rede e de CPU.
  • Preserve o armazenamento, como LocalStorage e IndexedDB, em todas as 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 Ver rastreamento para conferir os dados de desempenho de carregamento em que sua auditoria se baseia no painel Performance.

O botão "Ver rastreamento".

Figura 7. O botão Ver rastreamento

Interromper loops infinitos

Se você trabalha muito com loops for, do...while ou recursão, provavelmente já 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 execução do script Retomar.
  3. Toque e mantenha pressionado Retomar execução de script Retomar e selecione Encerrar chamada atual do JavaScript Parar.

No vídeo acima, o relógio está sendo atualizado por um timer de setInterval(). Clicar em Iniciar loop infinito executa um loop do...while que nunca para. O intervalo é retomado porque não estava em execução quando Encerrar chamada atual do JavaScript Parar foi selecionado.

Velocidade do usuário nas guias de performance

Ao visualizar uma gravação de desempenho, clique na seção User Timing para conferir as medidas de User Timing nas guias Resumo, De baixo para cima, Árvore de chamadas e Registro de eventos.

Como ver as medições de velocidade do usuário na guia "De baixo para cima".

Figura 8. Visualizar medidas de User Timing na guia De baixo para cima. 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 (Thread principal, Tempo do usuário, GPU, ScriptStreamer etc.) 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 no menu suspenso Destino, como antes.

Capturas de tela do painel "Memória" antes e depois.

Figura 9. Na interface antiga à esquerda, as instâncias de VM JavaScript ficam ocultas no menu suspenso Destino. Já na nova interface à direita, elas aparecem na tabela Selecionar instância de VM JavaScript.

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 à direita 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 como "Página"

No painel Fontes, a guia Rede agora se chama Página.

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

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

Atualizações do tema escuro

O Chrome 67 vem com várias pequenas mudanças no esquema de cores do tema escuro. Por exemplo, os ícones de ponto 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 sobre a transparência dos certificados.

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

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

Isolamento de sites no painel de desempenho

Se você tiver o isolamento de sites ativado, o painel Performance vai fornecer um gráfico de chamas para cada processo. Assim, você poderá ver o trabalho total que cada processo está causando.

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

Figura 13. Gráficos em degradê por processo em uma gravação de performance

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

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 do DevTools.