Novidades do DevTools (Chrome 66)

Kayce Basques

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

• Ignorar script no painel Rede
• Ajuste de zoom automaticamente no Modo dispositivo
• Design elegante nas guias Preview e Response
• Como acessar o conteúdo HTML na guia Visualização
• Substituições locais com estilos dentro do HTML

Continue lendo ou assista à 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. Para exemplo, se o JavaScript fizer com que uma imagem seja buscada, a coluna Iniciador mostrará a linha de O código JavaScript que gerou a solicitação.

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

Nesse cenário, o que você realmente precisa é ver o código do aplicativo que causa a solicitação. Esse é agora possível:

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

Estilos de formatação nas guias "Preview" e "Response"

A guia Visualização no painel Rede agora altera a formatação dos recursos por padrão quando detecta de que esses recursos foram reduzidos.

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

Para visualizar a versão não reduzida de um recurso, use a guia Resposta. Também é possível fazer isso manualmente Recursos estilosos da guia Resposta, com o novo botão Formatar.

Figura 3. Como aplicar um estilo manual ao conteúdo de analytics.js usando o botão Format

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

Antes, a guia Visualização no painel Rede mostrava o código de um recurso HTML em determinadas situações, enquanto renderiza uma visualização do HTML em outras. Agora, a guia Visualização sempre faz uma renderização básica do HTML. Ele não foi criado para ser um navegador completo e, por isso, pode não ser exibido HTML exatamente como esperado. Para 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 de fontes.

Figura 4. Como visualizar o HTML na guia Visualização

Ajuste de zoom automaticamente no Modo dispositivo

Quando estiver no Device Mode, abra o menu suspenso Zoom e selecione Ajustar automaticamente o zoom para redimensionar automaticamente a janela de visualização sempre que a orientação do dispositivo for alterada.

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

Quando o DevTools lançava Local Overrides no Chrome 65, uma limitação era que ele não conseguiu acompanhar as alterações nos estilos definidos no HTML. Por exemplo, na Figura 7, há um 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ê mudou a declaração font-weight pelo painel Style do DevTools, Local As substituições não rastreariam a alteração. Em outras palavras, na próxima atualização, o estilo seria revertido voltar para font-weight: bold. Mas no Chrome 66, mudanças como essa agora persistem nos carregamentos de página.

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

Quando criei o vídeo Introdução à depuração do JavaScript, alguns espectadores comentaram que os pontos de interrupção de listener de eventos não são úteis para apps criados com base em estruturas, porque o evento os listeners geralmente são encapsulados no código do framework. Por exemplo, na Figura 8, configurei um click no DevTools. Quando clico no botão na demonstração, o DevTools pausa automaticamente no a primeira linha do código do listener. Nesse caso, ela pausa no código wrapper do Vue.js na linha 1802, que não é tão útil.

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

Como o script Vue.js está em um arquivo separado, posso ignorar esse script da Pilha de chamadas 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 eu clicar no botão e acionar o ponto de interrupção click, ele executará o código Vue.js. sem pausar e para na primeira linha do código no listener do meu app, que é em que eu realmente queria pausar o tempo todo.

Figura 8. O ponto de interrupção click agora é pausado no código do listener do app.

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   > 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.