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 em busca da consulta fornecida.

Procurar o texto "cache-control" no novo painel Network Search.

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 que a consulta diferencia 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 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. Ele agora também cria uma formatação dos resultados 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 a Pesquisa global. 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 uma variável 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 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 Copy > Copy As Fetch para copiar o código equivalente ao fetch() dessa 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 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, 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 visualizar os dados de desempenho de carregamento em que a auditoria se baseia no painel Desempenho.

O botão "Ver rastreamento".

Figura 7. O botão Ver trace

Interromper loops infinitos

Se você trabalha muito com loops for, do...while ou recursão, é provável que tenha executado um 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 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 uma repetição do...while que nunca é interrompida. O intervalo é retomado porque não estava em execução quando a opção Interromper chamada JavaScript atual Parar foi selecionada.

Velocidade do usuário nas guias "Desempenho"

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 medições da 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 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 Memory 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 Target como antes.

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

Figura 9. Na interface antiga à esquerda, as instâncias de VM JavaScript ficam 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 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 certo representa toda a memória do SO alocada por causa dessa instância de VM. O valor direito inclui o valor esquerdo. No Gerenciador de tarefas do Chrome, o valor à esquerda corresponde a JavaScript Memory e o valor à 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 de Rede, enquanto na nova interface à direita ela se chama Página.

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, 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, mostrando o trabalho total que cada um deles 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é-visualização 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.
  • Para informar um problema do DevTools, use Mais opções   Mais   > Ajuda > Informar problemas do 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

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

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59