Novidades do DevTools (Chrome 67)

Kayce Basques
Kayce Basques
X GitHub Falha

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

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

Abra o painel Network 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.

Buscando o texto "cache-control" com o novo painel "Pesquisa em rede".

Figura 1. Procurar 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 fazer sua consulta diferencia maiúsculas de minúsculas. Clique em Usar expressão regular Usar expressão regular para mostrar os resultados correspondentes o padrão que você fornece. Não é necessário colocar a 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 também cria resultados com estilo de formatação para facilitar a leitura.

A interface antiga e a nova.

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

Pressione Command+Option+F (Mac) ou Control + Shift + F (Windows, Linux, ChromeOS) para abrir Global Pesquisa. Também é possível fazer isso pelo Menu de comando.

Visualizações do valor da variável CSS no painel Estilos

Quando o valor de uma propriedade de cor CSS, como background-color ou color, é definido como um CSS o DevTools agora mostra uma visualização dessa cor.

Um exemplo de valores de cor de variável CSS.

Figura 4. Na interface antiga à esquerda, não há visualização de cores ao lado de color: var(--main-color). 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 fetch() da solicitação para a área de transferência.

Copiando o código equivalente a fetch() para uma solicitação.

Figura 5. Copiar o código equivalente a fetch() de 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 Auditorias tem duas novas auditorias:

Novas opções de configuração

Agora é possível configurar o painel Auditorias para:

  • Preservar as configurações do user agent e da janela de visualização da área de trabalho. Em outras palavras, é possível impedir que as auditorias para não simular um dispositivo móvel.
  • Desative a limitação de rede e CPU.
  • Preserve o armazenamento, como o LocalStorage e o 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 Ver trace para ver os dados de desempenho de carregamento da sua auditoria. com base no painel Desempenho.

O botão "Ver rastreamento".

Figura 7. O botão Ver trace

Interromper loops infinitos

Se você trabalha muito com repetições for, do...while ou recursão, provavelmente já executou uma de loop infinito por engano durante o desenvolvimento do site. Para interromper esse loop infinito, agora é possível:

  1. Abra o painel Origens.
  2. Clique em Pausar Pausar. O botão muda para Retomar Execução de script Retomar.
  3. Espere Retomar a execução do script. Retomar e selecione Parar Chamada de JavaScript atual Parar.

No vídeo acima, o relógio está sendo atualizado por um timer setInterval(). Clicando em Iniciar Infinite Loop executa uma repetição do...while que nunca é interrompida. O intervalo é retomado porque não foi em execução quando a opção Stop Current JavaScript Call Parar era selecionados.

Velocidade do usuário nas guias "Desempenho"

Ao visualizar uma gravação de desempenho, clique na seção Velocidade do usuário para ver a Velocidade do usuário nas guias Resumo, Bottom-Up, Á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 medições da velocidade do usuário na guia Bottom-Up. A barra azul à esquerda A seção Velocidade do usuário indica que ele está selecionado.

Em geral, agora é possível selecionar qualquer uma das seções (Linha de execução principal, Velocidade do usuário, GPU, ScriptStreamer etc.) e veja 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á-los atrás do menu suspenso Target 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 ficam ocultas atrás do Destino, enquanto na nova interface à direita elas são mostradas na seção Selecionar Tabela da instância de VM JavaScript

Ao lado da instância developers.google.com, há dois valores: 8.7 MB e 13.3 MB. O lado esquerdo representa a memória alocada devido ao JavaScript. O valor certo representa toda a memória do SO alocado por causa dessa instância de VM. O valor direito inclui o valor esquerdo. No Gerenciador de tarefas do Chrome, o valor da esquerda corresponde a JavaScript Memory, e o valor da direita corresponde a Memory Footprint.

Guia "Rede" renomeada para guia "Página"

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

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

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

Atualizações do tema escuro

O Chrome 67 é lançado com várias pequenas mudanças no esquema de cores do tema escuro. Por exemplo, o os ícones de ponto de interrupção e a linha de execução atual agora ficam verdes.

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

Figura 11. Captura de tela do ícone do novo 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 mostra informações de transparência do certificado.

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 "Desempenho"

Se o isolamento de sites estiver ativado, o painel Desempenho 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

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 dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

  • Envie uma sugestão ou feedback pelo site crbug.com.
  • Informe um problema do DevTools usando Mais opções   Mais > Ajuda > Relate problemas no DevTools no DevTools.
  • Tuíte em @ChromeDevTools.
  • Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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