Novidades do DevTools (Chrome 62)

Novos recursos e mudanças chegando ao DevTools no 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 em grade CSS.
• Uma nova API Console para consultar objetos.
• Filtros negativos e filtros de URL no Console.
• Importações HAR no painel Network.
• Recursos de cache que podem ser visualizados.
• Depuração de cache mais previsível.
• Cobertura de código no nível de bloqueio.

Operadores de espera de nível superior no console

O Console agora oferece suporte a operadores await de nível superior.

Figura 1. Como usar os 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 capturar a tela de uma parte da janela de visualização:

1. Clique em Inspect ou pressione Command + Shift + C (Mac) ou Control+Shift+C (Windows e Linux) para entrar no modo de inspeção de elementos.
2. Segure Command (Mac) ou Control (Windows e Linux) e selecione a parte a janela de visualização da qual deseja fazer uma captura de tela.
3. Solte o mouse. O DevTools faz o download de uma captura de tela da parte selecionada.

Figura 2. Como capturar a tela de uma parte da janela de visualização

Capturas de tela de nós HTML específicos

Para capturar a 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 Menu de comando.

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 em grade CSS

Para visualizar a grade CSS que está afetando um elemento, passe o mouse sobre um elemento na Árvore DOM do elemento Elementos. Uma borda tracejada aparece ao redor de cada um dos itens da grade. Isso só funciona quando o item selecionado ou o pai do item selecionado tem a propriedade display:grid aplicada a ele.

Figura 5. Como destacar uma grade CSS

Confira o vídeo abaixo para aprender os conceitos básicos da grade CSS em menos de 2 minutos.

Uma nova API para consultar objetos de heap

Chame queryObjects(Constructor) no Console para retornar uma matriz de objetos que foram criada com o construtor especificado. Exemplo:

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

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

Filtros do novo 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 está oculto porque -two está inserido na caixa Filtro

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

• No texto da mensagem.
• No nome de arquivo a partir do qual a mensagem foi originada.
• No texto do stack trace.

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 mensagens originadas de um script cujo O URL inclui <text>.

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

Figura 7. Usar a filtragem de URL para exibir somente mensagens originadas de scripts cujo URL inclui hymn. Ao passar o mouse sobre o nome do script, é possível ver que o nome do host inclui este texto

Importações HAR no painel Network

Arraste e solte um arquivo HAR no painel Rede para importá-lo.

Figura 8. Importar um arquivo HAR

Recursos de cache que podem ser visualizados no painel "Aplicativo"

Clique em uma linha em uma tabela de Armazenamento em cache para conferir 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. Para exemplo, quando uma página cria um novo cache, você precisa atualizar manualmente a página ou o DevTools para para ver o novo cache.

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

Veja a Demonstração de armazenamento em cache para fazer um teste.

Cobertura de código no nível de bloqueio

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

Figura 10. Um exemplo da guia Cobertura no Chrome 61. A linha 4 está marcada como usada, ele nunca é executado

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

Figura 11. Um exemplo da guia Cobertura no Chrome 62. A linha 4 está marcada como não utilizada

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.