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 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 "Pesquisa na rede".

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

Clique em Diferenciar maiúsculas de minúsculas 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 todos os resultados que correspondem ao padrão fornecido. Não é necessário colocar seu RegEx em barras.

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 IU do painel Pesquisa global agora corresponde à IU do novo painel Pesquisa de rede. Agora, ele também mostra 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 e ChromeOS) para abrir a pesquisa global. Também é possível abrir usando o 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 uma variável CSS, o DevTools agora mostra uma visualização dessa cor.

Exemplo de valores de cor de variáveis CSS.

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

Copiar o código equivalente de 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 Auditorias tem duas novas auditorias, incluindo:

Novas opções de configuração

Agora é possível configurar o painel Auditorias para:

  • Preserve as configurações da janela de visualização da área de trabalho e do user agent. Em outras palavras, é possível impedir que o painel Auditorias simule um dispositivo móvel.
  • Desative a limitação de rede e CPU.
  • Preserve o armazenamento, como o LocalStorage e o IndexedDB, nas 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 visualizar os dados do desempenho de carregamento usados na sua auditoria no painel Desempenho.

O botão "Ver trace".

Figura 7. O botão Ver trace

Parar loops infinitos

Se você trabalha muito com loops for, do...while ou recursão, provavelmente executou um loop infinito por engano ao desenvolver seu site. Para interromper o loop infinito, faça o seguinte:

  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 meio de um timer setInterval(). Clicar em Start Infinite Loop executa uma repetição do...while que nunca é interrompida. 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 um registro de performance, clique na seção Velocidade do usuário para conferir as medidas de Velocidade do usuário nas guias Resumo, Bottom-Up, Call Tree e Event Log.

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

Figura 8. Veja as medidas de velocidade do usuário na guia Bottom-Up. A barra azul à esquerda da seção Velocidade do usuário indica que ela foi selecionada.

Em geral, agora é possível selecionar qualquer uma das seções (Conversa principal, Velocidade do usuário, GPU, ScriptStreamer etc.) e ver a atividade dela nas guias.

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

O painel Memory agora lista claramente todas as instâncias de VM JavaScript associadas a uma página, em vez de ocultá-las no menu suspenso Target como antes.

Capturas de tela de antes e depois do painel do Memory.

Figura 9. Na interface antiga à esquerda, as instâncias de VM 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 JavaScript

Ao lado da instância de developers.google.com, há dois valores: 8.7 MB e 13.3 MB. O valor esquerdo representa a memória alocada devido ao JavaScript. O valor certo representa toda a memória do SO que está sendo alocada por causa dessa instância de VM. O valor à direita inclui o valor à esquerda. No gerenciador de tarefas do Chrome, o valor esquerdo corresponde a JavaScript Memory, e o valor direito 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 é 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 do ponto de interrupção e a linha de execução atual agora estão verdes.

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

Figura 11. Uma captura de tela do novo ícone do 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 sobre a transparência do certificado.

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 de desempenho

Se o Isolamento de sites estiver ativado, o painel Desempenho agora fornecerá um Flame Chart para cada processo para que você possa conferir o trabalho total de cada processo.

Gráficos de chama por processo em uma gravação de desempenho.

Figura 13. Gráficos de chama 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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59