Novidades do DevTools (Chrome 62)

Novos recursos e mudanças no DevTools do Chrome 62:

• Suporte para operadores await de nível superior no Console.
• Capturas de tela de uma parte da janela de visualização e capturas de tela de nós HTML específicos.
• Destaque da grade CSS.
• Uma nova API Console para consultar objetos.
• Filtros negativos e de URL no console.
• Importações de HAR no painel Rede.
• Recursos de cache visualizáveis.
• Depuração de cache mais previsível.
• Cobertura de código no nível do bloco.

Operadores await de nível superior no console

O Console agora é compatível com operadores await de nível superior.

Figura 1. Como usar operadores await de nível superior no console

Novos fluxos de trabalho de captura de tela

Agora é possível fazer uma captura de tela de uma parte da janela de visualização ou de um nó HTML específico.

Capturas de tela de uma parte da janela de visualização

Para fazer uma captura de tela de uma parte da sua janela de visualização:

1. Clique em Inspecionar ou pressione Command+Shift+C (Mac) ou Control+Shift+C (Windows, Linux) para entrar no modo de inspeção de elemento.
2. Mantenha pressionada a tecla Command (Mac) ou Control (Windows, Linux) e selecione a parte da janela de visualização que você quer capturar.
3. Solte o mouse. O DevTools baixa uma captura de tela da parte selecionada.

Figura 2. Capturar uma parte da janela de visualização

Capturas de tela de nós HTML específicos

Para fazer uma captura de tela de um nó HTML específico:

1. Selecione um elemento no painel Elementos.

   

   Figura 3. Neste exemplo, a meta é fazer uma captura de tela do cabeçalho azul que contém o texto Tools. Esse nó já está selecionado na Árvore DOM do painel Elementos.

2. Abra o Command Menu (link em inglês).

3. Comece a digitar node e selecione Capture node screenshot. O DevTools faz o download de uma captura de tela do nó selecionado.

   

   Figura 4. O resultado do comando Capture node screenshot

Destaque da grade CSS

Para ver a grade CSS que está afetando um elemento, passe o cursor sobre ele na árvore DOM do painel Elementos. Uma borda tracejada aparece ao redor de cada item da grade. Isso só funciona quando o item selecionado ou o pai dele tem display:grid aplicado.

Figura 5. Destacando uma grade CSS

Confira o vídeo abaixo para aprender o básico sobre a grade CSS em menos de dois minutos.

Uma nova API para consultar objetos de heap

Chame queryObjects(Constructor) do console para retornar uma matriz de objetos criados com o construtor especificado. Exemplo:

• queryObjects(Promise). Retorna todas as promessas.
• queryObjects(HTMLElement). Retorna todos os elementos HTML.
• queryObjects(foo), em que foo é um nome de função. Retorna todos os objetos instanciados via new foo().

O escopo de queryObjects() é o contexto de execução selecionado no momento no console. Consulte Como selecionar o contexto de execução.

Novos filtros do console

O Console agora é compatível com filtros negativos e de URL.

Filtros negativos

Digite -<text> na caixa Filtro para filtrar qualquer mensagem do Console que inclua <text>.

Figura 6. A primeira instrução registra one, two, three e four no Console. two fica oculto porque -two é inserido na caixa Filtro

O DevTools filtra uma mensagem se <text> for encontrado:

• No texto da mensagem.
• No nome do arquivo de origem da mensagem.
• No texto do rastreamento de pilha.

O filtro negativo também funciona com expressões regulares, como -/[4-5]*ms/.

Filtros de URL

Digite url:<text> na caixa Filtro para mostrar apenas as mensagens originadas de um script cujo URL inclui <text>.

O filtro usa correspondência difusa. Se <text> aparecer em qualquer lugar do URL, o DevTools vai mostrar a mensagem.

Figura 7. Usando a filtragem de URL para mostrar apenas mensagens originadas de scripts cujo URL inclui hymn. Ao passar o cursor sobre o nome do script, você pode ver que o nome do host inclui esse texto.

Importações de HAR no painel Rede

Arraste e solte um arquivo HAR no painel Rede para importar.

Figura 8. Como importar um arquivo HAR

Recursos de cache visualizáveis no painel "Application"

Clique em uma linha em uma tabela de armazenamento em cache para ver uma prévia desse recurso abaixo da tabela.

Figura 9. Como visualizar um recurso de cache

Depuração de cache mais responsiva

No Chrome 61 e versões anteriores, a depuração de caches criados com a API Cache é... difícil. Por exemplo, quando uma página cria um novo cache, é necessário atualizar manualmente a página ou o DevTools para ver o novo cache.

No Chrome 62, a guia Cache Storage agora é atualizada em tempo real sempre que você cria, atualiza ou exclui um cache ou um recurso. Assista o vídeo abaixo para ver um exemplo.

Confira a demonstração do Cache Storage para testar.

Cobertura de código no nível do bloco

No Chrome 61 e versões anteriores, a guia Cobertura marca todo o código dentro de uma função como usado, desde que a função seja chamada.

Figura 10. Exemplo da guia Cobertura no Chrome 61. A linha 4 é marcada como usada, mesmo que nunca seja executada.

A partir do Chrome 62, a guia Cobertura informa qual código dentro de uma função é chamado.

Figura 11. Exemplo da guia Cobertura no Chrome 62. A linha 4 está marcada como não usada

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.