Novidades do DevTools (Chrome 67)

Kayce Basques
Kayce Basques
X GitHub

Os novos recursos e as principais mudanças que serão lançadas no 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 que você fornecer.

Pesquisar o texto "cache-control" com o novo painel "Pesquisa de rede".

Figura 1. Pesquisar o texto cache-control com o novo painel "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 colocar barras no início e no fim da RegEx.

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 usa estilos de formatação nos resultados 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 abri-lo pelo Menu de comando.

Prévia 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 cor 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 fetch

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 e user agent para computadores. Em outras palavras, é possível impedir que o painel Auditorias simule um dispositivo móvel.
  • Desative a limitação de rede e CPU.
  • Preservar 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 View Trace para ver os dados de performance de carregamento em que sua auditoria se baseia no painel Performance.

O botão "Ver trace".

Figura 7. O botão Ver trace

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, você pode:

  1. Abra o painel Origens.
  2. Clique em Pausar Pausar. O botão muda para Retomar execução do script Retomar.
  3. Mantenha pressionado Retomar execução do script Retomar e selecione Interromper chamada JavaScript atual Parar.

No vídeo acima, o relógio está sendo atualizado por um timer 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 a opção Stop Current JavaScript Call Parar foi selecionada.

Velocidade do usuário nas guias de desempenho

Ao visualizar uma gravação de desempenho, clique na seção User Timing para conferir as medidas de velocidade do usuário nas guias Summary, Bottom-Up, Call Tree e log de eventos.

Como visualizar as medições de velocidade do usuário na guia "Bottom-Up".

Figura 8. Como visualizar as medições de velocidade do usuário na guia Bottom-Up. A barra azul à esquerda da seção Velocidade do usuário indica que ela está selecionada.

Em geral, agora é possível selecionar qualquer uma das seções (Linha de execução principal, Velocidade 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 do JavaScript associadas a uma página, em vez de ocultá-las atrás do 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 do JavaScript estão ocultas atrás do menu suspenso Destino, enquanto na nova interface à direita elas são mostradas na tabela Selecionar instância de VM do JavaScript.

Ao lado da instância developers.google.com, há dois valores: 8.7 MB e 13.3 MB. O valor à esquerda representa a alocação de memória 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 Origens, a guia Rede agora se chama 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 é chamada de Página.

Atualizações do tema escuro

O Chrome 67 vem com algumas 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.

Uma 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 dados de transparência dos certificados.

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

Figura 12. Informações de Transparência dos Certificados no painel de segurança

Isolamento de sites no painel "Desempenho"

Se o Isolamento de site estiver ativado, o painel Performance agora vai fornecer um Flame Chart para cada processo, para que você possa ver o trabalho total que cada processo está causando.

Flame Charts por processo em uma gravação de desempenho.

Figura 13. Flame Charts por processo em uma gravação de desempenho

Baixar os canais de visualização

Use 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 de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes dos 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 outro assunto relacionado ao DevTools.

Novidades no DevTools

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