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. Pesquisa do 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 resultados que correspondam ao padrão fornecido. Não é necessário envolver o RegEx em barras.

Uma consulta de expressão regular no painel Network Search.

Figura 2. Uma consulta de expressão regular no painel Network Search.

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 fazer isso pelo Menu de comando.

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 visualização 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 Resume Script Execution 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 Velocidade do usuário para ver as medidas de Velocidade do usuário nas guias Resumo, De baixo para cima, Árvore de chamadas e Log de eventos.

Visualização das medidas da Velocidade do usuário na guia Bottom-Up.

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 (Linha de execução principal, Tempo do usuário, GPU, ScriptStreamer e assim por diante) e visualizar 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 do antes e depois do painel "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 interface antiga à esquerda, a guia que mostra os recursos da página é chamada de Rede, enquanto na nova interface à direita ela se chama Página.

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 das certificações 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

Considere usar o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento dão acesso aos recursos mais recentes do DevTools, permitem testar APIs modernas da plataforma da Web e ajudam a encontrar problemas no 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 que foi abordado na série Novidades no DevTools.