Novidades do DevTools (Chrome 66)

Kayce Basques

Os novos recursos e as principais mudanças que serão lançados no DevTools do Chrome 66 incluem:

• Ignorar script no painel Rede
• Ajustar automaticamente o zoom no modo dispositivo
• Impressão formatada nas guias Prévia e Resposta
• Visualizar conteúdo HTML na guia Prévia
• Substituições locais com estilos dentro do HTML

Leia ou assista a versão em vídeo das notas da versão abaixo.

Ignorar script no painel "Rede"

A coluna Iniciador no painel Rede informa por que um recurso foi solicitado. Por exemplo, se o JavaScript fizer com que uma imagem seja buscada, a coluna Iniciador vai mostrar a linha de código JavaScript que causou a solicitação.

Antes, se o framework encapsulasse solicitações de rede em um wrapper, a coluna Iniciador não seria tão útil. Todas as solicitações de rede apontavam para a mesma linha de código de wrapper.

O que você realmente quer nesse cenário é ver o código do aplicativo que causa a solicitação. Agora isso é possível:

1. Passe o cursor sobre a coluna Iniciador. A pilha de chamadas que causou a solicitação aparece em um pop-up.
2. Clique com o botão direito do mouse na chamada que você quer ocultar dos resultados do iniciador.
3. Selecione Adicionar script à lista de ignorados. A coluna Iniciador agora oculta todas as chamadas do script que você ignorou.

Figura 1. Ignorando requests.js

Gerencie os scripts ignorados na guia Lista de ignorados em Configurações.

Consulte Ignorar um script ou padrão de scripts para saber mais sobre como ignorar scripts.

Impressão formatada nas guias "Visualização" e "Resposta"

A guia Prévia no painel Rede agora imprime recursos de forma organizada por padrão quando detecta que eles foram minimizados.

Figura 2. A guia Visualização mostra o conteúdo de analytics.js por padrão.

Para conferir a versão não minimizada de um recurso, use a guia Resposta. Também é possível imprimir recursos manualmente na guia Resposta usando o novo botão Formatar.

Figura 3. Formatar manualmente o conteúdo de analytics.js usando o botão Formatar

Visualizar conteúdo HTML na guia "Visualização"

Antes, a guia Visualização no painel Rede mostrava o código de um recurso HTML em determinadas situações, enquanto renderizava uma prévia do HTML em outras. A guia Visualizar sempre faz uma renderização básica do HTML. Ele não foi projetado para ser um navegador completo, então talvez não mostre HTML exatamente como você espera. Se quiser ver o código HTML, clique na guia Resposta ou clique com o botão direito do mouse em um recurso e selecione Abrir no painel Origens.

Figura 4. Visualizar HTML na guia Visualização

Ajustar o zoom automaticamente no modo dispositivo

No Modo dispositivo, abra o menu suspenso Zoom e selecione Ajustar o zoom automaticamente para redimensionar a janela de visualização automaticamente sempre que você mudar a orientação do dispositivo.

As substituições locais agora funcionam com alguns estilos definidos em HTML

Quando o DevTools lançou as substituições locais no Chrome 65, uma limitação era que ele não conseguia rastrear mudanças nos estilos definidos em HTML. Por exemplo, na Figura 7, há uma regra de estilo no head do documento que declara font-weight: bold para elementos h1.

Figura 5. Um exemplo de estilos definidos em HTML

No Chrome 65, se você mudasse a declaração font-weight pelo painel Estilo do DevTools, as substituições locais não rastreariam a mudança. Em outras palavras, na próxima atualização, o estilo voltaria para font-weight: bold. Mas no Chrome 66, mudanças como essa agora persistem em todos os carregamentos de página.

Dica extra: ignore scripts de framework para tornar os pontos de interrupção do listener de eventos mais úteis

Quando criei o vídeo Começar a depurar JavaScript, alguns espectadores comentaram que os pontos de interrupção do listener de eventos não são úteis para apps criados com base em frameworks, porque os listeners de eventos geralmente são encapsulados em código de framework. Por exemplo, na Figura 8, configurei um ponto de interrupção click no DevTools. Quando clico no botão na demonstração, o DevTools faz uma pausa automática na primeira linha do código do listener. Nesse caso, ele faz uma pausa no código de wrapper do Vue.js na linha 1802, o que não é muito útil.

Figura 6. O ponto de interrupção click faz uma pausa no código de wrapper do Vue.js.

Como o script Vue.js está em um arquivo separado, posso ignorar esse script no painel Pilha de chamadas para tornar esse ponto de interrupção click mais útil.

Figura 7. Ignorar o script Vue.js no painel Pilha de chamadas

Na próxima vez que eu clicar no botão e acionar o ponto de interrupção click, ele vai executar o código Vue.js sem pausar nele e, em seguida, pausar na primeira linha de código no listener do meu app, que é onde eu realmente queria pausar o tempo todo.

Figura 8. O ponto de interrupção click agora faz uma pausa no código do listener do app.

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu 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.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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