Novidades do DevTools (Chrome 66)

Kayce Basques

Os novos recursos e as principais mudanças que chegam ao DevTools no Chrome 66 incluem:

• Ignorar o script no painel Network
• Ajustar o zoom automaticamente no Modo de dispositivo
• Impressão bonita nas guias Preview e Response
• Visualização do conteúdo HTML na guia Prévia
• Substituições locais com estilos no HTML

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

Ignorar script no painel "Network"

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 Initiator vai mostrar a linha de código JavaScript que causou a solicitação.

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

O que você realmente quer nesse cenário é ver o código do aplicativo que causa a solicitação. Isso agora é 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 para ignorar lista. 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 bonita nas guias "Pré-visualização" e "Resposta"

A guia Pré-visualização no painel Rede agora mostra os recursos de forma bonita por padrão quando detecta que eles foram minificados.

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

Para conferir a versão não simplificada 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. Mostrar o conteúdo de analytics.js manualmente usando o botão Format

Visualizar conteúdo HTML na guia "Visualizar"

Anteriormente, a guia Pré-lançamento 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 Preview agora sempre faz uma renderização básica do HTML. Ele não é um navegador completo, então pode não mostrar o HTML exatamente como você espera. Para conferir o código HTML, clique na guia Response ou clique com o botão direito do mouse em um recurso e selecione Open in Sources panel.

Figura 4. Como visualizar HTML na guia Visualizar

Ajustar o zoom automaticamente no modo de dispositivo

No Modo de dispositivo, abra o menu suspenso Zoom e selecione Ajustar zoom automaticamente para redimensionar a viewport 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 das limitações era que ele não conseguia rastrear mudanças nos estilos definidos no 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. Exemplo de estilos definidos no HTML

No Chrome 65, se você mudasse a declaração font-weight pelo painel Style do DevTools, as Overrides locais não rastreavam a mudança. Em outras palavras, na próxima recarga, o estilo voltaria para font-weight: bold. No Chrome 66, no entanto, mudanças como essa agora persistem nos carregamentos de página.

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

Quando criei o vídeo Como 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 em cima de frameworks, porque os listeners de eventos geralmente são agrupados no código do 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 pausa automaticamente na primeira linha do código do listener. Nesse caso, ele pausa no código do wrapper do Vue.js na linha 1802, o que não é muito útil.

Figura 6. O ponto de interrupção click é pausado no código do wrapper do Vue.js.

Como o script Vue.js está em um arquivo separado, posso ignorá-lo no painel Call Stack para tornar esse ponto de interrupção click mais útil.

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

Na próxima vez que 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 pausa no código do listener do app.

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização 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 que os 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 outra coisa relacionada ao DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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